img float right going out of div

Forum Moderators: not2easy

Message Too Old, No Replies

img float right going out of div

image with float right attribute pushing out of div

zarforpar

4:26 pm on Jan 16, 2008 (gmt 0)

When I apply float: right to an image, it is going out of the div on firefox. It stays in the div on IE, but pushes below the content.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
html:
<div id="header">
<p>text here</p>
<img src="imagehere.jpg" alt="alt text here" width="161" height="85" />
</div>
css:
#header {
width: 800px;
border-style: solid;
}
#header p {
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
font-weight: bold;
line-height: 28px;
color: #FFCC00;
}
#header img {
float: right;
}
Thanks for any help, great site...

birdbrain

6:03 pm on Jan 16, 2008 (gmt 0)

Hi there zarforpar'

and a warm welcome to these forums. ;)

Try it like this...


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#header {
width: 800px;
border:1px solid #000;
}
#header img {
width:161px;
height:85px;
float:right;
} 
#header p {
font-family:arial,helvetica,sans-serif;
font-size:24px;
font-weight:bold;
line-height:28px;
color: #fc0;
}
#header:after {
content:'';
display:block;
clear:both;
}
</style>
</head>
<body>
<div id="header">
<img src="imagehere.jpg" alt="alt text here" />
<p>text here</p>
</div>
</body>
</html>

birdbrain

zarforpar

9:52 pm on Jan 16, 2008 (gmt 0)

Thanks! That works beautifully. Should I always be using the :after with images?