css float - CSS 3 Column Footer Layout (Columns are offset) -
so i've written simple 3 column footer layout should work. i'm getting different results in different browsers.
the css:
#footer{ width:980px; height: 150px; padding: 10px; font-size: 12px; background-color: #94171b; color: #fff; } #footer_left{float:left; width:300px; text-align:left; border: 1px solid;} #footer_middle{width:300px; text-align:left; border: 1px solid;} #footer_right{float:right; width:300px; text-align:left; border: 1px solid;}
the html
<div id="footer"> <div id="footer_left"> <b>site navigation</b><br> <a href="/dev/site/">home</a><br> <a href="/dev/site/about.php">about</a><br> <a href="/dev/site/dining.php">food</a><br> <a href="/dev/site/drinks.php">drinks</a><br> <a href="/dev/site/">contact</a> </div> <div id="footer_middle"> <b>connect socially</b><br> http://www.facebook.com/tbd http://www.twitter.com/tbd http://www.instagram.com/tbd http://www.youtube.com/tbd </div> <div id="footer_right"> ©2013 site. rights reserved<br><br> support local business </div> </div>
here's in chrome:
and here's in ie9
with simple is, should work (in theory) doesn't. there should 3 columns of 300px each in single row. need fresh set of eyes @ point. tia!
your html solution, going give different results in different browsers.
i fixed current html , css give proper 3-column layout. added float:left
elements.
here's jsfiddle: http://jsfiddle.net/hhcyh/
better solution:
personally own html column layouts, use holygrail 3 - column layout works amazing in browsers in ie.
http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-pixels.htm
take look. requires html markup in file if want cross-browser solution in chrome , ie, best solution.
good luck kiru
Comments
Post a Comment