CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
user5353145
user5353145

Reputation:

Bootstrap: make a container have offsets

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? enter image description here

enter image description here

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

Answers (1)

Andrew Colombi
Andrew Colombi

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

Related Questions