align divs with the top inline

Question

i've got a div containing two other divs that should be displayed with the tops inline. I've got the problem that they are intended to be on one level at the top, but when i fill them with a different number of lines of text one is getting pushed upwards. It would be awesome if both divs would have the same size and would be aligned exactly inline.

The CSS of the parent div:

#parent{
position:relative;
border:1px solid black;
width:303px;
}

The CSS of the first div:

#firstdiv{  
position:absolute; 
bottom:0; 
left:0; width:150px; 
border:1px solid black;
}

The CSS of the second div:

#seconddiv{  
position:absolute; 
bottom:0; 
right:0;
width:150px; 
border:1px solid black;
}

The result:

JSfiddle!

Answer 1

You can try flex like this :

 * { box-sizing: border-box; } #parent { display: flex; flex-wrap: wrap; border: 1px solid black; width: 300px; text-align: center; } #parent span { width: 100%; padding: 20px; } .item { flex: 1; border: 1px solid black; } 

 <div id="parent"> <span>some content</span> <div class="item"> some content </div> <div class="item"> more more content and even more </div> </div> 

Answer 2

If this is how you want it to look according to your screenshot. Using position:absolute will be a disaster as you add more elements to it. Use flex instead.

You can see that the child containers maintain there original height. That is because of the class flex-item using flex-start to align them at top. but if you want them to occupy full height. Just remove flex-start;

 #parent { margin-top: 30px; position: relative; border: 1px solid black; width: 303px; text-align: center; } .sub-container { display: flex; } .flex-item { align-self: flex-start; //Use this only if you want uneven heights and want to align them from top } #firstdiv { width: 150px; border: 1px solid black; } #seconddiv { width: 150px; border: 1px solid black; } 

 <div id="parent"> Hello Stack overflow! <div class="sub-container"> <div id="firstdiv" class="flex-item"> First div with more content </div> <div id="seconddiv" class="flex-item"> second div </div> </div> </div> 

Answer 3

You can remove all position attributes and use display: table-cell in both first and second divs

see below snippet :

 #parent { border: 1px solid black; width: 400px; text-align: center; } #firstdiv { display: table-cell; width: 200px; border: 1px solid black; } #seconddiv { display: table-cell; width: 200px; border: 1px solid black; } 

 <div id="parent"> <span>Hello text<span> <div id="firstdiv">Stack </div> <div id="seconddiv">Overflow ing text and text adn text and other text </div> </div> 

Answer 4

Set the top of both absolute positioned children to the same value.

eg 20px or desired value

https://www.w3schools.com/cssref/pr_pos_top.asp

ie

#firstdiv {  
  position: absolute; 
  bottom: 0; 
  left: 0;
  width: 150px; 
  border: 1px solid black;
  top: 20px
}

#seconddiv {  
  position: absolute; 
  bottom: 0; 
  right: 0;
  width: 150px; 
  border: 1px solid black;
  top: 20px;
} 

Answer 5

You can use the table display attributes This will make sure all the cells are same size and will let you remove the positioning.

jsFiddle

 #parent { display: table; border: 1px solid black; width: 303px; } #content { display: table-row; } #firstdiv { width: 50%; display: table-cell; border: 1px solid black; } #seconddiv { display: table-cell ; width: 50%; border: 1px solid black; } 

 <div id="parent"> <div id="content"> Hello Stackoverflow! </div> <div id="firstdiv"> first div with more content </div> <div id="seconddiv"> second div </div> </div> 

Answer 6

Remove

bottom: 0;    

from both the first and the second div .