0

I'm still a beginner in css, and I'm trying to give some margin-left to my paragraph and <h2> but its not working.

I have a div with 700px and I want to give 10px of margin-left for my <p> and <h2> in relation to the image.

But its not working, can you give some help?

What Im trying:

My jsfiddle with the problem:

http://jsfiddle.net/2p9vw/5/

My html:

<div id="example">
    <img src="images/image3.jpg" width="226" height="129" />
    <h2>Example</h2>
    <p>text here  text here  text here  text here  text here  text here  text here  text here  text here  text here  </p>
</div>

My css:

#example {width:690px; height:auto; font-size:16px; margin:15px 0 0 0;}
#example img{float:left;}
#example h2{float:right;margin-left:10px; font-size:16px; color:#444;}
#example p{ text-align:justify; margin-left:10px; }
OzzC
  • 815
  • 4
  • 20
  • 36

1 Answers1

3

I have a div with 700px and I want to give 10px of margin-left for my <p> and <h2> in relation to the image.

But its not working

It is working – you just don’t see it working.

Since your image is floated, that means any inline content will float around it – but the block elements like p and h2 still go over the full width, underneath your image – and that’s why you don’t see any effect of that margin, because it is “under” the image.

Simply give your image a margin-right of 10px instead. http://jsfiddle.net/2p9vw/4/

Community
  • 1
  • 1
CBroe
  • 91,630
  • 14
  • 92
  • 150