Forum Moderators: not2easy
<div class="prod_link">
<h4>
<a href="www.example.com">2U Rackmount Computers</a>
</h4>
<img src="http://www.example.com/2U_lp.png" mce_src="images/products/2U_lp.png" alt="2u Rackmount computer" width="150" height="54">
2U rackmount computers pack a punch in small spaces.</div>
<div class="prod_link">
<h4>
<a href="www.mysite.com">4U Rackmount Computers</a>
</h4>
<img src="http://www.example.com/4U_lp.png" mce_src="images/products/4U_lp.png" alt="4U Rackmount Computer" width="150" height="86">
4U rackmount systems are workhorses for your computing applications.</div>I have my css as so:
.lp_info img {
float:left;
}
.prod_link {
margin:20px 0 0 0;
}
When I preview the page, the second section is shown out to the right of the first image, just under the first div's text. How do I make it so each is pushed under the one above it?
[edited by: swa66 at 8:16 am (utc) on Sep. 26, 2009]
[edit reason] Use example.com , it cannot be owned [/edit]
...the second section is shown out to the right of the first image...
Not sure what you mean by "second section" - the line of text after the images, which is displayed to the immediate right?
If so, a simple <br /> would do it. You could also put the <img> and the text in separate containers, perhaps <p> or even a list; depends on what is on the rest of the page.
The provided CSS includes two declarations, one of which is not used in the HTML provided and perhaps not needed at all. The <img> is already an inline element that will {text-align: left;} by default?
.lp_info img {
float:left;
}
Although width and height are not deprecated for <img> I did change to inline style as my preference.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
.prod_link {
margin: 20px 0 0 0;
}/***** ? */
.lp_info img {
float:left;
}
</style>
</head>
<body>
<div class="prod_link">
<h4>
<a href="www.example.com">2U Rackmount Computers</a>
</h4>
<img src="aaa.jpg" alt="2u Rackmount computer" class="lp_info" style="width: 150px; height: 54px;" />
<br />
2U rackmount computers pack a punch in small spaces.
</div><div class="prod_link">
<h4>
<a href="www.example.com">4U Rackmount Computers</a>
</h4>
<img src="bbb.gif" alt="4U Rackmount Computer" style="width: 150px; height: 86px;" />
<br />
4U rackmount systems are workhorses for your computing applications.
</div>
<!--##########
I know this is what is supposed to happen, but I am trying to keep it from doing so.When I preview the page, the second section is shown out to the right of the first image, just under the first div's text. How do I make it so each is pushed under the one above it?
-->
</body>
</html>
