CODEWITHSUNDEEP
htmlcss
good_evening
good_evening

Reputation: 21739

What is wrong with this html code?

<div style="float: left">text1</div> 
<div style="float: right;">text2</div>
<div class="random_class">text3</div>

Here is the problem. Random_class goes to the top, on the text1 and text2. What is wrong? Thank you.

Upvotes: 2

Views: 161

Answers (3)

cp3
cp3

Reputation: 2139

Whenever you float an element it takes it out of content flow.

Text1 and Text2 are floated so Text3 acts like it doesn't see it there. Floats are aware of other floats. Using clear:both; tells CSS that nothing should be to the left or right of it.

Upvotes: 2

Loktar
Loktar

Reputation: 35309

You need to clear the floats, below is an example of it.

<div class="random_class" style="clear:both">text3</div>

You could also do

.random_class {
    clear: both
}

Upvotes: 12

mylesagray
mylesagray

Reputation: 8869

Here you go:

http://jsfiddle.net/q4CqZ/3/

Added clear:both; to .random_class

Upvotes: 3

Related Questions