CODEWITHSUNDEEP
csspositionhtml
Max Frai
Max Frai

Reputation: 64326

Css, child-divs and floating

I'm tired of work with these kinds of divs :(.

I have 2 divs:

<div id="content">
  <div id="row_left"></div>
  <div id="row_middle"></div>
  <div id="row_right"></div>
</div>
<div id="bottom"></div>

css:

#content {
  overflow: hidden; width: 100%;
}

Content-div is including another 3 divs, which should stay horizontally.

#row_left, #row_middle, #row_rifht { float: left; width: 33%; }

The trouble is that bottom div doesn't stay refer to content-text. It's always on the same position, even when content-rows text is over. How can I repair it?

Upvotes: 0

Views: 197

Answers (3)

c_harm
c_harm

Reputation:

If you'd like to clear the floats without adding extra markup, put this in your CSS:

#content { zoom: 1; }
#content:after {
    clear: both;
    display: block;
    content: ".";
    height: 0;
    visibility: hidden;
}

Upvotes: 1

cjk
cjk

Reputation: 46465

Try adding a div after content with the style: 

clear: both; line-height: 0.1em;

And put an 

&nbsp;

in it

Upvotes: 1

Rippo
Rippo

Reputation: 22424

Try

...
<div id="bottom" style='clear:both'></div>

Upvotes: 2

Related Questions