How do I make a HTML div go under another div?_问答_开发者

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

开发者 https://www.devze.com 2023-03-10 20:40 出处：网络

<html> <body> <div id=\"content1\"> <div id=\"text1\">This text floats left</div>

相关专题：css rows

<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.)