Reputation: 384
I have a bunch of divs with content inside of them, and I want the text to automatically adjust! For instance, in div one the length and size of the text might vary compared to the other divs, and I want to set one css rule to make sure that the text looks structured regardless of those attributes.
HTML
<div id="#info-1">
<h4>Subtitle</h4>
<h1>Title</h1>
<h3>Subtitle</h3>
</div>
<div id="#info-2">
<h4>Subtitle</h4>
<h1>Title</h1>
<h3>Subtitle</h3>
</div>
<div id="#info-3">
<h4>Subtitle</h4>
<h1>Title</h1>
<h3>Subtitle</h3>
</div>
CSS
#info-1, #info-2, #info-3{
position:absolute;
top:0px;
margin-top: 75px;
margin-left:350px;
float: left
}
#info-1 h3, #info-2 h3, #info-3 h3
{
position:absolute;
top: 105px;
left: 130px;
}
#info-1 h4, #info-2 h4, #info-3 h4
{
position:absolute;
top:40px;
left:75px;
}
#info-1, #info-2, #info-3, #info-4{
background-color: lightgrey;
width:300px; height:175px;
}
#info-1 h1, #info-2 h1,#info-3 h1
{
position:absolute;top: 55px; left:60px;
color: white;
text-transform: uppercase;
}
Upvotes: 0
Views: 67
Reputation: 66
Not sure what you're trying to achieve here - maybe you could try to explain again? What do you mean by "structured"?
Meanwhile, I would remove the hashes from your id attributes of your example or you'll not see any styling at all.
Upvotes: 1