CODEWITHSUNDEEP
css
user3737537
user3737537

Reputation: 3

Changing the behavior of CSS clear property?

I have 2 div(s) that they have been floated to left.(At the left bottom)

I have done the following code for the 2nd div:

#div2
{
 float:left;
 clear:left;
}

here the clear property forces the 2nd div to go down because div1 is also floated to left.

Is it possible make the 2nd div go upper than div1 when clear property is set?

Thanks

edit(added screenshot):

Upvotes: 0

Views: 63

Answers (3)

faby
faby

Reputation: 7558

no, It is not possible as has already been explained by previous answers

If you want to switch the divs you can try this fiddle that change the display css property

http://jsfiddle.net/S4975/1/

.div2
{
   display: table-header-group;

}
.div1{
  display: table-footer-group;
}

html

<div class="div1">A</div>
<div class="div2">B</div>

in this way who has display: table-header-group will render before elements with display: table-footer-group;

refer this

Upvotes: 0

ben author
ben author

Reputation: 2955

What you describe is fundamental box-model behavior. Part of the definition of 'clear' is that nodes clear down. There are a variety of strategies (JS, various positioning hacks) for putting things in an order different from how they appear in markup, but the best strategy is to just rearrange your markup.

Upvotes: 2

Nabil Kadimi
Nabil Kadimi

Reputation: 10384

No, this is not possible, #div2 comes after #div1 so it will always follow it whether vertically or horizontally (when both are floating).

The only solution here is to move #div2 before #div1 in the document, whether in the HTML or by manipulating them with Javascript.

Upvotes: 2

Related Questions