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 w开发者_开发技巧ith 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?
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/
Use clear:both; on your content#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>
You forgot to close your <div id="images1"> :)
use 'clear:both' on content2 div
I hope you need to add another div before <div id="content2">Text 2</div> which will be <div style="clear:both;"></div>
clear your floats. Here is an article describing whats going on: Clearing A Float Element
You have not closed off <div id="images1">. If this div is closed and the Content divs arenot float left then it should work.
overflow:hidden on your content1 div will make it expand to include all floated children. (Of course, this will hide non-floated overflowing content.)
加载中,请稍侯......
精彩评论