Jump to content
Raul

CSs reading

Recommended Posts

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 by Raul

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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.

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...