just one CSS question, please?

[Nyla]

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!

[hansford]

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

[Nyla]

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):

 

[maxxd]

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.

[Nyla]

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!!!!

[Psycho]

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>

[Nyla]

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?

[ch4rlie]

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.

[Ch0cu3r]

Topics merged. @Nyla do not create new topics for the same problem. 

[Psycho]

 

<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>

[Nyla]

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.

[Nyla]

Topics merged. @Nyla do not create new topics for the same problem. 

Okay moderator, you're right. My bad. 

[Nyla]

<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

[hansford]

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>

[Nyla]

 

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

[kicken]

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>