CODEWITHSUNDEEP
htmlcss
Muhyee
Muhyee

Reputation: 197

Vertical align multiple elements inside parent

I've been search for more than a day a way to vertical align my fluid designed header so without knowing font-size nor spesific pixels my 3 divs will be the same height and the content inside them in the same line.

Here is an fiddle example of what I have now so you might understand what i need better.

And this is the code:

HTML:

<div id="container">
<div id="header">
    <div id="menu">     
        <a href="#">
            <img src='http://s16.postimg.org/uwgkp15r5/icon.png' border='0' alt="icon" />
        </a>
    </div>
    <div id="title">
        My site title
    </div>
    <div id="my_button">
        <button id="button">My button</button>
    </div>
    <div style="clear: both;"></div>
</div>
<div id="content"></div>
</div>

CSS:

html,body {
height: 100%;
font-size: 2vmin;
}

#container {
height: 100%;
min-height: 100%;
}

#header {
height: 20%;
padding: 2vmin 0 2vmin 0;
box-sizing: border-box;
background: #000000;
width: 100%;
}

#menu{
background: #5f5f5f;
float: left;
width: 20%;
text-align: center;
}

#title {
background: #aaaaaa;
height: 100%;
float: left;
font-size: 3vmin;
width: 60%;
text-align: center;
}

div#my_button {
background: #cccccc;
float: right;
width: 20%;
}
button#button {
color: #aaaaaa;
border: none;
}

#content {
height: 70%;
width: 100%;
background: #eeeeee;
}

Upvotes: 1

Views: 231

Answers (4)

Alexandru Diacov
Alexandru Diacov

Reputation: 1191

You can use :after pseudo element for solving your problem.

add this after #header styles in your CSS

#header:after{
height: 100%;
width: 1px;
font-size: 0px;
display: inline-block;
}

Then remove floats from #menu, #title and #my_buttun div's and apply 

display: inline-block; 
vertical-align: middle;

The inline-block will create small gaps between these div, but if you're not apply background colors to them , then it is ok.

Last: make #my_button width: 19%;

Look here: http://jsfiddle.net/D22Ln/5/

Upvotes: 1

Unknown User
Unknown User

Reputation: 3668

This FIDDLE might help you. I've used bootstrap framework. Re-size the RESULT grid.

Upvotes: 0

Marius Djerv
Marius Djerv

Reputation: 265

If I have understood you correctly this is maybe what you are looking for, I just copied that I have done earlier. But test it out: http://jsfiddle.net/6aE72/1/

By using wrapper and a helper you will have the left and right div same size as middle and helper helps with vertical alignment

#wrapper { display: table; width: 100%; table-layout: fixed; position: absolute; top: 0;}
.content { display: table-cell; }

Upvotes: 0

Shomz
Shomz

Reputation: 37701

If you mean the three horizontal divs, setting height: 100%; for all of them will do the trick. From there you just modify the size of their parent element (currently at 20%) and they will adapt automatically.

http://jsfiddle.net/D22Ln/2/

Upvotes: 0

Related Questions