command Posted January 2, 2007 Share Posted January 2, 2007 I'm basically working with a two-column page with a header and footer, navigation on the right. My CSS calls for a border on the right side of the "contents" (which basically divides the "contents" and the right-side "menu". It also calls for a border on the bottom of the "contents" area. Within the "contents" area I'd like to align an image to the left with a short caption to the right. Below that image, I'd like to align another image to the right with a short caption to the left......and continue thusly for a number of images. My problem is floating the image and keeping the captions where I want them. Unless there is enough text to wrap under the image, the images and text seem to all jam together in a mish-mash. I've tried the "clear" properties and this causes my right-hand border to break. I can separate all these images with <br> tags in the html but that's not only messy, it changes the text and image positions depending on how large any browser window is. Also, without sufficient text BELOW the last image, the last image floats down past the bottom border. I suppose I could fix all this with a table but that's really not what CSS is supposed to be all about, is it? Can anyone help?? (I can post the html and css if it will be helpful. So far there's no point in uploading this mess :-) Thanks! Colette Quote Link to comment Share on other sites More sharing options...
btrfld Posted January 2, 2007 Share Posted January 2, 2007 Hi Colette. At first glance, I'd try making each of your image/caption pieces a paragraph, giving each one the background image you want positioned properly, and give the paragraph the proper text-alignment and padding (right or left) sufficient to clear the image. That way you don't need to float them at all and they shouldn't break the content border. You might have to play with the heights a little depending on how big your captions are. But since each one has its own image, you can assign each one the proper height as well. Does that help? Quote Link to comment Share on other sites More sharing options...
command Posted January 3, 2007 Author Share Posted January 3, 2007 Hi Colette.At first glance, I'd try making each of your image/caption pieces a paragraph, giving each one the background image you want positioned properly, and give the paragraph the proper text-alignment and padding (right or left) sufficient to clear the image. That way you don't need to float them at all and they shouldn't break the content border. You might have to play with the heights a little depending on how big your captions are. But since each one has its own image, you can assign each one the proper height as well. Does that help? I tried enclosing them in <p> tags the the W3 validator told me I was full of it :-) But perhaps I wasn't doing it properly. I'll try again and see if I can figure out another way to do it. We'll see! Thank you! Colette Quote Link to comment Share on other sites More sharing options...
command Posted January 3, 2007 Author Share Posted January 3, 2007 I tried enclosing them in <p> tags the the W3 validator told me I was full of it :-) But perhaps I wasn't doing it properly. I'll try again and see if I can figure out another way to do it. We'll see! I'm sorry but I'm obviously not understanding your suggestion. Can you give me an example of the coding you're describing? So far all I've managed to do is make the image AND caption invisible <sigh>. Thanks! Colette Quote Link to comment Share on other sites More sharing options...
btrfld Posted January 4, 2007 Share Posted January 4, 2007 (edited) Hi Colette. Sorry - I've been away from the forum for a couple of days. You can see an example of what I suggest at olifields.com/colette. View the source to see the css. There are a couple of tricks in there to get around IE bugs and such. Let me know if you have more questions. I'll keep an eye out for your posts. Edited January 4, 2007 by btrfld Quote Link to comment Share on other sites More sharing options...
carbonize Posted January 7, 2007 Share Posted January 7, 2007 Have you got a link? I have a couple of ideas. idea 1 ><div> <img src="image1.jpg" alt="" style="float: left;">TEXT HERE </div> <div> <img src="image2.jpg" alt="" style="float: right;">TEXT HERE </div> idea 2 ><img src="image1.jpg" alt="" style="float: left;">TEXT HERE <br style="clear: both;"> <img src="image2.jpg" alt="" style="float: right;">TEXT HERE <br style="clear: both;"> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.