UPDATE: I don't think that I can do what I wanted which is float the image over the border and have text flow. At least not without lots of contortions. Thanks for your help.
Spice
Hi All,
I'm having a bit of trouble with flowing text around an image. The head and text containers are positioned where I need them. However, the test image I'm using (I know it's still big) is still moving the text to the wrong position. I'm sure it is a simple fix but I've been looking at it so long today that I'm ready to scream.
The page is at http://www.fussypuppy.com/index_pp.html.
The CSS is
body{
min-width: 775px;
}
p, table, td, ul, ol{
font: 10pt Verdana;
color: #000;
line-height: 1.5em;
}
#container{
position: absolute;
top: 1em;
left: 20em;
width: 775px;
}
#banner{
width: 775px;
}
#nav{
width: 775px;
}
#pre{
width: 770px;
padding: 5px;
margin: 5px;
text-align: left;
}
#contLeft{
float: left;
clear: left;
width: 355px;
}
#contRight{
float: right;
clear: right;
width: 355px;
}
.headContainerLt{
width: 300px;
border: 1px solid #000;
background-color: white;
padding: 10px 5px 10px 5px;
text-align: left;
position: relative;
float: left;
clear: left;
}
.headContainerRt{
width: 300px;
border: 1px solid #000;
background-color: white;
padding: 10px 5px 10px 5px;
text-align: left;
position: relative;
float: right;
clear: right;
}
.headContainerLt h1, .headContainerRt h1{
font: 10pt Verdana;
font-weight: bold;
margin-bottom: 0;
}
.textContLt{
width: 225px;
border: 1px solid #000;
border-top: 0;
padding: 5px;
position: relative;
left: 1em;
text-align: left;
float: left;
clear: left;
}
.textContRt{
width: 225px;
border: 1px solid #000;
border-top: 0;
padding: 5px;
float: right;
left: -1em;
position: relative;
clear: right;
text-align: left;
}
Thanks for your help.
First, unless you have
First, unless you have compelling reason, don't specify a position value. The default "static" is mostly sufficient. The values relative, absolute and fixed have enough gotchas in the fine print to do a Philadelphia lawyer proud.
You have this:
In these days of sky-rocketing costs, everyone is tempted to cut corners where possible. First, it is never a good idea to cut costs on your home, the most important investment the average American will ever make. It will always come back to haunt you.
Instead, try this:
In these days of sky-rocketing costs, everyone is
tempted to cut corners where possible. First, it is
never a good idea to cut costs on your home, the most
important investment the average American will ever
make. It will always come back to haunt you.
============
.textContLt img {
float: right;
}
cheers,
gary