Menu
<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?
981
You just need to give them both a parent div (that wraps both) and set the parent div to position:relative; then it won't matter how it's dynamically created.
What you want to do is use display: inline-block when you want the two div tags to be next to each other, and then media query that statement to display: block when you want the two div tags to be stacked.
With CSS properties, you can easily put two <div> next to each other in HTML. Use the CSS property float to achieve this. With that, add height:100px and set margin.
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/
195
Use clear:both; on your content#2
42
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
