Pavel Zaitsev Pavel Zaitsev - 5 months ago 8
CSS Question

How do I remove extra margin space generated by inline blocks?

I am using this css to format two columns but I am still getting margin space between two. I can eliminate it with use of

margin-left: -4px;
or some such. Is there a more elegant way to do this or is there something wrong with the CSS code?

div.col1{
display: inline-block;
min-height: 900px;
height: 100%;
width 300px;
margin: 0px;
background-color: #272727;
overflow: hidden;
border: 1px dotted red;
}

div.col2{
display: inline-block;
min-height: 900px;
height: 100%;

width: 620px;
margin: 0px;

vertical-align: top;
border: 1px dotted red;
overflow: hidden;
}

Answer

Perhaps you have:

<div class="col1">
    Stuff 1
</div>
<div class="col2">
    Stuff 2
</div>

? If so then this is probably a whitespace problem (it turns out whitespace does matter in html). This should fix it:

<div class="col1">
    Stuff 1
</div><div class="col2">
    Stuff 2
</div>