CODEWITHSUNDEEP
csshtmlalignment
qadenza
qadenza

Reputation: 9293

How to place two divs aligned

<div id="divT">divT</div>
<div id="divL">
<br><br>
<div id="person">Person</div>
<div id="father">Father</div>
</div>
<div id="divR">divR</div>

css 

*{
    margin:0;
    padding:0;
}
html{
    height:100%;
}
body{
    margin:0 auto;
    height:100%;
}
#divT{
    width:100%;
    background:blue;
}
#divL{
    display:inline-block;
    width:14%;
    height:100%;
    background:#008080;
}
#divR{
    display:inline-block;
    width:79%;
    background:#e1e1e1;
}

Why divR has top and left margins ? I don't want them.

fiddle is here

Upvotes: 1

Views: 61

Answers (5)

j08691
j08691

Reputation: 207901

You need to add vertical-align:top to your rules for #divR.

#divR {
    display:inline-block;
    width:79%;
    background:#e1e1e1;
    vertical-align:top;
}

jsFiddle example

The default value for vartical-align is baseline and you needed top instead.

Upvotes: 2

Leniel Maccaferri
Leniel Maccaferri

Reputation: 102408

Add float:right and set the width to 86% in #divR

#divR
{
    width:86%;
    background:#e1e1e1;
    float:right;
}

Here's the jsFiddle demo: http://jsfiddle.net/leniel/FcDsk/1/embedded/result/

Upvotes: 2

Chad
Chad

Reputation: 5418

As others have said, adding vertical-align: top; to #divR will fix the top issue. My personal favorite fix for white space is to set the parent's font-size to 0 and restore it in the element that has the fonts itself.

In the case of the fiddle: 

body {
    font-size: 0;
}
#divT{
    font-size: 14px;
}
#divL{
    font-size: 14px;
}
#divR{
    font-size: 14px;
    vertical-align: top;
}

http://jsfiddle.net/GzRp9/7/

Upvotes: 2

RyanS
RyanS

Reputation: 4194

Adding vertical-align: top will remove the top space, which is not a margin but a gap.

And removing the space between the div and the previous one will remove the left space. This is because inline-block elements will render the spaces left in the code

Upvotes: 2

musicnothing
musicnothing

Reputation: 3985

FIDDLE

It doesn't have margins. Since it is a display:inline-block element, the top spacing comes from it needing to be vertically aligned to the top, and the left spacing comes from the literal space between it and the <div> element before it.

Add this:

#divR
{
    /* ... */
    vertical-align:top;
}

And remove the space between #divL and #divR.

Upvotes: 2

Related Questions