Forum Moderators: not2easy
When I add up all of the height specs of the divs the container contains I get 576. I use that for my container height and the border ends up being about 20 pixels short on the bottom, and it does not totally frame the content visually.
Any ideas what is happening here? thanks
relevant css:
#container {
padding: 0px 0px 0px 0px;
margin-top: 7px;
position: absolute;
right: auto;
left: auto;
width: 1008px;
height: 576px;
}
#masthead {
background-color: #FFFFFF;
width: 1008px;
height: 37px;
float: left;
}
#navcontainer {
background-color: #FFFFFF;
position: relative;
height: 20px;
}
#menu{
width:100%;
height: 15px;
float:left;
}
#main {
width: 399px;
height: 504px;
float:left;
margin-left: 0px;
margin-top: 0px;
padding-left: 0px;
background-color: #ECE5D2;
border-right: 1px solid #000000;
}
And, can you give us a stripped down version of the HTML (containers only is enough)?
Here's the html content
<body>
<div id="container">
<div id="masthead"><img src="header.gif">
<form method=GET action=*****>
<input type="submit" value="Submit"></font><br></form>
<div id="navcontainer">CONTAINS A HORIZONTAL MENU</div>
<div id="menu">CONTAINS A HORIZONTAL POP-UP MENU</div>
<div id="main">
<h2>JULY 2007</h2>
<img src="main.gif">
<br><br>
<p>New Books</p>
<a href="*****"><img src="map.gif" align="bottom" border=0></a>
</div>
<div id="story">TEXT CONTENT</div>
<div id="left">TEXT CONTENT</div>
<div id="right">TEXT CONTENT</div>
<div id="footer">© 2000-2007 ****</div>
</div> <!-- ending div for container -->
Also, be careful when you set the height of objects. You are probably aware, but it's best to avoid specific heights as often as possible, and when you do add them, it's a good idea to use ems, to accomodate variable font sizes (otherwise you'll end up in overlapping and/or clipped content)
Also, in your HTML I noticed a </font> tag without <font>.
Lastly, probably the most serious problem... you're missing a closing </div> for your second div. (maybe it's supposed to be in /font's place. If it is, don't just put it there, but put it after the /form, or else you'll have improperly nested tags
[edited by: Xapti at 12:49 am (utc) on July 17, 2007]
Maybe I am going about this all wrong. I stripped the height specs out of my css to see what would happen. The frame around the container div showed up as it should. However on the divs that contained the content which had background colors are only appearing as tall as the content that is inside them. In other words, the divs now appear too short and they do not reach the bottom of the frame.
So my question is what is the best way to achieve a layout where the divs stretch to the bottom of the div that contains them if I should not be specifying the height of those divs in pixels?
Maybe it would help to know that this is a 4 column layout. Some of the columns have a background color. So if they are not all the same height, it just does not look correct.
thanks for the advice!
The faux columns were not what I was looking for. And I know of that technique, but i guess I didn't realize it was called "faux columns."
thanks again for all of the help
