what css effects do i need to apply to my list to get it so that the bullet points line up right of the images (like the bottom picture), instead of below the images (like whats currently happening in the top picture)? thanks in advance! <div class="prods"> <img src="pics/cases_thumb.gif" /> <ul> <li>asdf</li> <li>asdf</li> <li>asdf</li> </ul> </div> <div class="prods"> <img src="pics/cases_thumb.gif" /> <ul> <li>asdf</li> <li>asdf</li> <li>asdf</li> </ul> </div> <div class="prods"> <img src="pics/cases_thumb.gif" /> <ul> <li>asdf</li> <li>asdf</li> <li>asdf</li> </ul> </div> <p class="clrflt"> </p> Code (markup): .prods { float: left; } .clrflt { clear: both; height: 0px; margin: 0px; } Code (markup):
give this a try: .prods ul{ display: inline; } .prods img{ float: left; margin-right: 20px; } Code (markup):
This code will work, just replace "your-image.jpg" with your own image: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Some Stuff</title> <style type="text/css"> div.one { float:left; width:400px; } ul.list { background: url('your-image.jpg') left center no-repeat; margin:0; padding:0 0 0 70px;} ul.list li { display:block; margin:0; padding:0; list-style-type:none; } </style> </head> <body> <div class="one"> <ul class="list"> <li>asdf</li> <li>asdf</li> <li>asdf</li> <li>asdf</li> <li>asdf</li> <li>asdf</li> </ul> </div> <div class="one"> <ul class="list"> <li>asdf</li> <li>asdf</li> <li>asdf</li> <li>asdf</li> <li>asdf</li> <li>asdf</li> </ul> </div> </body> </html>
I would just use float on both the ul and the img. Replace your CSS with this: .prods {float: left; margin-right: 30px;} .prods img, .prods ul {float: left;} Code (markup):
If you had just one div with an image and a ul in it, the img would be above the ul because the ul is a block and creates a newline. So those suggesting floating the ul and image inside are correct, but you will also want to set a width on those divs too.
so things are coming together but i need to improve the alignment so it looks like the second attached image, instead of the first. any suggestions? #content { margin: 0 0 0 200px; padding: 5px; width: 680px; min-height: 550px; height: auto; } .affiliate { margin: 5px; padding: 0px; min-width: 200px; background-color: #00FF00; } .affiliate img { float: left; margin: 0px; padding: 0px; } .affiliate ul { display: inline; float: left; margin: 0 20px; padding: 0px; list-style-image: none; font-size: 12px; } .affiliate ul li { font-size: 12px; } .affiliate ul li a:link { color: #000000; } .affiliate ul li a:visited { color: #000000; } .affiliate ul li a:hover { text-decoration: none; color: #FFFFFF; } .clrflt { clear: both; height: 0px; margin: 0px; } Code (markup): <div class="content"> <div class="affiliate"> <img src="pics/cases_thumb.gif" /> <ul>Guitar Cases <li><a href="#" target="_blank">Hard Shell Cases</a></li> <li><a href="#" target="_blank">Coffin Cases</a></li> <li><a href="#" target="_blank">Gig Bags</a></li> <li><a href="#" target="_blank">Bass Cases</a></li> <li><a href="#" target="_blank">Flight Cases</a></li> </ul> </div> <div class="affiliate"> <img src="pics/jazz_thumb.jpg" width="87" height="90" /> <ul>Recommended Jazz Guitars <li><a href="#" target="_blank">Gibson ES175</a></li> <li><a href="#" target="_blank">Ibanez AS103</a></li> <li><a href="#" target="_blank">Gibson ES339</a></li> <li><a href="#" target="_blank">Ibanez AF75</a></li> <li><a href="#" target="_blank">Epiphone Casino</a></li> </ul> </div> <p class="clrflt"> </p> <div class="affiliate"> <img src="pics/blues_thumb.jpg" width="34" height="90" /> <ul>Recommended Blues Guitars <li><a href="#" target="_blank">Fender Telecaster Deluxe</a></li> <li><a href="#" target="_blank">Gibson Les Paul Standard</a></li> <li><a href="#" target="_blank">Epiphone Sheraton II</a></li> <li><a href="#" target="_blank">Acoustic Martin-000 Clapton Signature</a></li> <li><a href="#" target="_blank">Goldtone Beard Signature Resonator</a></li> </ul> </div> <div class="affiliate"> <img src="pics/stand_thumb.jpg" width="30" height="50" /> <ul>Other Stuff <li><a href="#" target="_blank">Single Guitar Stands</a></li> <li><a href="#" target="_blank">Multiple Guitar Stands</a></li> <li><a href="#" target="_blank">Folding Guitar Stands</a></li> <li><a href="#" target="_blank">Amplifiers</a></li> <li><a href="#" target="_blank">Effects</a></li> <li><a href="#" target="_blank">Accessories</a></li> </ul> </div> <p class="clrflt"> </p> </div> Code (markup):
thanks for trying but that does not seem to have done the trick. things are misaligned in different ways when i apply that code.
jwitt98 is on the right track: to make things look like they are lining up, you make your floated .affiliate boxes a set width. That way, the boxes with the less-wide ul's look just as wide as the ones with the wider menus. jwitt suggested min-width prolly because then if for some reason your box's content is wider, the .affiliate box can grow. But I'd just say, stuff it, give them a straight width. That way you'll catch IE6 too (who doesn't know min-width). OR you could set a width (or min width except for IE6) on the ul's inside instead. They'd have to all be as wide as your widest possible menu, or let wider menus start wrapping their li's (some of your items are pretty long, which is different from what you posted in your first screen shot, which had short lists). Setting a width on the ul will also basically set the width of your .affiliate boxes. So, either Way should work. When dealing with floats and other weird things, go ahead and give your boxes and content different ugly background colours (not borders) to see where they are and how side they are. I do this all the time and it's great for debugging esp with floats.
i gave it a fixed width but for some reason, it still is not aligning properly. see attached. margin: 0px; padding: 0px; width: 330px; background-color: #00FF00 } Code (markup):
When your content is wider that your containing div, you will have float drops. For example: if you set a width of 330px on the floated div containing the ul and img, but the containing div is 559px or less, then one of those 330px divs will drop to the next line. Likewise, if you set the containing div to 330px and the width of the floated img and ul inside combined are greater than 330px, then your ul will drop to the next line. Since the ul is the variable width factor here, I would second Stomme poes suggestion and set a fixed width on your ul's. However, in order to do this, you will have to remove the "display: inline" property for the ul or your width setting will have no effect. Keep in mind that even if you set a fixed width on your div's and ul's, if your img width changes you could still end up with float drops so you may want to set a width on those as well unless you know they will always be the same width. PS- I did not suggest the min-width setting. It was already part of the CSS. I just left it there thinking it must be there for a reason. It's hard to tell without seeing the actual site.
thanks. it seems to me like the settings are correct to avoid the divs dropping to the next line. the page is temporarily here. please advise. thanks!
That makes thing much easier: try this: .affiliate { float:left; margin-bottom:20px; padding:0; width:340px;/*half the container width*/ } .affiliate img { float:left; height:100%;/*hold image proportions*/ margin:0; max-width:100px;/*set limit on image width*/ padding:0; } .affiliate ul { float:right;/*aligns lists better than left float*/ font-size:12px; list-style-image:none; margin:0 20px; padding:0; width:200px;/*sets width of ul and allows some breathing room*/ } Code (markup):
If I were you, i'd set each div to width: 45%; and on those images, you need to have them all the same width, which is why the ul's aren't lining up. So make all the images have the same width to them. I'd recommend editing them in photoshop or a similar program, and giving them a transparent background. For example, if you wanted the images to be 100px wide, then you'd need to open a blank photoshop document, 100px wide, with a transparent background. Open your image up in photoshop too. Either use the magic wand tool or lasso to get the picture out of the white background. Then copy the layer over to the transparent document. Save as either .gif or .png to maintain the transparency. If you need help with anything else, please don't hesitate to reply here or send me a PM!