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?
9 answers
solution1
21 ACCPTED 2011-06-07 15:59:39
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/
solution2
2 2011-06-07 16:00:24
Use clear:both; on your content#2
solution3
2 2011-06-07 16:01:37
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>
solution4
0 2011-06-07 16:00:28
You forgot to close your <div id="images1"> :)
solution5
0 2011-06-07 16:00:37
use 'clear:both' on content2 div
solution6
0 2011-06-07 16:00:45
I hope you need to add another div before <div id="content2">Text 2</div> which will be <div style="clear:both;"></div>
solution7
0 2011-06-07 16:01:09
clear your floats. Here is an article describing whats going on: Clearing A Float Element
solution8
0 2011-06-07 16:01:57
You have not closed off <div id="images1"> . If this div is closed and the Content divs arenot float left then it should work.
solution9
0 2011-06-07 16:03:04
overflow:hidden on your content1 div will make it expand to include all floated children. (Of course, this will hide non-floated overflowing content.)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.