CODEWITHSUNDEEP
htmlalignmentcss
SaturnsEye
SaturnsEye

Reputation: 6499

Side by side divs with no gap?

I am referring to this Fiddle I found on SO that uses display: inline-block; and I have applied it to my own work but I can't figure out how to get the two divs to sit flush side by side, not with the 3-4px gap?

http://jsfiddle.net/zygnz/1/

I've tried:

html

<div class="container">
        <div class="left">
            LEFT
        </div>
        <div class="right">
            RIGHT
        </div>
</div>

css

div.left {
    background:blue;
    height:200px;
    width:300px;
}

div.right{
    background:green;
    height:300px;
    width:100px;
}

.container{
    background:black;
    height:400px;
    width:450px;
}

.container div {
    display: inline-block;
}

But got nothing.

Upvotes: 1

Views: 5252

Answers (5)

Sobin Augustine
Sobin Augustine

Reputation: 3765

Actually you dont have to change anything in css to avoid the gap,

this is a whitespace problem in HTML,

change the html to this

<div class="container">
        <div class="left">LEFT
        </div><div class="right">RIGHT
        </div>
</div>

jsFiddle here

OR

you can edit your css

You can use float:left; instead of display:inline-block; to nullify the whitespace problem.

Upvotes: 2

Pbk1303
Pbk1303

Reputation: 3802

Rather using display:inline-block you can float the div's ,just change the css to 

.container div {
float:left;
}

The above code should get the required result.It will align the div right next to each other without any space.

Refer the links below to see what caused the white space or about float and display:inline block

Reference 1

Reference 2

Upvotes: 0

Aleksandrenko
Aleksandrenko

Reputation: 3065

Use 2 span's (now divs), make the inline-block and don't leave any spaces or new lines between them. Use spans not divs because some old ies can't make inline-block elements from default block elements like divs.

Like this:

<span style="display: inline-block">one</span><span style="display: inline-block">two</span>

Not like this:

<span style="display: inline-block">one</span> <span style="display: inline-block">two</span>

Upvotes: 1

Tim Hallman
Tim Hallman

Reputation: 894

I would use float:left but also try setting margins on div.left and div.right to 0 like:

margin:0 auto;

So, with your fiddle:

div.left {
    background:blue;
    height:200px;
    width:300px;
    margin:0 auto;
    float:left;
}

Upvotes: 2

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

If you set display: inline-block; then add margin-right: -4px; to remove the gap.

see this demo

Upvotes: 1

Related Questions