| SitePoint Sponsor |
Hi,
I have 2 DIVs both 40% wide that sit under one another. I want to sit them next to one another but I cant use Float-Left; which I normally use as this messes up the rest of the layout.
Can anyone advise other methods I can use to sit the two DIV next to one another?
You should be able to use floats without it messing up the layout, you just need to clear the floats properly.
display: table also works now and has good browser support.HTML Code:<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>untitled</title> <style type="text/css" media="screen"> .container { width: 100%; overflow: hidden; background: red; } .left, .right { float: left; width: 40%; margin: 0 5%; background: blue; } </style> </head> <body> <div class="container"> <div class="left">yep</div> <div class="right">yep</div> </div> </body> </html>
But I always go for floats unless there's a reason to use tables for other reasons (equal height columns for example)HTML Code:<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>untitled</title> <style type="text/css" media="screen"> .container { width: 100%; display: table; background: red; border-spacing: 10px; } .left, .right { display: table-cell; width: 50%; background: blue; } </style> </head> <body> <div class="container"> <div class="left">yep</div> <div class="right">yep</div> </div> </body> </html>
Thanks,
So its the overflow: hidden; on the parent div that would make two divs inside sit next to one another?
no, it's float that does that.
overflow: hidden makes the parent wrap around and contain the floats so it doesn't collapse.
Another option for sitting elements side by side is display: inline-block, which is handy in some situations.
Posting Permissions
Reply With Quote
Bookmarks