CODEWITHSUNDEEP
cssinternet-explorer
nellygrl
nellygrl

Reputation: 657

Center DIV displays at bottom of page in Internet Explorer

I am having an issue with my divs in Internet Explorer. I have a three column layout and it displays correctly in all browsers (chrome, firefox, safari) except for Internet Explorer. In IE, the middle div displays at the bottom of the page instead of between the sidebars.

I've been trying for days to figure out what the issue is. I'm sure it's something to do with my CSS, but I'm not sure.

Any help would be appreciated!

My website is: http://www.onedirectionconnection.com

And here's the CSS:

div#container {
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    width: 1125px;
    text-align: left;
}

div#header {
    clear: both;
    height: 500px;
    margin-top: 0px;
    padding: 0px;
    border: 0px
}

div#navi {
    text-align: center;
    background: #FFFFFF;
    clear: both;
    height: 60px
    margin-left: 13px;
    margin-right: 13px;
    margin-bottom: 10px;
    padding-left: 39px;
    border-bottom: 3px solid #FF0000;
    border-top: 3px solid #FF0000;
}

div#left {
    float: left;
    width: 320px;
}

div#right {
    float: right;
    width: 320px;
}

div#middle {
    padding: 0px 325px 5px 325px;
    margin: 0px;
}

I just included the parts I think are relevant to the problem, but anyone can feel free to serf the code on my website if necessary!

Upvotes: 0

Views: 392

Answers (2)

Mateusz Rogulski
Mateusz Rogulski

Reputation: 7455

Increase width of container or decrease some margins.

#middle
{
 padding: 0px 0px 5px 0px;
 margin: 0px;
 overflow: hidden;
 width: 485px;
 float: left;
}

Upvotes: 1

Dipak
Dipak

Reputation: 12190

You need to work on the positioning of the DIVs. The left div is ok. Add middle div after left div and then right div.

Add float: left; width: 400px; margin: 0; to middle. And adjust the widths of middle DIVs child elements.

Upvotes: 1

Related Questions