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

Tags: html,css,css-position,floating

Problem :

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?

Solution :

.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.

    CSS Howto..

    How to get selected table cells background colour?

    How to center align ion icon inside button?

    How do I draw the lines of a family tree using HTML CSS?

    HTML CSS how to adapt text on a Div's size [closed]

    css nested classes, how to not repeat code?

    How to style OL number points in CSS [duplicate]

    How to create new lines with less space HTML/CSS

    How can I align text using CSS but perform like printf in C? [closed]

    How to point to CSS default class using the class attribute

    How to make a box's content overflow past background

    How to remove spacing between tags?

    How to appear two HTML input elements in single line (row)

    How to horizontally scroll an inner div with text wrapping

    How can I make DIV 100% height of browser without vertical scrolling of header

    How to dynamically alter the CSS of a pseudo element with JQuery?

    How to do like this list using
  • and CSS?
  • How to make a bootstrap modal fade in from the bottom?

    How to provide some space between two lines of same text in css

    how create triangle using css [duplicate]

    How to edit CSS styles in JavaScript?

    How to write css for that?

    Overflow-x and overflow-y properties, how should they work? [duplicate]

    Awkward gap between menu items. How to fix?

    How to make a div tag without margins in css? [duplicate]

    How to place a div at top center position of a page using css…?

    how to display image on mouse over by css

    How to remove all elements except for one, maintaing the same CSS path to it?

    How to make a css keyframe step animation responsive?

    How do I change my link's image on click?

    How to make agile layout?