Jump to content

Can't get this to work


twinklerip

Recommended Posts

i can't get this to work. i've been trying a lot of things... fixed positioning, floats etc. but not working.

<html><head><style type="text/css">body{text-align:center;}#bdy{width:770px; height:auto;}#header{height:100px; width:100%;}#navbar{	float:left; 	width:10em;	/*height:???;	height of #bdy is unknown. so if i use 100%, the result is same as auto.   	 i want it's height = (height of #bdy - height of #header) */	}#navbar2{	float:right;	width:20em;	/*height:???;	just like #navbar*/	}#content	float:left;  /*should i use float:left? */	width:auto;	height:auto;	/*the height of #content is unknown and it determines the height of #bdy*/	}	</style></head><body><div id="bdy">	<div id="hearder">	</div>		<div id="navbar">		</div>		<div id="content">  	</div>		<div id="navbar2">		</div></div></body></html>

The page should look something like this:samp.gif#bdy should appear in the middle and everything else should be in side that div tag.

Link to comment
Share on other sites

Have you tried tables? It would simplify things.

<style type="text/css">.maintable {  width: 100%;}.topcell {  text-align: center;  font-size: 20px;}.middlecell {  width: 73%;}.bottomheight {  height: 200px;}</style><table border="1" class="maintable">  <tr>    <td colspan="3" class="topcell">      Header Content Table    </td>  </tr>  <tr class="bottomheight">    <td>      Content Left    </td>    <td class="middlecell">      Content Middle    </td>    <td>      Content Right    </td>  </tr></table>
Link to comment
Share on other sites

not exactly what i was looking for. thanx anyways.

Something like this?
<html><head><style type="text/css">div {  border: 1px solid black;  text-align: center;}#bdy {  width:770px;}#header {  height:100px;  width:100%;}#navbar {  height: 130px;  width: 150px;  display: inline;}#navbar2 {  height: 130px;  width: 150px;  display: inline;}#content {  width: 466px;  height: 130px;  display: inline;}#maindiv {  width: 100%;  height: 130px;}</style></head><body><div id="bdy"><div id="header">Top Content</div><div id="maindiv"><div id="navbar">Left Content</div><div id="content">Main Content</div><div id="navbar2">Right Content</div></div></div></body></html>

I could not get the height and width to work on firefox, it perhaps has to deal with the display being inline... I don't know. But you can add content in and perhaps adjust it accordingly.

Link to comment
Share on other sites

Have you tried tables? It would simplify things.
<style type="text/css">.maintable {  width: 100%;}.topcell {  text-align: center;  font-size: 20px;}.middlecell {  width: 73%;}.bottomheight {  height: 200px;}</style><table border="1" class="maintable">  <tr>    <td colspan="3" class="topcell">      Header Content Table    </td>  </tr>  <tr class="bottomheight">    <td>      Content Left    </td>    <td class="middlecell">      Content Middle    </td>    <td>      Content Right    </td>  </tr></table>

Tables? Where have you been? :)
Link to comment
Share on other sites

:) well that's good to know. But I'm sticking with tables for simplitys sake, DIV's are hard as heck.

Link to comment
Share on other sites

  • 2 weeks later...

I wanted a good solution for this problem myself and I came up with one. :)

<style type="text/css">#holder {  width: 620px;  text-align: left;  margin: 5px;}.left, .right, .center,.header, .footer {  border: 1px solid black;  padding: 2px;  text-align: center;}.left {  float: left;  width: 100px;}.right {  float: left;  width: 100px;}.center {  float: left;  width: 398px;}.header {  width: 610px;}.footer {  width: 610px;}</style>

<div id="holder">  <div class="header">Header Div</div>      <div class="left">Left Div</div>      <div class="center">Center Div</div>      <div class="right">Right Div</div>  <div class="footer">Footer Div</div></div>
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...