...

View Full Version : Issues with wrapping text around image



brianhevans
09-11-2007, 09:00 PM
I have a content region that I would like to have an image in the left upper corner and the text to wrap around it.

------------- texttextexttext
| image image | texttexttextte
| image image | texttexttextte
| image image | texttexttexttex
| image image | texttexcttexct
-------------- texttexttexttex
this is more text more text etc

So you get the idea. I have the text starting where I want and the image where I want but I can't get them to overlap each other where one another has the 'free space'. Do this make sense? Have a look at the link below.
http://www.chiropracticcares.com/newSite/aboutUs.html

-Brian

Jutlander
09-11-2007, 09:18 PM
Add a class to the image and float it left. You might want to add some margin to the class also.


.image-left {
float: left;
margin-right: 8px;
}

brianhevans
09-11-2007, 10:01 PM
that worked great! Now I have this space between the top section and bottom. Not sure why I can't get rid of it...

New Link:

http://www.chiropracticcares.com/newSite/aboutUs.html

CSS:

/* Column Two - Alternate */

#col-two-alternate {
float: left;
width: 760px;
}

#col-two-alternate .boxed {
margin-bottom: 10px;
}

#col-two-alternate .boxed .title {
height: 20px;
padding: 10px 0 0 10px;
background: url(images/img07.gif) no-repeat;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 11px;
color: #FFFFFF;
}

#col-two-alternate .boxed .content {
padding: 19px 150px 0 19px;
background: #E5ECED url(images/img08.gif) no-repeat;
border: 1px solid #528489;
border-top: none;
}

#col-two-alternate .boxed .images-left {
float: left;
margin-right: 10 px;
padding: 19px 0 0 19px;

}

#col-two-alternate .boxed .imagesContent {
padding: 19px 19px 0 235px;
background: #E5ECED url(images/img08.gif) no-repeat;
border: 1px solid #528489;
border-top: none;
border-bottom: none;
}


#col-two-alternate .boxed blockquote {
background: #E5ECED url(images/img08.gif) repeat-x;
}


Thanks a bunch for any help!

jlhaslip
09-11-2007, 10:27 PM
try this:

#col-two-alternate .boxed .imagesContent {
padding: 19px 19px 1px 235px;
background: #E5ECED url(images/img08.gif) no-repeat;
border: 1px solid #528489;
border-top: none;
border-bottom: none;
}

Don't know why, but it removes the white band.

brianhevans
09-11-2007, 10:50 PM
Is there a way to remove that space now between the two text sections?

btw, thanks for the help!

jlhaslip
09-12-2007, 03:15 AM
I'll have another look. might need to scoop the file again.

*edit*
You can either reduce the margin-bottom in the first rule, or add a specific value in the p rule as follows. Your choice.

p, blockquote, ul, ol {
margin-bottom: 2em;
line-height: 1.6em;
}

p {
margin-bottom: 10px;
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum