Can't stack multiple divs horizontally together without float?

Question

I recently realized that we can't align multiple divs inside container horizontally - without a space between them and without using float.

I applied inline-block to the divs inside the container element and gave them width in %. but there appears to be some extra space. I know it's because of the hidden characters. Refer below image - Red line is container's

I want to make it like the below image using inline-block and take up the entire width of the container. I can't use flexbox to parent since I want to make it responsive and hide/reposition some elements after breakpoints. I also don't want to use floats since it pulls out the divs outside and make the container element useless. Also, it is meaningless to remove the spaces and tabs to make it work... it would be a mess to type the code in there.

Now come on CSS, there has to be something. It shouldn't be this frustrating and CSS shouldn't be this dumb.

Here's my code,

.container{
 width: 100%;
 height: auto;
}

.section{
 display: inline-block;
}

.homebar{
 width: 24%;
 height: 600px;
 background-color: #222;
}
.content{
 width: 50%;
 min-width: 500px;
 height: 600px;
 background-color: #fbfbfb;
}
.sidebar{
 width: 24%;
 height: 600px;
 background-color: #158;
}

<div class="container">

<!-- Home/Menu Bar-->
<div class="section homebar">

</div>

<!-- Content Area -->
<div class="section content">

</div>

<!-- Sidebar Area -->
<div class="section sidebar">

</div>

</div>

@PraveenKumar That is what I don't want to do... I have seen those answers. It would be very difficult to arrange code. I can't code in clumsy formatting — suprxd, Nov 30 '16 at 14:11
@AbhishekPathak You have only two options before. Either remove the space between the div, or use float. Now you can also use flex-box. — Praveen Kumar Purushothaman, Nov 30 '16 at 14:12
You can definitley use floats with a container wrapped around them. If that container has visual styling like a border or background, then you use what is known as a _"clearfix"_. The clearfix will allow the parent element wrap the child elements as if they were not floated. Simplest clearfix is `overflow:hidden;` on the parent element, other wise I recomend the [micro clearfix](http://nicolasgallagher.com/micro-clearfix-hack/). Versions of the micro clearfix are used **all the time**. — hungerstar, Nov 30 '16 at 14:14
"*Also, it is meaningless to remove the spaces and tabs to make it work...*" - no it isn't, that's how HTML behaves (by design) whether you like it or not "*it would be a mess to type the code in there.*" - being a mess doesn't make the answer less applicable. — David Thomas, Nov 30 '16 at 14:18
I was really surprised because I am doing CSS for more than 2 years and many times used the `inline-block` property, but never noticed this strange behavior of CSS. — suprxd, Nov 30 '16 at 14:24
@AbhishekPathak, but this is a very old known issue, in SO there are a lot of questions about this — , Nov 30 '16 at 14:27

score 1 · Answer 1 · answered Nov 30 '16 at 14:26

To remove space between element which are placed as inline-block, set font-size:0px in parent div or second option is marking use of negative margin as below,

#container{
  width:100%;
  height:auto;
  overflow:hidden;
  border:2px solid red;
  font-size:0px;
}
#container > .homebar{
width:33.2%;
height:200px;
display:inline-block;
background:yellow;
}
#container > .content{
width:33.3%;
height:200px;
display:inline-block;
background:green;
}
#container > .sidebar{
width:33.3%;
height:200px;
display:inline-block;
background:blue;
}

<div id="container">
<!-- Home/Menu Bar-->
<div class="section homebar">
</div>
<!-- Content Area -->
<div class="section content">
</div>
<!-- Sidebar Area -->
<div class="section sidebar">
</div>
</div>

score 0 · Answer 2 · answered Nov 30 '16 at 14:25

I came across this issue recently and what i found out is that when using inline-block to align divs. Browser HTML automatically adds in default margin to the right of each div block due to font-size. The only solution i found good in my scenario was to join the divs by adding a right margin fix of -4px (default space used by browser due to default font-size) on the divs we have style display:inline-block;.

So just add margin-right:-4px; to your .section class that you will be good to go.

You can also use font-size:0px; on the .container class to achieve this as well but that will force you to reset font-sizes for each element within the container so that is why i went with the margin adjustment solution.

Hope this helps.

score 0 · Answer 3 · answered Nov 30 '16 at 14:27

The reason why you get these gaps are because of the font-size of the divs. Please note the solution:

div {
  border: 1px solid black;
  font-size: 0;
}

.container{
 width: 100%;
 height: auto;
}

.section{
 display: inline-block;
}

.homebar{
 width: 24%;
 height: 600px;
 background-color: #222;
}
.content{
 width: 50%;
 min-width: 500px;
 height: 600px;
 background-color: #fbfbfb;
}
.sidebar{
 width: 24%;
 height: 600px;
 background-color: #158;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="container">

<!-- Home/Menu Bar-->
<div class="section homebar">

</div>

<!-- Content Area -->
<div class="section content">

</div>

<!-- Sidebar Area -->
<div class="section sidebar">

</div>

</div
</body>
</html>

Basically, I Always use normalize in my pages to solve the issues from the start.

Can't stack multiple divs horizontally together without float?

3 Answers3