Jump to content

just one CSS question, please?


Nyla

Recommended Posts

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!
Link to comment
Share on other sites

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 by hansford
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

I apologize in advance for such a dumb newbie question :tease-03:

 

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:post-173615-0-83826300-1417229117_thumb.jpg

 

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 :happy-04:

 

<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 :stoopid: ">
<img src="3.jpg">
</div>
 
<div style="no style, ran out of styling cream :stoopid: ">
<img src="4.jpg">
</div>
 
THANK YOU!!!! :-*
Link to comment
Share on other sites

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>
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

<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 by Nyla
Link to comment
Share on other sites

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>
Link to comment
Share on other sites

 

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

Link to comment
Share on other sites

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>
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.