Question

On my html page I have this situation:

<div1><div2><div3><div4><div5><div6><div7><div8><div9>…

Just left floating divs shown one after another. All of them have CSS style float:left

I would like to achieve this result:

<div1><div2>
<div3><div4><div5><div6><div7>
<div8><div9>...

Basically, I would like to break flow on div3 and div8 (or on any div I wish) by telling it to start in new line. All other elements should follow after div that goes into new line. I tried using clear:left or clear:left on div3 or div8 , but it didn’t work. Div would go to new line, but all others would remain where they were, producing undesired result:

<div1><div2><div4><div5><div6><div7><div9>
<div3>
<div8>...

Is there any nice and simple solution here? Thanks.

Answer 1

For the love of god… don’t introduce any additional divs into your markup. clear:left works, if your design is correct. (you do know HTML has a whole selection of block-level elements to choose from) Using them might make your targeting a little easier…

CSS

div {
    float:left;
    margin-right:2ex;
    width:3em;
}

#div3, #div8 {
    clear:left;
}

HTML

<div>1</div><div>2</div>
<div id="div3">3</div><div>4</div><div>5</div><div>6</div><div>7</div>
<div id="div8">8</div><div>9</div>

fiddle: http://jsfiddle.net/d68pr/

EDIT
Here’s one that doesn’t require any IDs, classes, OR extra div-itus

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>

div:nth-child(3), div:nth-child(8) {
    clear:left;
}

http://jsfiddle.net/TMxSE/

** warning ** nth-child may not be available in some browsers. Check your traffic statistics to be sure IE8, and below are a very small percentage of your user-base. Or that those users’ experiences are acceptable.