CODEWITHSUNDEEP
htmlcss
Daniel
Daniel

Reputation: 441

div vertical align to bottom

I have a little issue, the jsfiddle: http://jsfiddle.net/s38Ar/

HTML:

    <body>
    <div id="header"></div>
    <div id="galeria">
        <div id="gutter"></div>
        <div class="column2" id="m_col">
            <div class="column" id="col1"><div class="work" id="work1">
                <h1 class="komorka"> theme1 more more more more more more more more more more more theme</h1><img id="paint" class="komorka" src="projekty/asd.png"></img><p class="komorka">1But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.</p>
            </div></div>
            <div class="column" id="col2"><div class="work" id="work2">
                <h1 class="komorka">theme 2</h1><img class="komorka" id="paint" src="projekty/asd.png"></img><p class="komorka">1But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.</p>
            </div></div>
            <div class="column cl2" id="col3"><div class="work" id="work3">
                <h1 class="komorka">theme 3</h1><img class="komorka" id="paint" src="projekty/asd.png"></img><p class="komorka">1But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.</p>
            </div></div>
            <div class="column" id="col4"><div class="work" id="work4">
                <h1 class="komorka">theme 4</h1><img class="komorka" id="paint" src="projekty/asd.png"></img><p class="komorka">1But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.</p>
            </div></div>
            <div class="column" id="col5"><div class="work" id="work5">
                <h1 class="komorka">theme 5</h1><img class="komorka" id="paint" src="projekty/asd.png"></img><p class="komorka">1But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.</p>
            </div></div>
        </div>
    </div>
    <div id="footer"></div>
</body>

CSS:

    body{background-color:#0d5697;}
.selborder{border:#d7e51c;}
p{font-size:1em;color:white;}
#header{height: 50px;background-color: #666;margin-bottom: 10px;}

h1{font-size:1.5em;color:#dae645;}


@media screen and (max-width: 800px) and (min-width: 448px) {
    #galeria{width:100%;display: table;height: 100%;margin:0 auto;}
    #gutter{background-color:white;display:inline-block;width:3%;height:100%;margin-bottom:10px;float:left;display: inline-block;}
    .column2{height:100%;width:94%;float:left;}
    .column{width:47%;position:relative;vertical-align:bottom;display:table-cell;float:left;}
    .work{vertical-align:bottom;}
    .komorka{width:90%;height:90%;}
    .cl2{clear:both;}
}

I want to theme2 box to be verticaly aligned bottom (to theme4). Here I found a similar problem CSS Vertical Alignment of Div but I want it to use without px precise, because it is going to be responsive (with media queries) and also without JavaScript.

Upvotes: 2

Views: 5363

Answers (2)

Charles Chu
Charles Chu

Reputation: 1

Add "align-items-end" to row div.

Upvotes: 0

matewka
matewka

Reputation: 10148

Here's your fiddle updated

All you have to do is change .column style inside media query to this:

.column {
    width:47%;
    position:relative;
    vertical-align:bottom;
    display:inline-block;
}

Your approach was almost perfect ;) All you had to do is replace display: table-cell with display: inline-block and remove float: left.

You might also want to rewrite much of your CSS since you don't need things like display: table in #galeria container anymore.

As a loose addition, you don't need

position: relative;

unless it serves you for some other purpose.

Upvotes: 2

Related Questions