Inline block alignment on the second line after full-width of the page

Question

Recently i was playing with display:inline-block element and after sometime i've encountered a problem. I was trying to fit different size colored blocks into the full-width page and everything went great, but the moment I ended first line of full-witdh blocks, the second line wasn't aligned the way I wanted to. So the example now I have this:

and the only problem here is that the black block should be right below the dark-red(brown) block, without any whitespace. Green block is in it's position, red and yellow are also.

My html:

 <div id="container">
        <div class="cyanBlock"></div><!--
        --><div class="brownBlock"></div><!--
        --><div class="orangeBlock"></div><!--
        --><div class="blueBlock"></div><!--
        --><div class="whiteBlock"></div><!--
        --><div class="blackBlock"></div><!--
        --><div class="greenBlock"></div><!--
        --><div class="redBlock"></div><!--
        --><div class="yellowBlock"></div>
    </div>

My CSS:

body {
    margin: 0px;    
}

#container {
    width:100%;
    position: relative;
}

.cyanBlock {
    width:100%;
    height:10%;
    background-color:cyan;
    display: inline-block;
}

.brownBlock {
    width:35%;
    height:20%;
    background-color:brown;
    vertical-align: top;
    display:inline-block;
}

.orangeBlock {
    vertical-align: top;
    width:25%;
    height:35%;
    background-color:orange;
    display: inline-block;

}

.blueBlock {
    vertical-align: top;
    display: inline-block;
    width:20%;
    height:35%;
    background-color:blue;
}

.whiteBlock {
    vertical-align: top;
    width:20%;
    height:90%;
    background-color:white;
    position: absolute;
    display: inline-block;
}

.blackBlock {
    vertical-align: top;
    width:35%;
    height:25%;
    background-color:black;
    display: inline-block;

}

.greenBlock {
    vertical-align: top;
    width:45%;
    height:10%;
    background-color:green;
    display: inline-block;
}

.redBlock {
    vertical-align: top;
    width:50%;
    height:45%;
    background-color:red;
    display: inline-block;
}

.yellowBlock {
    vertical-align: top;
    width:30%;
    height:45%;
    background-color:yellow;
    display: inline-block;
}

score 0 · Answer 1 · answered Oct 22 '16 at 14:25

0

That's because you have a white block in the middle of the black and the brown, so what you have to do is delete this white block. The html code would be like this:

<div id="container">
    <div class="cyanBlock"></div><!--
    --><div class="brownBlock"></div><!--
    --><div class="orangeBlock"></div><!--
    --><div class="blueBlock"></div><!--
    --><!-- The white block has to disappear (and remove the white block's CSS class
    --><div class="blackBlock"></div><!--
    --><div class="greenBlock"></div><!--
    --><div class="redBlock"></div><!--
    --><div class="yellowBlock"></div>
</div>

answered Oct 22 '16 at 14:25

gerardet46

76
1
9

No. The white block is on the right. The white block between brown and black is just a white-space. – Oct 22 '16 at 14:35
Ahh, I didn't see the full image. You can use a margin-top: - px; in the black block the put it whithout the whitespace – gerardet46 Oct 22 '16 at 15:28
tried that too, didnt help. – Oct 22 '16 at 15:50
That's because the first line height is the biggest block's height. Another thing you can try is flexbox – gerardet46 Oct 22 '16 at 15:58

Inline block alignment on the second line after full-width of the page

1 Answers1