Why does the text on this third column is pushed down?

Question

Well, I coded this page, but I got stuck at why does the third column is pushing down my text (or other elements). It uses the same style from the first box, but while the first box is ok, the third one is pushing the elements down by some pixels.

Like this:

this gap it's freaking me out

HTML

<div id="contentWrapper">
    <div id="sideBar">
        <div class="sidebarBox"></div>
        <div class="sidebarContent">
            <h4>
                Índice
            </h4>
            <ul class="tree">
                <li>
                    <a href="#sinopse">Sinopse</a>
                </li>
                <li>
                    <a href="#tropas">Tropas</a>
                </li>
                <li>
                    <a href="#">Geladeira</a>
                    <ul>
                        <li>
                            <a href="#logica">Lógica</a>
                        </li>
                        <li>
                            <a href="#genio">Gênio</a>
                        </li>
                        <li class="last">
                            <a href="#horror">Horror</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#notas">Notas</a>
                </li>
                <li>
                    <a href="#midia">Mídia</a>
                </li>
                <li class="last">
                    <a href="#referencias">Referências</a>
                </li>
            </ul>
        </div>
    </div>
    <div id="mainBody"></div>
    <div id="infoBar">
        <div class="sidebarBox"></div>3º Column
    </div>
</div>

CSS

* {
    margin:0;
    padding:0;
    font:normal normal 14px/20px Helvetica,Arial,sans-serif
}

h4 {
    font-size:14px;
    font-weight:700;
    text-transform:uppercase;
    padding-top:10px;
    border-bottom:2px solid #2a558c;
    margin-bottom:10px
}

#contentWrapper {
    display:table;
    border-spacing:0;
    width:100%;
    height:500px
}

#contentWrapper > div {
    display:table-cell
}

#sideBar {
    background-color:#E4E5DD;
    width:200px
}

#mainBody {
    background-color:#EEEEE6
}

#infoBar {
    background-color:#e4e5dd;
    width:200px
}

#footer {
    background-color:#323540;
    height:50px
}

.sidebarBox {
    background-color:#323540;
    height:30px;
    width:100%
}

.sidebarContent {
    padding:15px
}

I messed a lot with the Firebug and even tried to open it in IE and Chrome, with same results. Both columns use the same CSS, and this difference is freaking me out. I thought about "fixing" it with some negative margins, but I want to understand the problem first, insted of "workahacking" away.

Thanks a lot in advance!

Please create jfiddle http://jsfiddle.net/ so your code can be accessed and modified right online; — d.sergeiev, Jul 29 '14 at 14:51
@d.sergeiev I agree. But here it is. http://jsfiddle.net/nbbVg/ — Spencer May, Jul 29 '14 at 14:52
Table layout is bad in many ways, it hits the fan here http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html and in many other places. — d.sergeiev, Jul 29 '14 at 15:02

misterManSam · Accepted Answer · 2014-07-29T15:18:25.330

4

Add vertical-align: top to #contentWrapper > div. Currently it is baseline.

Have a fiddle!

CSS

#contentWrapper > div {
    display: table-cell;
    vertical-align: top;
}

Without vertical-align: top, the div is basing its vertical alignment on .sidebarContent which has 15px of padding. This is resulting in the 15px gap.

edited Jul 29 '14 at 15:18

answered Jul 29 '14 at 14:58

misterManSam

24,303
11
69
89

score 3 · Answer 2 · answered Jul 29 '14 at 14:57

Change the following and it should fix your problem. I've found that when using display:table-cell it always mis-aligns the last cell unless I specifically give it a vertical alignment

#contentWrapper > div {
    display: table-cell;
    vertical-align:top;
}

Example

score 0 · Answer 3 · answered Jul 29 '14 at 14:57

0

Add display:inline-block to this class:

.sidebarBox {
    background-color: #323540;
    height: 30px;
    width: 100%;
    display: inline-block;/*Add this*/
}

fiddle

answered Jul 29 '14 at 14:57

Alex Char

32,879
9
49
70

Explain the downvote. Tested in all browsers and works. – Alex Char Jul 29 '14 at 15:04
inline-block to display divs next to eah other gives some extra troubles in a lot of browsers because of the whitespace: http://davidwalsh.name/remove-whitespace-inline-block – Pinoniq Jul 30 '14 at 06:58
Did you test it on others browsers? – Alex Char Jul 30 '14 at 06:59
did you read the link? inline-block for positioning of block elements is a neat trick, but should be avoided. Better would be to use float with clear-floats on the parent:after pseudo element – Pinoniq Jul 30 '14 at 07:01
This method relies on there being a `
`. If `.sidebarBox` is removed (which it should be, it should be a border, not a `div`) then there is still a padding problem. This method is just covering up the problem.
– misterManSam Jul 30 '14 at 07:02
This method works fine for this example. Thx for feedback anyway guys :) – Alex Char Jul 30 '14 at 07:09
1

misterManSam, sidebarBox is a div 'coz later I will add content to it. It's not there just for showing... – user3430483 Jul 30 '14 at 13:58

score -1 · Answer 4 · answered Jul 29 '14 at 15:04

-1

.sidebarBox {
    float:right;
}

will work.

answered Jul 29 '14 at 15:04

Bineesh

326
4
9

This method relies on there being a `
`. If `.sidebarBox` is removed (which it should be, it should be a border, not a `div`) then there is still a padding problem. This method is just covering up the problem.
– misterManSam Jul 30 '14 at 07:03

Why does the text on this third column is pushed down?

4 Answers4