mixing floats in css and html

**shoshanaz** · Oct 14, 2004 17:27

Is there a way to put text with an html floated image into a div defined in css?

I am constructing a page on the fly and trying to incorporate html that my client builds in simple html and stuff it into a div on my page. The code and css follow. Neither MSIE nor netscape seems to handle the result very well. Because the site is meant to be dynamic, I won't know what images might be included, nor their size. See sample at http://www.j4j.org/web/artcontest/2005/test2.php
MSIE6 hides the image behind the div and both browsers set the size of the div to that of the text, not the larger height of the image.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Jews for Judaism Writing Contest</title>
<link href="styles/test.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="pagemain">
<p><img src="images/artcontestBLKICONPoster.gif" width="145" height="186" align="left"> for students</p>
<p>in the</p>
<p>Greater Washington, D.C. Area</p>
</div>
</body>
</html>

CSS IS
body
{
background-color: #00499A;
}

#pagemain {
float: none;
border: 1px solid #003399;
position: relative;
background-color: #FFFFFF;
}

**rbutler** · Oct 15, 2004 06:26

Originally Posted by shoshanaz

Is there a way to put text with an html floated image
into a div defined in css?

Because the site is meant to be dynamic, I won't know what images might be included, nor their size.

CSS can't be used to put various image sizes into an HTML page. Well, I guess technically you could but you're going to get funky results. You need to design your CSS around how big your images will be. The only problem I see with the code below (b/c I'm intermediate with CSS) is you have not declared a float value below, like so:

Your code:

Code:

#pagemain {
	float: none;
	border: 1px solid #003399;
	position: relative;
	background-color: #FFFFFF;

Float value declared:

Code:

#pagemain {
	float: left or right, adjust to suit;
	border: 1px solid #003399;
	position: relative;
	background-color: #FFFFFF;
}

Without the above declared, you are not telling the browser which way to float the text surrounding it.

**shoshanaz** · Oct 15, 2004 08:50

That change did make a difference, at least the image doesn't get covered up. I guess I will probably forget about using the html approach and just define a couple of extra styles for handling the images.

Thanks for the reply

**Paul O'B** · Oct 15, 2004 08:54

Hi,

The image was covered up because you had used position:relative on the parent and ie then likes its children to also be position:relative as well.

You also need to clear the float to make the parent extend.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Jews for Judaism Writing Contest</title>
<style type="text/css">
body
 {
 background-color: #00499A;
 }
 
#pagemain {
 border: 1px solid #003399;
 position: relative;
 background-color: #FFFFFF;
}
#pagemain img {
 float:left;
 position:relative;
 margin:5px;
}
#pagemain p {margin:10px 0 0 0;padding:0}
.clearer{
 height:1px;
 overflow:hidden;
 margin-top:-1px;
 clear:both;
}
</style>
</head>
<body>
<div id="pagemain"> 
  <img src="http://www.j4j.org/web/artcontest/20...ICONPoster.gif" width="145" height="186"> 
  <p> for students</p>
  <p>in the</p>
  <p>Greater Washington, D.C. Area</p>
  <div class="clearer"></div>
</div>
</body>
</html>

Hope that helps.

Paul

**shoshanaz** · Oct 15, 2004 09:12

Yes it does indeed. Thanks. I have definitely learned a thing or three here.

User Tag List

Thread: mixing floats in css and html

Thread Tools

Display

mixing floats in css and html

Mixing floats in css/html

Bookmarks

Bookmarks

Posting Permissions