CSs reading

[Raul]

Hi , im just trying to put 3 text in a row but i dont know why css dont read my second text , i dont get it..  i cant put 2 position absolute in a position relative div?

.text1 {				  
  position: absolute;				  
  width: 20%;				  
  overflow: hidden;				  
  height: 300px;				  
  line-height: 30px;				  
  margin-left: 20px;				  
  margin-top: 100px;
}				
.text2 {				  
  position: absolute;				  
  width: 20%;				  
  overflow: hidden;				  
  height: 300px;				  
  line-height: 30px;				  
  margin-left: 20px;				  
  margin-top: 100px;
}	
	

The div classes are the same , copy paste , but the second one css dont read it idk what i do wrong

Edited June 23, 2020 by Raul

[shaili_shah]

For that you have to change the margin-left of the  " text2 " class.

And if you want to align properly without this... then i suggest you to use bootstrap " row " and " col " class.

It will be useful and easy to use.

I hope this'll help you.

Thanks!

[dsonesuk]

So what you are saying is use bootstrap framework, for such a basic layout!? Really

The answer why it does not work is quite simple , you are using position: absolute;

You only use position: absolute; for overlapping elements.

Position: absolute is taken out of the flow from other elements and it does not adjust to content, it requires at the very least properties of left: and top: else they will overlap each other and maybe height and width. To other elements these position: absolute elements do not exit to take up any room, so they fill the area they would have occupied.

Just use block element like div, with percentage width of 33.33%, and float them left, thats it! The other option is to use display: flex;  which would be same layout. I think you will tutorial giving example for this kind of layout in both.