Yes, new to CSS and jazzed. Simple problem...I think. I wish to float an image left (eg. div id="box_1Flt") and have the text wrap around it. That part I think I've got down. My Q. is the white space between the bottom of the image and the text. When I view my code in Opera, NS8, and IE6 they all display a gap of approximately 7px. Any ideas on how to code this to a reasonable px ht would be appreciated. - The test page has 3 boxes left and 3 boxes right inside a container div.
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>New & Crazy to CSS</title>
<link href=http://www.webdeveloper.com/forum/archive/index.php/"/KHDWeb/sunday.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="pgCntnr">
<div id="lftCntnr">
<div id="box_1">
<div id="box_1Flt"><img src=http://www.webdeveloper.com/forum/archive/index.php/"/KHDWeb/Images/engineShotFt.jpg" alt="Test Float"></div><p>This would be box one to the left of the page at the top. Will the text flow tight against the bottom of the image in IE6, Opera, NS? Answser is NO. Now with the blah, blah, blah, blah, blah, we'll see if the text will wrap closely around the bottom of the image. I doubt this will make any difference at all but it's worth a try. How bout it. OK, time to go to post. I'm blue in the face. Reading the CSS spec is about to make me go postal.</p>
</div>
<div id="box_2"><h2>This would be box two to the left of the page, second from the top</H2></div>
<div id="box_3"><h2>This would be box three to the left of the page, third from the top with text floated against an image</h2></div>
</div>
<div id="rtCntnr">
<div id="box_4"><h1>This would be the box four to the right of the page at the top.</h1></div>
<div id="box_5"><h2>This would be the box five to the right of the page just below box 4.</h2></div>
<div id="box_6"><div id="box_6Flt"><h1><img src=http://www.webdeveloper.com/forum/archive/index.php/"/KHDWeb/Images/preOwned_LgTxt.jpg">This would be the box six to the right of the page just below box 5 and with an image floated.</h1></div></div>
</div>
</body>
</html>
CSS
body {
font-family: Arial, Helvetica, sans-serif;
font-size:14px;
}
.pgCntnr {
margin:0px;
width:700px;
}
#lftCntnr {
margin:0px;
width:350px;
float:left;
}
#box_1 {
margin:0px;
width: 350px;
float:left;
border: dashed;
border: #FF0000;
}
#box_1Flt {
margin:0px;
float:left;
}
#box_2 {
margin:0px;
width: 350px;
float: left;
border: dashed;
border: #0000FF;
}
#box_3 {
margin:0px;
width: 350px;
float: left;
border: dashed;
border: #CCCCCC;
}
#rtCntnr {
margin:0px;
width:350px;
float: right;
clear: right;
}
#box_4 {
margin:0px;
width: 350px;
float: right;
border: dashed;
border: #00FF00;
}
#box_5 {
margin:0px;
width: 350px;
float: right;
border: dashed;
border: #333333;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
#box_6 {
margin:0px;
width: 350px;
float: right;
border: dashed;
border: #FF00FF;
}
#box_6Flt {
margin:0px;
float: left;
}Float the image directly, not in a div. Usually the extra space below a floated image is related to the height of the image versus the line height of the text. Sort of like rounding error.OK. I've floated the images directly as advised. Less code, cleaner, and obviously the way to go and again....tip-O-the-hat,,,,thx. Now, I've been able to make some adjustment to the space between the image bottom and top of the text below it with <img src=http://www.webdeveloper.com/forum/archive/index.php/"/KHDWeb/Images/preOwned_LgTxt.jpg" alt="Pre Owned" width="192" height="30" align="right" vspace="0" hspace="3"> and I can live with what I've got. Maybe I'm just too anal about it, but is there another way to make that adjustment with finer precision?
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>New & Crazy to CSS</title>
<link href=http://www.webdeveloper.com/forum/archive/index.php/"/KHDWeb/sunday.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="pgCntnr">
<div id="lftCntnr">
<div id="box_1">
<div id="box_1Flt"><img src=http://www.webdeveloper.com/forum/archive/index.php/"/KHDWeb/Images/engineShotFt.jpg" alt="Test Float"></div><p>This would be box one to the left of the page at the top. Will the text flow tight against the bottom of the image in IE6, Opera, NS? Answser is NO. Now with the blah, blah, blah, blah, blah, we'll see if the text will wrap closely around the bottom of the image. I doubt this will make any difference at all but it's worth a try. How bout it. OK, time to go to post. I'm blue in the face. Reading the CSS spec is about to make me go postal.</p>
</div>
<div id="box_2"><h2>This would be box two to the left of the page, second from the top</H2></div>
<div id="box_3"><h2>This would be box three to the left of the page, third from the top with text floated against an image</h2></div>
</div>
<div id="rtCntnr">
<div id="box_4"><h1>This would be the box four to the right of the page at the top.</h1></div>
<div id="box_5"><h2>This would be the box five to the right of the page just below box 4.</h2></div>
<div id="box_6"><div id="box_6Flt"><h1><img src=http://www.webdeveloper.com/forum/archive/index.php/"/KHDWeb/Images/preOwned_LgTxt.jpg">This would be the box six to the right of the page just below box 5 and with an image floated.</h1></div></div>
</div>
</body>
</html>
CSS
body {
font-family: Arial, Helvetica, sans-serif;
font-size:14px;
}
.pgCntnr {
margin:0px;
width:700px;
}
#lftCntnr {
margin:0px;
width:350px;
float:left;
}
#box_1 {
margin:0px;
width: 350px;
float:left;
border: dashed;
border: #FF0000;
}
#box_1Flt {
margin:0px;
float:left;
}
#box_2 {
margin:0px;
width: 350px;
float: left;
border: dashed;
border: #0000FF;
}
#box_3 {
margin:0px;
width: 350px;
float: left;
border: dashed;
border: #CCCCCC;
}
#rtCntnr {
margin:0px;
width:350px;
float: right;
clear: right;
}
#box_4 {
margin:0px;
width: 350px;
float: right;
border: dashed;
border: #00FF00;
}
#box_5 {
margin:0px;
width: 350px;
float: right;
border: dashed;
border: #333333;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
#box_6 {
margin:0px;
width: 350px;
float: right;
border: dashed;
border: #FF00FF;
}
#box_6Flt {
margin:0px;
float: left;
}Float the image directly, not in a div. Usually the extra space below a floated image is related to the height of the image versus the line height of the text. Sort of like rounding error.OK. I've floated the images directly as advised. Less code, cleaner, and obviously the way to go and again....tip-O-the-hat,,,,thx. Now, I've been able to make some adjustment to the space between the image bottom and top of the text below it with <img src=http://www.webdeveloper.com/forum/archive/index.php/"/KHDWeb/Images/preOwned_LgTxt.jpg" alt="Pre Owned" width="192" height="30" align="right" vspace="0" hspace="3"> and I can live with what I've got. Maybe I'm just too anal about it, but is there another way to make that adjustment with finer precision?