CODEWITHSUNDEEP
htmlcss
JUST16
JUST16

Reputation: 397

Why "Inline-block" doesn't work properly in this CSS?

Please check the CSS below.

 /*rex is the container of ex,ex2,ex3*/
div.rex{
height:200px;
border:0px;
margin:60px auto;
padding: 0;
vertical-align:top;
}

div.ex{
width:34%;
height:200px;
background-color:#4f443a;
display:inline-block;
margin: 0;
padding: 0;
vertical-align:top;
}

div.ex2{
width:0.5%;
height:200px;
display:inline-block;
margin: 0;
padding: 0;
vertical-align:top;
}


div.ex3{
width:65.5%;
height:200px;
background-color:#7e8547;
display:inline-block;
margin: 0;
padding: 0;
vertical-align:top;
}

The result in browser: enter image description here

What I need:

enter image description here

Upvotes: 27

Views: 117435

Answers (5)

Bartek Qoster
Bartek Qoster

Reputation: 27

You can sue comments like that (this looks little better in code):

<div class="rex">
    <div class="ex"><!--
 --></div><div class="ex2"></div><!--
 --><div class="ex3"></div>
</div>

Upvotes: 1

Squivo
Squivo

Reputation: 927

My trick is to set font-size:0; in the parent element, because it's the font-size that is causing the math to not add up perfectly ( about a 4px overlap per div, depending on screen size ) and causes one div to appear under the other. 

.rex{
display:block;
font-size:0;
}

.ex{
width:34%;
height:200px;
background-color:#4f443a;
display:inline-block;
vertical-align:top;
margin: 0 .5% 0 0; /*small space between divs*/
padding: 0;
font-size:16px; /*restore font size*/
}

.ex2{
width:65.5%;
height:200px;
background-color:#7e8547;
display:inline-block;
vertical-align:top;
margin: 0;
padding: 0;
font-size:16px;
}

Upvotes: 0

Fr0zenFyr
Fr0zenFyr

Reputation: 1939

Add float:left; to your div.ex, div.ex2 and div.ex3 instead.

JSFIDDLE

UPDATE: Add position:absolute to second and third div if float is not a choice.

FIDDLE

UPDATE 2: Add this to only 3rd div if you need that space in between.

FIDDLE

Upvotes: 1

Mr_Green
Mr_Green

Reputation: 41842

Just extending answer giving by @Tristan here.

You have repeated the css code unnecessarily. You can minify it by using multiple css like :

.ex, .ex2, .ex3 {
    display: inline-block;
    vertical-align: top;
    margin: 0;
    padding: 0;
    height: 100%;  /* no need of height: 200px; here */
}                  /* if you need to extend it to parent height */
                   /* then use height: 100% */

OR

div.rex > div { /* code here */ }

You can keep elements side by side by using any of the below approaches:

Upvotes: 4

Tristan
Tristan

Reputation: 2399

This is actually expected behavior in HTML. Because you are using inline-block, any newline character or whitespace you have after the element and before another inline element, will be counted as a space. If you want the blocks to stack side by side like in your picture, your HTML would need to be like this.

<div class="rex">
    <div class="ex"></div><div class="ex2"></div><div class="ex3"></div>
</div>

working demo

It's not very pretty, but then again, I would recommend using another approach, possibly floating the elements instead.

Refer to here for a more in depth explanation of why this occurs.

How to remove the space between inline-block elements?

Upvotes: 40

Related Questions