making two divs line up side by side without gap

Question

I have seen people ask questions about how to get two divs to line up side by side. I can get mine to do that just fine.

My problem is that they will not smash up against each other. There always seems to be a gap.

For example, I have a wrapper div with a width of 500px. Inside that div I have two other divs with widths of 250px. They will not line up next to each other because there is not enough space for each other.

When I set the width to 248px they do line up but with a 4px gap between each other. I have an example of this code located here:

https://c9.io/riotgear66/day1/workspace/sams/html/index.html

Please feel free to take a look at it and try adjusting it with your browser's element inspector.

Answer 1

The layout problem is the result of applying display: inline-block to the div elements.

Any white space between those div elements are taken into account when laying out the content. You could remove the white space (linefeed or carriage return) between the div's if you don't mind how your source code looks.

Since your parent container has specific dimensions (500px x 300px), I would use absolute positioning to place the child elements. This would make it easier to position your logo motif over the other images.

You could also use floats as stated in other responses, not any easier or harder.

In this application, the layout is fixed so there are no design considerations for a responsive or flexible design, so either approach is valid.

Demo

You can see how this might work in the following demo: http://jsfiddle.net/audetwebdesign/hZ5dB/

The HTML:

<div class="container">
    <div class="panel ul"></div>
    <div class="panel ur"></div>
    <div class="panel ll"></div>
    <div class="panel lr"></div>
    <div class="overlay"><span>Cats</span></div>
</div>

and the CSS:

.container {
    border: 1px dotted blue;
    width: 500px;
    height: 300px;
    position: relative;
    margin: 0 auto;
}
.panel {
    width: 250px;
    height: 150px;
    position: absolute;
}
.ul {
   background: red url("http://placekitten.com/400/400") -50px -20px no-repeat;
   top: 0; left: 0;
}
.ur {
   background: red url("http://placekitten.com/300/300") 0px -30px no-repeat;
   top: 0; right: 0;
}
.ll {
   background: red url("http://placekitten.com/350/250") -20px -20px no-repeat;
   bottom: 0; left: 0;
}
.lr {
   background: red url("http://placekitten.com/300/200") 0px -30px no-repeat;
   bottom: 0; right: 0;
}
.overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -50px 0 0 -50px;
    width: 100px;
    height: 100px;
    background-color: red;
    border-radius: 50%;
}
.overlay span {
    display: block;
    background-color: gray;
    border-radius: 50%;
    text-align: center;
    vertical-align: middle;
    width: 80%;
    height: 80%;
    margin: 10%;
    line-height: 80px;
}

I also show how you can create the circular motif without having to modify the original background images, saves a bit of work with PhotoShop or similar.

Answer 2

The problem lies in the white space in your HTML. When using display: inline-block, white space after elements is taken into account like Marc Audet said.

To fix it without changing your current method, you must remove that white space. The easiest way I've found to do so while still maintaining readability of the HTML is by commenting it out, or using <!-- after each element and --> before the next element. This prevents having to change the whole structure and you can make each one 250px again as well

You could also move the closing > to the next line, move everything after the opening <div> to the next line, or use margin-left:-4px; for each element after the first. Or use a method described by others here, floating it or using FlexBox

Here is the CSS Tricks page that references this situation and provides more detail

Answer 3

You shouldn't be using

display: inline-block;

Make them:

float: left;

Here is a jsfiddle sample of how it should be.

http://jsfiddle.net/Tqdqa/