CODEWITHSUNDEEP
htmlcss
feder
feder

Reputation: 1795

How to get rid of the space in between two divs?

I have to divs layouted as display: inline-block. Intentionally, I want these two divs (tileImage, title) to share the 300px width of the parent div (preview). Thus, I have set their width to 50%. For some reason the second div is moved to the next line.

Changing the width of div "title" to 48% will move the div next to the div "titleImage". There you notice the space in between. Where does this space come from? How do I get rid of it?

Here is the JFiddle: http://jsfiddle.net/SFDPe/2/

Thanks!

Upvotes: 2

Views: 114

Answers (3)

Mike
Mike

Reputation: 1999

Take a look onto this article:

Fighting the Space Between Inline Block Elements

Maybe you can use float: left; instead? Like this:

.preview, .preview div {
    float: left;
}

Upvotes: 0

Amelia
Amelia

Reputation: 2970

You should float your elements to the left and right, instead. Then, make sure you set height: auto; and overflow: auto; to the parent container. This ensures that the .parent container actually overflows and grows automatically when elements are floated inside of it.

JSfiddle here.

.preview {
    width: 300px;
    border: 1px solid red;
    vertical-align: top;
    height: auto;
    overflow: auto;
}

.title {
    width: 50%;
    background-color: olive;
    float: right;
}

.tileImage {
    width: 50%;
    background-color: orange;
    float: left;
}

Upvotes: 1

Khaled
Khaled

Reputation: 8573

Instead of using display:inline-block use, float:left for both divs. http://jsfiddle.net/SFDPe/3/

Upvotes: 0

Related Questions