CODEWITHSUNDEEP
csscss-floatfooterhtml
rws907
rws907

Reputation: 777

CSS 3 Column Footer Layout (Columns are offset)

So I've written a very simple 3 column footer layout that SHOULD work. But 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 WITH US 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">
        &copy;2013 Site. All rights reserved<br><br>
        Support Local Business
      </div>
</div>

Here's what I get in Chrome: Chrome Error

And here's what I get in IE9 IE9 Error

With as simple as this is, it should work (in theory) but it doesn't. There should be 3 columns of 300px each in a single row. Need a fresh set of eyes at this point. TIA!

Upvotes: 0

Views: 4124

Answers (2)

kirushanths
kirushanths

Reputation: 131

Your HTML solution, is going to always give different results in different browsers.

I fixed up your current HTML and CSS to give a proper 3-column layout. I added float:left to all elements.

Here's the jsFiddle: http://jsfiddle.net/HhCYh/

Better Solution:

Personally for my own HTML column layouts, I use this HolyGrail 3 - column layout which works amazing in all browsers even in IE.

http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-pixels.htm

Take a look. It requires extra HTML markup in the file but if you want a cross-browser solution in Chrome and IE, this is the best solution.

Good luck Kiru

Upvotes: 2

Cl&#233;ment Malet
Cl&#233;ment Malet

Reputation: 5090

All your divs have to be floating to do what you're looking for.

Try this, it works well for me on jsfiddle :

#footer_left{float:left; width:300px; text-align:left; border: 1px solid;}
#footer_middle{float:left; width:300px; text-align:left; border: 1px solid;}
#footer_right{float:left; width:300px; text-align:left; border: 1px solid;}

Considering what you had, Chrome was doing exactly what you asked him to display, while IE9 had your 2nd div in the middle for no reason.

Upvotes: 0

Related Questions