Sitting Two Divs Side By Side Without Using Float-Left

Get Started
1

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?

2

You should be able to use floats without it messing up the layout, you just need to clear the floats properly.


<!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>

display: table also works now and has good browser support.


<!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>

But I always go for floats unless there’s a reason to use tables for other reasons (equal height columns for example)

3

Thanks,

So its the overflow: hidden; on the parent div that would make two divs inside sit next to one another?

4

no, it’s float that does that.
overflow: hidden makes the parent wrap around and contain the floats so it doesn’t collapse.

5

Another option for sitting elements side by side is display: inline-block, which is handy in some situations.