Force new line for float:left

HTML & CSS
1

I need exactly what’s described here:

http COLON SLASH SLASH css DOT maxdesign DOT com DOT au SLASH floatutorial SLASH tutorial0405.htm

(i’m new here so cannot post links, replace COLON SLASH DOT and remove sapces in the link)

Basically I have a list of float:left elements. I want to force a new line break in the middle.

The method over there adds a extra <br style=“clear:both”> markup. Is there other way without extra markup?

I tried this but doesn’t work:

.column {
width: 10em;
float: left;
}
.last {
clear:right;
}

<div class=“column”>…</div><div class=“column”>…</div><div class=“column last”>…</div>
<div class=“column”>…</div><div class=“column”>…</div><div class=“column last”>…</div>

2

Hello

I am a beginner, but if you search for “css after pseudeo element” then you can see how to do clear without extra markup- But it is not supported by all browsers. You still need to do extra markup for IE

Thats as much as i know.

Alan

3

Yes, the clearfix

4

Hi float%clear, welcome to SitePoint! :wave:

IE6-7has a very buggy support of the clear property.

To make the class=last items ending their row of floats, forcing the next float to wrap below also in IE6-7, you could try unfloat them. Then for good browsers they also need overflow.

.column {
width: 10em;
float: left;
}
.last {
float: none;
overflow: hidden;
}

@ Ryan
The Clearfix will not clear anything here because it will be contained by the float. :slight_smile:

5

@Erik,

I was answering this

The method over there adds a extra <br style=“clear:both”> markup. Is there other way without extra markup?

Clearfix=no markup besides adding the class.

Edit:

Oh I get what he was saying now…I assumed he wanted to contain his floats and was wondering about a way other then putting the <br> at the bottom of the containing div.