CODEWITHSUNDEEP
csshtmlcontainers
zik
zik

Reputation: 3085

div rendering outside container

I've started a template on a page and for some reason one of my DIVs (#content) is rendering outside the main "container" div. I've looked and looked and can't find anything is there anything wrong with my code?

Thanks in advance.

Kiz

CSS:

#container {
width:1000px;
margin:0 auto;
background-color:#000;
}

#top {
height:100px;
margin:0px 0px 50px 0px;
background-color:#F00;
}

#navigation {
width:720px;
height:100px;
float:left;
background-color:#0F0;
}

#logo {
width:180px;
height:100px;
float:right;
background-color:#00F;
}

.clear {
clear:both;
}

#content {
margin:0 auto;
background-color:#FF0;
}

And here's the HTML:

<div id="container">
  <div id="top">
    <div id="navigation">Navigation goes here</div>
    <div id="logo">Logo</div>
    <div class="clear" />
  </div>
  <div id="content">Content goes here
  </div>
</div>

Upvotes: 4

Views: 27887

Answers (3)

Mubasher Ali
Mubasher Ali

Reputation: 542

I got this error too and mine problem was a extra closing div so i removed that and it fixed.

Upvotes: 0

Kalle H. V&#228;ravas
Kalle H. V&#228;ravas

Reputation: 3615

Ok the issue seemed to be that your clear: both; elements were unclosed div's. Should have been br tags. So basically, that seemed to solved most of the stuff. Thou not sure, why the #top should be set height: 100px;, if the elements inside set the height anyway..even though they are floating.. then will set the ending.

Fiddle: http://jsfiddle.net/hobobne/qxYHN/1/

Upvotes: 2

benhowdle89
benhowdle89

Reputation: 37464

#container {
overflow: auto;
}

Upvotes: 20

Related Questions