How do I create a two column footer using div only? (tableless)
The footer is 980px it should contain....
Copyright 2010 xyz.com (left side)
About us | privacy | terms (right side)
+2
A:
In your css:
#footerLeft { width: 47%; float: left; display: block; 50px;}
#footerRight { width: 47%; float: right; display: block; height: 50px; }
#footer { width: 100%; height: 100% width: 980px; }
Html:
<div id="footer">
<div id="footerLeft">Copyright 2010 xyz.com</div>
<div id="footerRight">About Us | Privacy | terms </div>
</div>
Check out http://www.blueprintcss.org/ Framework, it will make life easier.
gnome
2010-07-13 16:27:21
display:block isnt necessary, width: 100% followed by 980px is redundant, doubt the height:100% does anything.
meder
2010-07-13 16:36:58
plus you aren't containing floats.
meder
2010-07-13 16:39:11
correct - don't need the width:100% in the #footer -- I should have proofed before posting.
gnome
2010-07-13 16:39:21
+1
A:
You can do it something like this:
CSS:
.Footer_outer{
width: 980px;
border: 1px solid;
}
.Footer_inner_left{
width: 49%;
Float: left;
display:inline;
}
.Footer_inner_right{
width: 49%;
Float: right;
display:inline;
}
HTML:
<div class="Footer_outer">
<div class="Footer_inner_left">Copyright 2010 xyz.com </div>
<div class="Footer_inner_right">About us | privacy | terms </div>
</div>
Kangkan
2010-07-13 16:32:54
A:
css:
#footer { overflow:hidden; width:980px; margin:0 auto; }
#footer #copy { float:left; display:inline; width:490px; }
#footer #links { float:right; display:inline; width:490px; }
html:
<div id="footer"><div id="copy">copyr..</div><div id="links">blah</div></div>
meder
2010-07-13 16:38:58