Nyla Posted November 28, 2014 Share Posted November 28, 2014 Sorry for the really, really basic CSS question. (I'm asking this in the PHP forum, because so far, you've all been nice to me and haven't made fun of some of my really dumb questions.) Image #1 is in the upper left corner of my browser. Image #2 is in the upper right hand corner of my browser. How do I get Image #3 directly below Image #1 and Image #4 directly below Image #2 It should look like this: 1 2 3 4 But no matter what I do (group them into bigger divs, or make position absolute or relative, etc., etc.) what happens is that #3 and #4 get stuck between, or looks goofy. <div style="margin:0px 0px 0px 0px; float:left;"> <img src="1.jpg"> </div> <div style=" margin:0px 0px 0px 0px; float:right;"> <img src="2.jpg"> </div> <div> <img src="3.jpg"> </div> <div> <img src="4.jpg"> </div> Thank you, in advance, for helping! Quote Link to comment Share on other sites More sharing options...
hansford Posted November 29, 2014 Share Posted November 29, 2014 (edited) The moderators will move this question to the appropriate forum because it's not a php coding question. Can't tell what the rest of your layout looks like, but...you can add to the top image div: display:block; That will make the image hog the entire line and force the second div to fall beneath it. The second div will need to be floated left if you want it just underneath the image 1. Another way to do it is to put a dummy div in between the two image divs and clear the floats: <div id="clear-fix"></div> #clear-fix { clear:both; } Edited November 29, 2014 by hansford Quote Link to comment Share on other sites More sharing options...
Nyla Posted November 29, 2014 Author Share Posted November 29, 2014 Oops, sorry I didn't articulate my question very well. I didn't want just one image to commandeer an entire line. Rather, like this (I sketched an image): Quote Link to comment Share on other sites More sharing options...
maxxd Posted November 29, 2014 Share Posted November 29, 2014 Give this a try: <style> .row{ width:100%; float:none; clear:both; } .left{ float:left; } .right{ float:right; } </style> <div class='row' id='top'> <img src='this/is/image1.png' class='left' /> <img src='this/is/image2.png' class='right' /> </div> <div class='row' id='bottom'> <img src='this/is/image3.png' class='left' /> <img src='this/is/image4.png' class='right' /> </div> Basically, you're creating separate rows that span the entire width of the screen and don't float, but you're floating the two images within each of those rows. Quote Link to comment Share on other sites More sharing options...
Nyla Posted November 29, 2014 Author Share Posted November 29, 2014 I apologize in advance for such a dumb newbie question I have spent over 4 days trying to get my browser to display 4 images and CANNOT seem to wrap my brain around how to do it: Image #1: upper left hand corner. Image #2: upper right hand corner Image #3: directly below Image #1 Image #4: directly below image #2 I have tried every permutation of "float left/right," "position absolute/relative," etc., and can't make it work. This is what I want: My css code gets the first 2 images where I want them, but the remaining 2 images.... I'm drowning myself in beer right now... hellllllllpppppp <div style="margin:0px 0px 0px 0px;FLOAT:LEFT"> <img src="1.jpg"> </div> <div style="margin:0px 0px 0px 0px;FLOAT:RIGHT"> <img src="2.jpg"> </div> <div style="style=victorian era, with high heels... don't know what goes here to make it work "> <img src="3.jpg"> </div> <div style="no style, ran out of styling cream "> <img src="4.jpg"> </div> THANK YOU!!!! Quote Link to comment Share on other sites More sharing options...
Psycho Posted November 29, 2014 Share Posted November 29, 2014 Don't use "float" on ALL elements in a "row" at least one should not have a float on it to act as the 'anchor'. There are multiple ways to accomplish what you want, but similar to what you have, this is one <div style="margin:0px; float: left;"> <img src="1.jpg"> </div> <div style="margin:0px;"> <img src="2.jpg"> </div> <div style="margin:0px; float: left;"> <img src="3.jpg"> </div> <div style="margin:0px;"> <img src="4.jpg"> </div> Quote Link to comment Share on other sites More sharing options...
Nyla Posted November 29, 2014 Author Share Posted November 29, 2014 Thank you for answering, but it does not work -- it does not pin image #2 in the upper right hand corner. Image #1: pinned all the way in upper left hand corner Image #2: pinned all the way in upper right hand corner ...and then, Image #3 directly below image #1, and Image #4 directly below image #2 See, that's the problem I'm been having -- getting #1, and #2 pinned into those corners. What can I change to make that work? Quote Link to comment Share on other sites More sharing options...
ch4rlie Posted November 29, 2014 Share Posted November 29, 2014 If they're just images and not going to be like buttons or anything, just make all 4 images into one big image using Photoshop, then it will be more efficient and you will only need one div. Quote Link to comment Share on other sites More sharing options...
Ch0cu3r Posted November 29, 2014 Share Posted November 29, 2014 Topics merged. @Nyla do not create new topics for the same problem. Quote Link to comment Share on other sites More sharing options...
Psycho Posted November 29, 2014 Share Posted November 29, 2014 <div style="margin:0px;"> <img src="1.jpg"> </div> <div style="margin:0px; float: right;"> <img src="2.jpg"> </div> <div style="margin:0px;"> <img src="3.jpg"> </div> <div style="margin:0px; float: right;"> <img src="4.jpg"> </div> Quote Link to comment Share on other sites More sharing options...
Nyla Posted November 29, 2014 Author Share Posted November 29, 2014 If they're just images and not going to be like buttons or anything, just make all 4 images into one big image using Photoshop, then it will be more efficient and you will only need one div. No, I need to know the principle. They are not 'really' images -- I just tried to make it simple for question/answer's sake. It's really a logo in upper left, a FAQ | Phone | Contact thingy in the upper right, a diagram below the logo, and a paragraph with words/bs underneath the FAQ/Contact thingy. Quote Link to comment Share on other sites More sharing options...
Nyla Posted November 29, 2014 Author Share Posted November 29, 2014 Topics merged. @Nyla do not create new topics for the same problem. Okay moderator, you're right. My bad. Quote Link to comment Share on other sites More sharing options...
Nyla Posted November 29, 2014 Author Share Posted November 29, 2014 (edited) <div style="margin:0px;"> <img src="1.jpg"> </div> <div style="margin:0px; float: right;"> <img src="2.jpg"> </div> <div style="margin:0px;"> <img src="3.jpg"> </div> <div style="margin:0px; float: right;"> <img src="4.jpg"> </div> And, no, that doesn't work at all. That ends up looking like (i put dots in it to separate my illustration here): 1 2......3 ........4 Again, I'm wanting 1.........2 3.........4 This is so d*** f****n complicated it's ridiculous. I'll just do a stupid table. Edited November 29, 2014 by Nyla Quote Link to comment Share on other sites More sharing options...
hansford Posted November 30, 2014 Share Posted November 30, 2014 I just tested this code in a browser and it does what "I think you're wanting". <div style="float:left;margin:0px;"> <img src="1.jpg"> </div> <div style="margin:0px; float: right;"> <img src="2.jpg"> </div> <div style="clear:both;"></div> <div style="float:left;margin:0px;"> <img src="3.jpg"> </div> <div style="margin:0px; float: right;"> <img src="4.jpg"> </div> Quote Link to comment Share on other sites More sharing options...
Nyla Posted November 30, 2014 Author Share Posted November 30, 2014 I just tested this code in a browser and it does what "I think you're wanting". OMG OMG THAT'S IT!!!! FINALLY!!!! That's *exactly* what I wanted. Normally, I say, "I owe you a beer," but in THIS case, I owe you a MARTINI (with the full shebang -- greek olive, orange slice, and the bowl of pretzels!). Of course, I *totally* can NOT understand why it works... it looks like the "secret" is that <div style="clear:both"> which, well, I don't know, how does one even come UP with something so non-intuitive.... it is akin to, "My car won't start," and then a stranger walking up and says, "needs a 2 inch yellow wire instead of the 1 inch black wire." I'm like, Huh? What? Why? Anyway, you fixed it! THANK YOU!!! p.s. I almost slipped back into 1990, and cheated by using <table><tr><td.... LOL Quote Link to comment Share on other sites More sharing options...
kicken Posted November 30, 2014 Share Posted November 30, 2014 Simple method is just to float them all left and either let them naturally wrap in the parent or use a new row class that clears. For example: http://www.cssdesk.com/p395c Natural wrapping. <style> .gallery { /*200px for the images + 30px total margins*/ width: 230px; height: 230px; background: white; border: 1px solid black; } .gallery img { display: block; float: left; margin: 10px 0 0 10px; } </style> <div class="gallery"> <img src="http://lorempixel.com/100/100/abstract/1"> <img src="http://lorempixel.com/100/100/abstract/2"> <img src="http://lorempixel.com/100/100/abstract/3"> <img src="http://lorempixel.com/100/100/abstract/4"> </div> Using new row class: <style> .gallery2 { height: 230px; border: 1px solid black; background: white; } .gallery2 img { display: block; margin: 10px 0 0 10px; float: left; } .gallery2 img.newrow { clear: left; } </style> <div class="gallery2"> <img src="http://lorempixel.com/100/100/abstract/1"> <img src="http://lorempixel.com/100/100/abstract/2"> <img src="http://lorempixel.com/100/100/abstract/3" class="newrow"> <img src="http://lorempixel.com/100/100/abstract/4"> </div> 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.