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;
}