cs.punk Posted July 25, 2010 Share Posted July 25, 2010 Why do the two divs collide into each other? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS</title> </head> <body> <div style="width: 100px; border: solid 3px #CCCCCC; float: left;"> <p>test</p> </div> <div style="width: 100px;border: solid 5px #FF0000;"> <p>test2</p> </div> </body> </html> [attachment deleted by admin] Link to comment https://forums.phpfreaks.com/topic/208840-a-simple-css-question/ Share on other sites More sharing options...
wildteen88 Posted July 25, 2010 Share Posted July 25, 2010 It is because of floats. The red box will wrap around the grey box. It'll be come a lot more clear if you add some dummy text to the red box. <div style="width: 300px;border: solid 5px #FF0000;"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer placerat pulvinar faucibus. Nam ac elit enim, non blandit mauris. Aenean volutpat nulla a justo molestie ac lobortis elit iaculis. In tellus purus, mattis in sollicitudin eu, convallis vel nibh. Aenean a nisl in velit tristique euismod. <p> <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin volutpat aliquam ligula, non auctor nunc elementum id. Quisque aliquam vestibulum purus, eget eleifend mi adipiscing ac. Aenean hendrerit tincidunt ipsum, quis pretium lectus porta in. In elementum purus non eros interdum consequat. Pellentesque volutpat consequat dictum.</p> </div> You'll now notice the text is being wrapped around the grey box If you don't want the two boxes wrapping around each other, add overflow: hidden to your second div. Now the two boxes will sit next to each other. Link to comment https://forums.phpfreaks.com/topic/208840-a-simple-css-question/#findComment-1090919 Share on other sites More sharing options...
cs.punk Posted August 3, 2010 Author Share Posted August 3, 2010 Ahaaa! But shouldn't the second div float 'around' the first? Shouldn't that be normal behavior rather that letting the second div float 'within' the first div? Link to comment https://forums.phpfreaks.com/topic/208840-a-simple-css-question/#findComment-1094561 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.