CODEWITHSUNDEEP
csshtmlrows
DarkLightA
DarkLightA

Reputation: 15682

How do I make a HTML div go under another div?

<html>
<body>
<div id="content1">
    <div id="text1">This text floats left</div>
    <div id="images1"><img src="img.jpg" /></div> <!--Floats right-->
</div>
<div id="content2">Text 2</div>
</body>
</html>

When I try to do this, and try to make a layout like a table with two rows with the text floating left and the image floating right in the top row, all that comes up is that the content2-div is squashed into the content1-div. How can I keep them separate?

Upvotes: 21

Views: 85253

Answers (9)

Tgr
Tgr

Reputation: 28200

overflow:hidden on your content1 div will make it expand to include all floated children. (Of course, this will hide non-floated overflowing content.)

Upvotes: 0

Vinnyq12
Vinnyq12

Reputation: 1559

You have not closed off <div id="images1">. If this div is closed and the Content divs arenot float left then it should work.

Upvotes: 0

Niklas
Niklas

Reputation: 30002

Apply:

#images1{
 float:right;   
}

#content2{
 clear:both;   
}

and fix your html markup

<div id="images1"><img src="img.jpg" /> <!--Floats right-->

close the div:

<div id="images1"><img src="img.jpg" /> <!--Floats right--></div>

Upvotes: 2

BentOnCoding
BentOnCoding

Reputation: 28208

clear your floats. Here is an article describing whats going on: Clearing A Float Element

Upvotes: -1

sudipto
sudipto

Reputation: 2482

I hope you need to add another div before <div id="content2">Text 2</div> which will be <div style="clear:both;"></div>

Upvotes: 0

Rizwan Sharif
Rizwan Sharif

Reputation: 1119

use 'clear:both' on content2 div

Upvotes: 0

solendil
solendil

Reputation: 8458

You forgot to close your <div id="images1"> :)

Upvotes: 0

Saurabh Gokhale
Saurabh Gokhale

Reputation: 46415

Use clear:both; on your content#2

Upvotes: 2

Dave Kiss
Dave Kiss

Reputation: 10495

You need to use clear:both; on your #content2 div

If you really wanna learn everything about floats, check out this amazing tutorial: http://css.maxdesign.com.au/floatutorial/

Upvotes: 24

Related Questions