Gamerz Posted December 9, 2009 Share Posted December 9, 2009 Okay...so here's what I'm trying to accomplish: ---------- [iMAGE ONE GOES HERE...........................] [iMAGE TWO GOES HERE...........................] [iMAGE THREE GOES HERE.....] [DESCRIPTION HERE VIA BR TAG] [DESCRIPTION HERE VIA BR TAG] [DESCRIPTION...] [iMAGE FOUR GOES HERE...........................] [iMAGE FIVE GOES HERE...........................] [iMAGE SIX GOES HERE.....] [DESCRIPTION HERE VIA BR TAG] [DESCRIPTION HERE VIA BR TAG] [DESCRIPTION...] ---------- I've noticed the thing doesn't work...so I can't exactly use it to space out my images without going to next line. Basically, I want around around 3-6 images with text per row...how would I construct that? Link to comment https://forums.phpfreaks.com/topic/184574-html-how-can-i-place-images-side-by-side-without-breaking-the-code/ Share on other sites More sharing options...
haku Posted December 10, 2009 Share Posted December 10, 2009 <div class="image"> <img src="path/to/img.jpg" alt="image" /> <p>caption</p> </div> <div class="image"> <img src="path/to/img.jpg" alt="image" /> <p>caption</p> </div> <div class="image"> <img src="path/to/img.jpg" alt="image" /> <p>caption</p> </div> <div class="image"> <img src="path/to/img.jpg" alt="image" /> <p>caption</p> </div> <div class="image"> <img src="path/to/img.jpg" alt="image" /> <p>caption</p> </div> <div class="image"> <img src="path/to/img.jpg" alt="image" /> <p>caption</p> </div> CSS: div.image { float:left; width:__px; // adjust this to the width of your images. } If you have more than three images showing up on one line, add a right margin to div.image until they space out enough to bump anything above three images down to the next row. Link to comment https://forums.phpfreaks.com/topic/184574-html-how-can-i-place-images-side-by-side-without-breaking-the-code/#findComment-974439 Share on other sites More sharing options...
Gamerz Posted December 10, 2009 Author Share Posted December 10, 2009 How do I make it to be in the middle (In other words, how can I make it float to the middle. I've tried float:none; but it then just only shows one image per row.) Link to comment https://forums.phpfreaks.com/topic/184574-html-how-can-i-place-images-side-by-side-without-breaking-the-code/#findComment-974480 Share on other sites More sharing options...
haku Posted December 10, 2009 Share Posted December 10, 2009 You cannot center floated elements. The best you can do is give a width to the container they are in, and center that container. Link to comment https://forums.phpfreaks.com/topic/184574-html-how-can-i-place-images-side-by-side-without-breaking-the-code/#findComment-974500 Share on other sites More sharing options...
Gamerz Posted December 10, 2009 Author Share Posted December 10, 2009 How do I give a width to the container they are in and center it? Link to comment https://forums.phpfreaks.com/topic/184574-html-how-can-i-place-images-side-by-side-without-breaking-the-code/#findComment-974513 Share on other sites More sharing options...
Gamerz Posted December 10, 2009 Author Share Posted December 10, 2009 Here's my code below...how do I add a width to the container they are in and center it? <html> <head> <style type="text/css"> div.image { margin-right: 0px; float:left; width:100px; // adjust this to the width of your images. } </style> </head> <body> <p> <div class="image"> <a href="lol.php"><img src="folder_icon.jpg" alt="image" style="border: 0px dashed black;" width="50" height="50"/> <p>text</p></a> </div> <div class="image"> <a href="lol.php"> <img src="folder_icon.jpg" alt="image" style="border: 0px dashed black;" width="50" height="50"/> <p>text</p></a> </div> <div class="image"> <a href="lol.php"> <img src="folder_icon.jpg" alt="image" style="border: 0px dashed black;" width="50" height="50"/> <p>text</p></a> </div> <div class="image"> <a href="lol.php"> <img src="folder_icon.jpg" alt="image" style="border: 0px dashed black;" width="50" height="50"/> <p>text</p></a> </div> <div class="image"> <a href="lol.php"><img src="folder_icon.jpg" alt="image" style="border: 0px dashed black;" width="50" height="50"/> <p>text</p></a> </div> <div class="image"> <a href="lol.php"> <img src="folder_icon.jpg" alt="image" style="border: 0px dashed black;" width="50" height="50"/> <p>text</p></a> </div> </p> </body> </html> Link to comment https://forums.phpfreaks.com/topic/184574-html-how-can-i-place-images-side-by-side-without-breaking-the-code/#findComment-974525 Share on other sites More sharing options...
FaT3oYCG Posted December 10, 2009 Share Posted December 10, 2009 A div is a box basically, go learn how to center a box! Link to comment https://forums.phpfreaks.com/topic/184574-html-how-can-i-place-images-side-by-side-without-breaking-the-code/#findComment-974597 Share on other sites More sharing options...
haku Posted December 10, 2009 Share Posted December 10, 2009 First, you have your images inside a <p> tag. This is invalid code. You can't have div tags inside <p> tags. Change your p tag to a div tag, and give it an ID. Then target that ID in your CSS and set a width to it. To center it, you can use this: margin:0 auto; Link to comment https://forums.phpfreaks.com/topic/184574-html-how-can-i-place-images-side-by-side-without-breaking-the-code/#findComment-974601 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.