Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

align two divs, one at top one at bottom of a third div

Tags:

html

css

I have this code:

<div id="container">
    <div id="1"> div 1</div>
    <div id="2"> div 2</div>
</div>

I want to put div 1 at the top, and div 2 at the bottom of container, no matter how much the height of container is . How can I do so?

like image 644
zahi daoui Avatar asked Apr 14 '14 13:04

zahi daoui


People also ask

How do I align two divs on the same line?

The most common way to place two divs side by side is by using inline-block css property. The inline-block property on the parent placed the two divs side by side and as this is inline-block the text-align feature worked here just like an inline element does.

How do I show two divs up and down?

With CSS properties, you can easily put two <div> next to each other in HTML. Use the CSS property float to achieve this. With that, add height:100px and set margin.

How do I align one div under another?

Still you can do this by using the css property that is display:block; or assign width:100%; add this to the div which you want under another div.

How do I put one line in a 3 div?

Three or more different div can be put side-by-side using CSS. Use CSS property to set the height and width of div and use display property to place div in side-by-side format. float:left; This property is used for those elements(div) that will float on left side.


2 Answers

Such results can be achieve using flex properties. No matter how high the height of the container, the two divs will always be one at top & another at bottom.

#container {
    display: flex;
    justify-content:space-between;
    flex-direction:column;
    background-color: lightgrey;
}

#id{
    background-color: cornflowerblue;
    width: 100px;
    margin: 10px;
}
like image 113
007mrviper Avatar answered Nov 15 '22 18:11

007mrviper


Set container's position to relative, and the position of div's 1 and 2 to absolute. Then set div 1 to top:0 and div 2 to bottom 0 (also avoid using number only ID's for CSS compatibility):

jsFiddle example

#container {
    position:relative;
    height:100px;
    width:100px;
    border:1px solid #999;
}
#div1, #div2 {
    position:absolute;
}
#div1 {
    top:0
}
#div2 {
    bottom:0;
}
like image 37
j08691 Avatar answered Nov 15 '22 18:11

j08691