1 reply [Last post]
Spice
Offline
newbie
Georgia
Last seen: 13 years 12 weeks ago
Georgia
Joined: 2006-05-24
Posts: 3
Points: 0

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.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 3 hours 59 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9767
Points: 3849

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:


a shed in need of paint
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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.