Jump to content

Multiple Images In A <div>


NikMac
 Share

Recommended Posts

Hi, I hope this is easy to fix - it's got me stumped...I have a column which I called #main. One of the lines of code there is:

#main img { margin: 0px 10px 3px 10px; position: relative; float: right; border: 1px solid  #f5f5f5; padding: 1px; background: #FFF }

This image will float to the right of my text as it should. However, I can't figure out what to do when I want to add another image (either floating left or centered). I tried creating another div for the image, but this new div wouldn't go into the #main column. Any ideas on what I can do here?Thanks.

Link to comment
Share on other sites

are you trying to create a three columned like setup with text in the middle and pictures on the left and right?
That's sort of the idea. It's a two-column page - a sidebar and content. The content column contains text with images floating on the right (the text wraps around the images). If I try to add another image, it will also float to the right - I'm not sure how to make it float to the left or center of the content column.
Link to comment
Share on other sites

well, a good way to setup a sidebar/content layout is by creating three divs. you have your #container div at 100% (or you could just use the <body> tag). then you would have your #sidebar div say at 25% width, floated left. Then you have your #content div, and the trick is giving this a left-margin of 25%, so it will slide over just far enough to the right to stay out of the way of your left sidebar.Within your #content div you can now arrange your images and wrapping text.edit: oh yeah, using %'s keeps your layout fluid.

Edited by thescientist
Link to comment
Share on other sites

You don't have to set all of the image properties - you can create classes, so that you can have some images float left, some right, some in the middle or whatever, or you can give images unique ids so you can style them individually. For example, to add a class:css:#main img {position: relative;border: 1px solid f5f5f5;}.right {float: right;}.left {float:left;}html:<img class="left" src="image.jpg" alt="image" /><img class="right" src="another_image.jpg" alt="another image" />Both of these images will have the default position:relative and border for images in the #main div, but their float will be different. You can have as many images as you like with each class. Alternatively, if you have one unique image, you can just give it an id and style it uniquely. The other possibility is to use inline styles, such as:<img style="float:left;border:#f5f5f5;" src="third_image.jpg" alt="third image" />This is generally advised against as it is best to separate style and content as much as possible, but on the odd occasion it is useful for singleton elements that need special styling.

Link to comment
Share on other sites

Thanks for the quick replies. A few more questions...-How would I go about centering the image? I've tried "text-align:center" and "margin: 0 auto" but none of those worked.-Using classes for the float is a great idea... but it doesn't work well when I setup my page like this:

<h2>example</h2><p><img/>text</p>[second image here]<h2>another heading</h2>

In this case, the second image floats beside the second heading... is it possible to keep the second heading *below* the second, floating image without creating a new <div>?Again, thanks for the fast replies. It's really helping.

Link to comment
Share on other sites

this <img/> isn't going to do anything helpful.
Sorry for not clarifying - that's just an example of the page setup I have. Of course, that tag does link to an image. My question is if there is a way to make the second image float to the left or right and not overlap with the second heading/text (without creating a new <div> for the second heading/text).
Link to comment
Share on other sites

this is one way<style type="text/css">.main img { margin: 0px 10px 3px 10px; border: 1px solid #f5f5f5; padding: 1px; background: #FFF }.img_left {float:left;}.img_right {float:right;}div.img_middle { text-align:center;}.clear {clear:both;}</style><div class="main"><img src="image1.gif" alt="" class="img_left" /><img src="image2.gif" alt="" class="img_right" /><div class="img_middle"><img src="image3.gif" alt="" /></div><!--removing centre image to be replaced with text at bottom--><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. </p></div>and<div class="main"><h2>example</h2><img src="image1.gif" alt="" class="img_left" /><img src="image2.gif" alt="" class="img_right" /><h2 class="clear">another heading</h2><!--<div class="img_middle"><img src="image3.gif" alt="" /></div>removing centre image to be replaced with text at bottom--><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. </p></div>

Edited by dsonesuk
Link to comment
Share on other sites

Thanks, Dsonesuk, adding "clear: both" to the header fixed it.One last question - I can't figure out how to center the image. Here is the relevant code:

#main img { margin: 0px 10px 3px 10px; position: relative; border: 1px solid  #f5f5f5; padding: 1px; background: #FFF }.middle {text-align: center; margin: 0px 10px 3px 200px !important}

As you can see I can get around it by adding a margin to the "middle" class - but why doesn't "text-align: center;" work? I've also tried "margin: 0 auto". It just appears on the left, not centered.Turning ".middle" into "#middle" and wrapping a <div id="middle"> around the image doesn't work either.EDIT - never mind, turning .middle into an id did work after all. This finished code seems to work:

#main img { margin: 0px 10px 3px 10px; position: relative; border: 1px solid  #f5f5f5; padding: 1px; background: #FFF }#middle {text-align: center}

Thanks for all the help, everyone.

Edited by NikMac
Link to comment
Share on other sites

that is exactly what i had in my first post??div.img_middle { text-align:center;}<div class="main"><img src="image1.gif" alt="" class="img_left" /><!--left--><img src="image2.gif" alt="" class="img_right" /><!--right--><div class="img_middle"><img src="image3.gif" alt="" /></div><!--centre-->

Edited by dsonesuk
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...