I am supposed to do the following, I know how to do it using tables, but would like to do so using css and floats if possible. paragraph here, yada yada yada Image Another paragraph to the left over which will continue on with here the bla ditty bla and continue down here, with all of the text in line, but not wrapping under the image. and another paragraph down here, clear of the divs. I know how to do the clearing of the divs part, but the part about not having the text on the paragraph to the right of the image wrapping is a different issue.
I'd put the image and the paragraph in a DIV container, then float the image to the left, like so: <div> <img class="float" src="#" width="200" height="150" alt="Alternative Text"> <p> Another paragraph to the left over which will continue on with here the bla ditty bla and continue down here, with all of the text in line, but not wrapping under the image. </p> </div> Code (markup): .float { float: left; } Code (markup):
I already tried floating the image to the left. Unfortunately, that causes the text to wrap under the image. I've also tried floating the text to the left, then clearing the floats below the two, still wrapped the text past the bottom of the image. I've also tried adding a large margin to the bottom of the picture, but this requires an individual ID for each picture (rather than a class), and any time I were to change the text, I'd need to change the margin. I guess there are some times when tables are better than divs+css.
I'll do you one better. I'll show you the page it's self. http://pioneergreensdentistry.com/ The images should be off to one side, with text on the other, not wrapping around it. Sorry about the text wrapping in my opening post. I just noticed that it didn't stay formated as I was hoping.
That's ok. I'm about to head to bed, so I'll take a look at your page once I wake up (and get cracking on the other threads I've negelected here and at SitePoint).
heres some code I've used to achieve I think what you are going for... i remember having a hard time making it work in all browsers but this worked <style> div#photo { width: 25%; float:left; padding: 0; margin: 0; } div#photodesc { margin: 0px; padding: 0px; font-size:small; float:right; width: 73%; } .photospace { clear: both; width:auto; display:block; line-height:20px; } </style> <div id="photo"> <img src=""> </div> <div id="photodesc"> This is some random text ... random text ... random text ... This is some random text ... random text ... random text ... This is some random text ... random text ... random text ... This is some random text ... random text ... random text ... This is some random text ... random text ... random text ... This is some random text ... random text ... random text ... This is some random text ... random text ... random text ... This is some random text ... random text ... random text ... This is some random text ... random text ... random text ... This is some random text ... random text ... random text ... </div> <div class="photospace"> </div> Code (markup):
Thanks for the code DatR. I'm looking it over and already have a few questions. Is there a benefit, other than clarity, to specifying div before the #? Also, it seems that the widths add up to more than 100%. What was the purpose of that in the code.
no real reason for the div before the # I would actually just take it out now that I am looking at it again the widths add up to 98%? where does it come to more than 100?
Okay, looking the code over, it does look interesting, however as my images aren't a set width I'd have to have an individual style for each individual image. At least once that style is set, I wouldn't have to change it every time I make a change to the text, like I would with the bottom-margin on the image trick I was trying for a while, and I'd be able to avoid using the table tag for layouts.