Forum Moderators: not2easy

Message Too Old, No Replies

div inside div

doesnt make sense :(

         

monster

12:55 pm on Sep 13, 2003 (gmt 0)

10+ Year Member



Hi folks,

first great place here thats for sure and people seem very nice and helpful.

CSS

#footer {
background-color: #F7F7F8;
border: 1px #999999;
border-style: solid none none none;
margin: 130px 0px 0px 0px;
}

#footer .left {
color: #666666;
float: left;
font-size: 9px;
line-height: 14px;
margin: 0;
padding: 13px 12px 11px;
width: 300px;
}

#footer .right {
float: right;
font-size: 9px;
line-height: 14px;
margin: 0px;
padding: 13px 12px 11px;
text-align: right;
width: 300px;
}

html

<div id="footer">
<div class="left">
&copy; 2003 company. All rights reserved.
</div>
<div class="right">
<a href="http://www.company.com" target="_blank">www.company.com</a>
</div>
</div>

this is the way i see it

the class "right" and "left" sit inside the "footer" just like in a table design, however changing the BG color of the footer tag has no effect whatsoever because it appears to sit OUTSIDE the "right" and "left" classes the only way to get it to do what i want is to add a "height" property to the "footer" which just doesnt seem right to me?

am i missing something here as i am confused by this.

many kind regards...

photon

2:29 pm on Sep 13, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hi monster--

Welcome to WebmasterWorld!

When you float a div, you remove it from the normal flow of the HTML, so that the parent div in essence doesn't even know it's there, and therefore can't stretch along with the "children".

SuzyUK explains it much better than I can in this post [webmasterworld.com]; look at message #4.

Note that this behavior varies from browser to browser. For example, Mozilla gets it right, but it looks "broken" with your code. IE doesn't follow the standard here, so it looks "right".

BjarneDM

8:39 pm on Sep 13, 2003 (gmt 0)

10+ Year Member



also, set the width to 49% instead of 300px unless you have previously forced the browser to display the page at a width of at least 600px

monster

4:46 am on Sep 14, 2003 (gmt 0)

10+ Year Member



thanks guys very much appreciated.

In the end i decided to use the extra <div> tag that SuzyUK mentioned from that link to make sure it was browser safe :) well to a degree i hope.

BjarneDM i got rid of the width tag all together as it was set by the main "container" and i didnt need any borders as such so no real need i guess.

thanks again folks...