Reputation:
I'm trying to make a blog system, how should I position the blog post div so it has those gaps to fit date div?
The code I'm using:
<div class="container post">
<div class="date">
<h3>20</h3>
<h5>november</h5>
</div>
Lorem ipsum dolor sit amet
</div>
.post{
margin-top: 40px;
padding: 10px;
color: white;
background: black;
border: 3px white solid;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
position: relative;
}
.date {
position: absolute;
border: 2px white solid;
width: 55px;
height: 50px;
left: -40px;
background: black;
}
.date h3{
position: relative;
top: -18px;
left: 11px;
}
.date h5{
position: relative;
top: -28px;
left: 2px;
}
Any help with this? I need it so the blog post can fit the div with date.
Upvotes: 0
Views: 21
Reputation: 21
Try:
.post {
margin-top: 40px;
padding: 10px;
color: white;
background: black;
border: 3px white solid;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
position: relative;
}
.date {
position: relative;
float: left;
border: 2px white solid;
height: 50px;
background: black;
margin: 0 10px 10px 0;
padding: 5px;
}
.date h3 {
position: relative;
}
.date h5 {
position: relative;
}
This will put the date in the top left of the post container and wrap the text around it.
Upvotes: 2