3 replies to this topic

[madams]

CODE

#imageleft {
  float:left;
  padding-right:7px;
  padding-bottom:7px;
  }

#imageright {
  float:right;
  padding-right:7px;
  padding-bottom:7px;
  }

CODE

<img src="Jpeg%27s/costa-blanca-pics/calpe-beach.jpg" width="160" id="imageleft" height="97" alt="Calpe beach" border="0">

With the css code above the picture floats to the left or right. I know this is probably very simple but I have searched and found conflicting answers.

Question: How do I add a title below the picture that floats with it?
Also, does this method have cross brouser problems?

Thanks...

[linux_lover]

Just wrap the image and text in a div element:

CODE

.floatleft {
  float:left;
  padding-right:7px;
  padding-bottom:7px;
}

.floatright {
  float:right;
  padding-right:7px;
  padding-bottom:7px;
}

.floatleft img, .floatright img {border:none}
.floatleft p {color:red}

<div id="floatleft">
<img src="Jpeg%27s/costa-blanca-pics/calpe-beach.jpg" alt="Calpe beach" />
<p>Some text that you want to display under the image, this can also have a css properties for more control.</p>
</div>

[madams]

Thanks Linux Lover for the quick reply.

Just getting started with css, love it!

[linux_lover]

No problemo, CSS rules - I recommend the W3Schools tutorials