[RESOLVED] wrap text around two images? [Archive]

Click to See Complete Forum and Search --> : [RESOLVED] wrap text around two images?

jolene

03-24-2006, 08:48 AM

:confused: Hi, I can't seem to wrap text properly around *2* images in a div box. Depending on the amount of text used, I get blank space one one side of the image. Is there a better way to flow text smoothly around 2 images? Thank you. Here's the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>3 Column Layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css">
a:link {color: #ffff99; text-decoration: none;}
a:visited {color: #ffff99; }
a:active {color: #99ff00; }
a:hover { color : #ffcc00; text-decoration: none; }
a {text-decoration: none;}

* { margin:0; padding:0; }
BODY {

background-color:#cccc99;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;

}
html, body, div {
margin: 0px;
padding: 0px;
border: 0px;
font: normal 1em Arial, Geneva, Helvetica;
}

.flow {
float: left;
clear: left;
margin: 0px 1.25em 0px 0px;
}
h1 {
font-size: 1.5em;
}
h2 {
font-size: 1.25em;
}
h3 {
font-size: 1.1em;
}

#header {

background-color:#ffffff;
padding-bottom:1.5em;
color: #000000;
text-align: center;
font-size : 14px;

}
#left{
color: #000000;
float:left;
width:210px;
padding-left:0;
background-color:#fffccc;
text-align: justify;
height : 100%;
}

#right{
color: #000000;
font-size: 12px;
float:right;
width:165px;
padding:8px;
background-color:#ffffff;
text-align: justify;
margin-top: 0px;

}

.rightbox{

color: #000000;
font-size: 12px;

width:134px;
padding: 5px;
background-color:#fffccc;
text-align: justify;
border-top-style : solid;
border-right-style: solid;
border-left-style: solid;
border-width :1px;
border-color : #990333;
border-bottom-style: solid;

}

.toprbox{
color: #eeeeee;
font-size: 12px;

width:134px;
padding: 5px;
background-color:#990333;
text-align: justify;
border-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-bottom-style: solid;
border-color : #990333;

}

#center{
color: #000000;
margin-right:196px;
margin-left:200px;
padding: 6px;
background-color:#eeeeee;
text-align: justify;
font-size: 12px;
margin-top: 2em;
height : 70%;
border-style: solid;
border-color : #666666;
border-width: 1px;
padding : 8px;

}

p.solid {
border-style: solid;
border-width: 1px;
padding : 8px;
height : auto;

}

p.none {
border-style: solid;
border-width : 3px;
background-color:#ff9999;

padding : 8px;

}
#footer{
border: 2px:
width : 100%;

clear:both;
background-color:#CCC08F;
padding:.5em;

}

img.floatRight{

float: right;
margin: 4px;
padding: 5px;

}

img.floatRight{
float: right;
margin: 4px;

}

.box-wrap{

padding : 0;
color : #000000;
text-align: center;
background-color : #ffffff;
HEIGHT : 100%;
width: 880px;
margin-left: auto;
margin-right: auto;
}

h1 {
margin : 0;
padding : 0;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size : 1.4em;
color : #ff9900;
text-align : center;
margin-top: 1em;
}
h2 {
margin : 0 0 9px;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
padding : 9px 0 0;
color : #ff9900;
font-size : 1.2em;
font-weight : normal;
text-align : center;
}
h3 {

padding : 6px;
color : #999999;
font-size : 13px;
font-weight : normal;
text-align : justify;

}
h4 {
padding : 0 0 0 8px;
color : #333333;
font-size : 1.1em;
font-weight : bold;
text-align : justify;

}
h5 {
line-height: 140%;
padding : 0 0 0 0px;
color : #999999;
font-size : 12px;
font-weight : normal;
text-align : justify;

}
h6 {

line-height: 150%;

padding : 0 0 0 8px;
color : #cccFFF;
font-size : 1.2em;
font-weight : normal;
text-align : center;
}

.topbox{
border: 2px:
width : 100%;
color: #ffff99;
font-size : 11px;
background-color:#990000;
padding:1.5em;

}
.sidebar{
line-height: 130%;
margin : 0 0 0px 1px;
background-color:#ffffff;
padding : 0 3px 0 15px;
color : #cc3300;
font-size : 12px;
font-weight : bold;
text-align : left;
}

</style>

<link rel="stylesheet" href="img.css" type="text/css" />
</head>
<body>

<div class="box-wrap">

<div class="topbox"> <a href="http://www.loversofbeauty.com/wordlove.htm" title="What IS Love?" > Some link</a>
            
<a href="http://www.loversofbeauty.com/wordlove.htm" title="What IS Love?" > Some link</a>
            

<a href="http://www.loversofbeauty.com/wordlove.htm" title="What IS Love?" > Some link</a>

            

<a href="http://www.loversofbeauty.com/wordlove.htm" title="What IS Love?" > Some link</a>
            

<a href="http://www.loversofbeauty.com/wordlove.htm" title="What IS Love?" > Some link</a>
</div>
<div id="header"><h1>Title</h1>

<br/>

<h2>subtitle</h2></div>

<div id="left"> <div class="sidebar">
<img src="jk.gif" width="133" height="120" alt=""/><h3>

</h3>

<br/><br/><br/><br/><br/><br/>

</div>

</div>
<div id="right">
<br/><br/><br/>
<div class="toprbox">ewdw ed ew </div>
<div class="rightbox"><h3>

</h3> </div>
</div>

<div id="center"><p><h3>
The objective is to wrap text around TWO images in a DIV box.
The objective is to wrap text around TWO images in a DIV box.
The objective is to wrap text around TWO images in a DIV box.
The objective is to wrap text around TWO images in a DIV box.
The objective is to wrap text around TWO images in a DIV box.
The objective is to wrap text around TWO images in a DIV box.
<img src="lo.jpg" width="223" height="158" alt="">
The objective is to wrap text around TWO images in a DIV box.
The objective is to wrap text around TWO images in a DIV box.
The objective is to wrap text around TWO images in a DIV box.
The objective is to wrap text around TWO images in a DIV box.
The objective is to wrap text around TWO images in a DIV box.
The objective is to wrap text around TWO images in a DIV box.

<img src="lo.jpg" width="223" height="158" alt="">

</h3></p>.

</div>

<br/><br/><br/><br/>

<div id="footer"><a href="http://www.shadow-fox.net">Back to the article</a></div>

</div>

</div>

</body>
</html>

WebJoel

03-24-2006, 09:01 AM

img.floatRight{

float: right;
margin: 4px;
padding: 5px;

}

img.floatRight{
float: right;
margin: 4px;

}
repeated in your *css?

And in your html:
<div id="center"><p><h3>

The objective is to wrap text around TWO images in a DIV box.
The objective is to wrap text around TWO images in a DIV box.
The objective is to wrap text around TWO images in a DIV box.
The objective is to wrap text around TWO images in a DIV box.
The objective is to wrap text around TWO images in a DIV box.
The objective is to wrap text around TWO images in a DIV box.
<img src="lo.jpg" width="223" height="158" alt="">
The objective is to wrap text around TWO images in a DIV box.
The objective is to wrap text around TWO images in a DIV box.
The objective is to wrap text around TWO images in a DIV box.
The objective is to wrap text around TWO images in a DIV box.
The objective is to wrap text around TWO images in a DIV box.
The objective is to wrap text around TWO images in a DIV box.

<img src="lo.jpg" width="223" height="158" alt="">

</h3></p>
You can't put anything inside a <h>~</h> tag except HEADER text. And you have put the <h></h> nested inside a <p></p> anyway. This isn't going to work and the opening <h> implicitly closes the open <p> before it.

And in your images that you want to 'float' using the *css, there is no "class="floatRight" to tie it to the STYLE. Your <img> needs to include "class="floatRight" to make it do this. Or remove the ".floatRight" from the *css (but this will make ALL/ANY "img" "float to the right". You probably do not want to do this..):)
I'm still testing it offline...

jolene

03-24-2006, 04:47 PM

Thanks, I corrected those repetitions but I was trying to get the 2 images (stacked vertically) seperated by text between them and down the right side as well. here is the code I corrected.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>3 Column Layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css">
a:link {color: #ffff99; text-decoration: none;}
a:visited {color: #ffff99; }
a:active {color: #99ff00; }
a:hover { color : #ffcc00; text-decoration: none; }
a {text-decoration: none;}

* { margin:0; padding:0; }
BODY {

background-color:#cccc99;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;

}
html, body, div {
margin: 0px;
padding: 0px;
border: 0px;
font: normal 1em Arial, Geneva, Helvetica;
}

.flow {
float: left;
clear: left;
margin: 0px 1.25em 0px 0px;
}
h1 {
font-size: 1.5em;
}
h2 {
font-size: 1.25em;
}
h3 {
font-size: 1.1em;
}

#header {

background-color:#ffffff;
padding-bottom:1.5em;
color: #000000;
text-align: center;
font-size : 14px;

}
#left{
color: #000000;
float:left;
width:210px;
padding-left:0;
background-color:#fffccc;
text-align: justify;
height : 100%;
}

#right{
color: #000000;
font-size: 12px;
float:right;
width:165px;
padding:8px;
background-color:#ffffff;
text-align: justify;
margin-top: 0px;

}

.rightbox{

color: #000000;
font-size: 12px;

width:134px;
padding: 5px;
background-color:#fffccc;
text-align: justify;
border-top-style : solid;
border-right-style: solid;
border-left-style: solid;
border-width :1px;
border-color : #990333;
border-bottom-style: solid;

}

.toprbox{
color: #eeeeee;
font-size: 12px;

width:134px;
padding: 5px;
background-color:#990333;
text-align: justify;
border-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-bottom-style: solid;
border-color : #990333;

}

#center{
color: #000000;
margin-right:196px;
margin-left:200px;
padding: 6px;
background-color:#eeeeee;
text-align: justify;
font-size: 12px;
margin-top: 2em;
height : 70%;
border-style: solid;
border-color : #666666;
border-width: 1px;
padding : 8px;

}

p.solid {
border-style: solid;
border-width: 1px;
padding : 8px;
height : auto;

}

p.none {
border-style: solid;
border-width : 3px;
background-color:#ff9999;

padding : 8px;

}
#footer{
border: 2px:
width : 100%;

clear:both;
background-color:#CCC08F;
padding:.5em;

}

img.floatLeft{
float: left;
margin: 4px;

}

.box-wrap{

padding : 0;
color : #000000;
text-align: center;
background-color : #ffffff;
HEIGHT : 100%;
width: 880px;
margin-left: auto;
margin-right: auto;
}

h1 {
margin : 0;
padding : 0;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size : 1.4em;
color : #ff9900;
text-align : center;
margin-top: 1em;
}
h2 {
margin : 0 0 9px;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
padding : 9px 0 0;
color : #ff9900;
font-size : 1.2em;
font-weight : normal;
text-align : center;
}
h3 {

padding : 6px;
color : #999999;
font-size : 13px;
font-weight : normal;
text-align : justify;

}
h4 {
padding : 0 0 0 8px;
color : #333333;
font-size : 1.1em;
font-weight : bold;
text-align : justify;

}
h5 {
line-height: 140%;
padding : 0 0 0 0px;
color : #999999;
font-size : 12px;
font-weight : normal;
text-align : justify;

}
h6 {

line-height: 150%;

padding : 0 0 0 8px;
color : #cccFFF;
font-size : 1.2em;
font-weight : normal;
text-align : center;
}

.topbox{
border: 2px:
width : 100%;
color: #ffff99;
font-size : 11px;
background-color:#990000;
padding:1.5em;

}
.sidebar{
line-height: 130%;
margin : 0 0 0px 1px;
background-color:#ffffff;
padding : 0 3px 0 15px;
color : #cc3300;
font-size : 12px;
font-weight : bold;
text-align : left;
}

</style>

<link rel="stylesheet" href="img.css" type="text/css" />
</head>
<body>

<div class="box-wrap">

<div class="topbox"> <a href="http://www.loversofbeauty.com/wordlove.htm" title="What IS Love?" > Some link</a>
            
<a href="http://www.loversofbeauty.com/wordlove.htm" title="What IS Love?" > Some link</a>
            

<a href="http://www.loversofbeauty.com/wordlove.htm" title="What IS Love?" > Some link</a>

            

<a href="http://www.loversofbeauty.com/wordlove.htm" title="What IS Love?" > Some link</a>
            

<a href="http://www.loversofbeauty.com/wordlove.htm" title="What IS Love?" > Some link</a>
</div>
<div id="header"><h1>Title</h1>

<br/>

<h2>subtitle</h2></div>

<div id="left"> <div class="sidebar">
<img src="jk.gif" width="133" height="120" alt=""/><h3>

</h3>

<br/><br/><br/><br/><br/><br/>

</div>

</div>
<div id="right">
<br/><br/><br/>
<div class="toprbox">ewdw ed ew </div>
<div class="rightbox"><h3>

</h3> </div>
</div>

<div id="center"><p><h3>
The objective is to wrap text around TWO images in a DIV box.
The objective is to wrap text around TWO images in a DIV box.
The objective is to wrap text around TWO images in a DIV box.
The objective is to wrap text around TWO images in a DIV box.
The objective is to wrap text around TWO images in a DIV box.
The objective is to wrap text around TWO images in a DIV box.
<img src="lo.jpg" class="floatLeft" width="223" height="158" alt="">
The objective is to wrap text around TWO images in a DIV box.
The objective is to wrap text around TWO images in a DIV box.
The objective is to wrap text around TWO images in a DIV box.
The objective is to wrap text around TWO images in a DIV box.
The objective is to wrap text around TWO images in a DIV box.
The objective is to wrap text around TWO images in a DIV box.

<img src="lo.jpg" class="floatLeft" width="223" height="158" alt="">
The objective is to wrap text around TWO images in a DIV box.
The objective is to wrap text around TWO images in a DIV box.
The objective is to wrap text around TWO images in a DIV box.
The objective is to wrap text around TWO images in a DIV box.
The objective is to wrap text around TWO images in a DIV box.
The objective is to wrap text around TWO images in a DIV box.

</h3></p>.

</div>

<br/><br/><br/><br/>

<div id="footer"><a href="http://www.shadow-fox.net">Back to the article</a></div>

</div>

</div>

</body>
</html>