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?
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.
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.
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.
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.
Such results can be achieve using flex properties
. No matter how high the height of the container
, the two div
s 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;
}
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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With