CODEWITHSUNDEEP
htmlcsscss-positionfloating
Leonardo
Leonardo

Reputation: 4228

Css positioning: how to position a block/paragraph under another

I have this html structure 

<img class="media-object pull-left" src="http://placehold.it/40x40">
<h4 class="media-heading">Heading</h4>
<p>Paragraph lorem ipsum bla bla bla </p>

And I need this sort of positioning enter image description here

That is, I always want the paragraph to appear under the image. The most basic solution would be to give the h4 a margin-bottom sufficient to push the paragraph below the image (or give the p an equivalent margin-top).

Is there a better way to do this without knowing the image dimension and avoiding to use the margins to position the elements?

Upvotes: 2

Views: 4417

Answers (4)

spasticninja
spasticninja

Reputation: 711

Alternatively you can have the image and header in one div and then the paragraph in another. You can also try adding padding-top:10px; where you can replace 10px with whatever will fit.

Upvotes: 0

GreyRoofPigeon
GreyRoofPigeon

Reputation: 18123

First you let the image float to the left, so the other two show up on the right side of the image.

The heading needs no further adjusting (in the demo it has a margin-bottom: 0, only to make sure that the margin doesn't already push the paragraph underneath the image).

The clear both sides of the paragraph, and it goes to the next line.

.pull-left {
    float: left;
}
p {
    clear: both;
}

And ofcourse the demo

Upvotes: 1

LiamHT
LiamHT

Reputation: 1332

an <img> is an inline element, therefore elements can be positioned next to it. like your header. to resolve this, you could wrap your <img> and <h4> inside a <div>

Upvotes: 0

James Korden
James Korden

Reputation: 634

.pull-left {
 float: left;
}
p {
 clear: both;
}

You may want to make this a little more specific using classes or id's for the <p> tag, however.

Upvotes: 2

Related Questions