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

Question

<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?

score 23 · Accepted Answer · answered Jun 07 '11 at 15:59

23

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/

answered Jun 07 '11 at 15:59

Dave Kiss

10,289
11
53
75

That was a super useful article. I totally didn't want to read it, but it was really intuitive after and not hard to do. Nice find. – Shmack Nov 04 '19 at 02:59

score 2 · Answer 2 · answered Jun 07 '11 at 16:00

2

Use clear:both; on your content#2

answered Jun 07 '11 at 16:00

Saurabh Gokhale

53,625
36
139
164

score 2 · Answer 3 · answered Jun 07 '11 at 16:01

2

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>

answered Jun 07 '11 at 16:01

Niklas

29,752
5
50
71

score 0 · Answer 4 · answered Jun 07 '11 at 16:00

0

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

answered Jun 07 '11 at 16:00

solendil

8,432
4
28
29

score 0 · Answer 5 · answered Jun 07 '11 at 16:00

0

use 'clear:both' on content2 div

answered Jun 07 '11 at 16:00

Rizwan Sharif

1,089
2
10
20

score 0 · Answer 6 · answered Jun 07 '11 at 16:00

0

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

answered Jun 07 '11 at 16:00

sudipto

2,472
1
17
21

score 0 · Answer 7 · answered Jun 07 '11 at 16:01

0

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

answered Jun 07 '11 at 16:01

BentOnCoding

27,307
14
64
92

score 0 · Answer 8 · answered Jun 07 '11 at 16:01

0

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

answered Jun 07 '11 at 16:01

Vinnyq12

1,519
9
9

score 0 · Answer 9 · answered Jun 07 '11 at 16:03

0

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

answered Jun 07 '11 at 16:03

Tgr

27,442
12
81
118

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

9 Answers9