Forum Moderators: not2easy
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">
© 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...
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".
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...