How can I use a positioning method to lay elements next to each other?

[Doctor_Varney]

Here is a screenshot of the basic layout...



You will see the content area lain out, ready to recieve the images and paragraph text.

Here is the intended result, illustrated with a graphical dummy layout...


And here is the code for trying to position the pictures and paragraph. It's not working out, except through trial and error and is not making sense to me.

The mark-up

<div id="content_wrap">
					<div id="EVP">
						<img 
						class="EVP001"
						src="../assets/events/evp001.jpg" 
						alt="EVP2" />
						<img 
						class="EVP002" 
						src="../assets/events/evp002.jpg" 
						alt="EVP2" />
						<img 
						class="EVP003" 
						src="../assets/events/evp003.jpg" 
						alt="EVP3">
					</div>
</div>

The CSS

/*******************
IMAGE PLACEMENT
********************/
#EVP img {position:absolute;}
.EVP001{left:0%;margin:2% 0 0 0;}
.EVP002{left:45%;margin:2% 0 0 -113px;}
.EVP003{left:85%;margin:2% 0 0 -80px;}
.EVP004{margin:0 0 0 0;}
.EVP005{margin:0 0 0 0;}
.EVP006{margin:0 0 0 0;}
.EVP007{margin:0 0 0 0;}
.EVP008{margin:0 0 0 0;}
.EVP009{margin:0 0 0 0;}

Finally - here is the exact result of the code cited above, using dummy images for now...



It's okay, but is only the result of jiggling the numbers to make it fit. I don't know what I'm doing, or why and as a result, not learning anything from it.

The main thing is, I do not understand why I cannot get the elements (or the DIV, #EVP) to nest inside the #content_wrap DIV, when I use position:absolute.

When I use position:relative, instead of :absolute, the elements WILL nest, but from thereon, nothing I do makes any sense; it's just random, hit and miss changing of numbers until something fits. I'd like very much to understand what is going on and why.

Additionally, float:left & :right don't work properly in this method, either. I thought I could float the first one left, position the middle one 50% (then pull it back with a negative margin), then float the last one right. But no, the right-most image just flies off the page. Seemed like a good idea at the time. It made sense to me, but sadly, not good enough.

So what would be the correct (or most reliable) method of evenly spacing these images and paragraphs, within the #EVP DIV? I'm sure I could use a standard-sized margin, if all the images were one size, but their widths & heights vary and this is what's making it complicated.

Can anyone help?

Many thanks,

Doctor V

[abduraooft]

The main thing is, I do not understand why I cannot get the elements (or the DIV, #EVP) to nest inside the #content_wrap DIV, when I use position:absolute.

Apply floats to the images instead, so that you may clear your floats to stretch your container.

[Doctor_Varney]

Originally Posted by abduraooft

Apply floats to the images instead, so that you may clear your floats to stretch your container.

Floats.... Yes... I understand. They will push two elements, right/left, respectively... but...

Clear floats to stretch my container...??? Please could you clarify?

The container is already 600px wide. How can I get an equal margin between the images?

I don't fully understand the clear: command, to use it effectively.

Is there a float:middle command I could use? I just don't know what to do with the middle image, to center it.

Thanks,

Doctor V

[abduraooft]

See the sticky http://www.codingforums.com/showthre...640#post617640

[Doctor_Varney]

Originally Posted by http://www.positioniseverything.net/easyclearing.html

When a float is contained within a container box that has a visible border or background, that float does not automatically force the container's bottom edge down as the float is made taller.

This person obviously knows more than I do, but is talking about "floats" as entities, rather than as a behaviour. This confuses me, slightly. Evidently, my entire thought process needs adjustment.

Thanks for the links, Abduraooft. I'll have to go away and study this properly, until it makes sense to me.

[abduraooft]

They refer "floats" as simply floated elements (elements having a float:left/right applied in their style/CSS).

[Doctor_Varney]

Ah, ok. Thank you!

Got some studying to do... This may take me some time...

[Doctor_Varney]

AH-HA! Got it (I think). And in significantly less time than I expected. One surmises one might be cooking on gas, at this very minute... Though, watch this space for cries in the wilderness, should the wind blow out my little stove... Anything can happen now...

[abduraooft]

Is there a float:middle command I could use? I just don't know what to do with the middle image, to center it.

Either float three of them to left (If the container has no extra space when it occupies 3 images + their margin and paddings ).

Otherwise do it like

div.wrapper{
clear:both;
text-align:center;
}
img.left{
float:left;
}
img.right{
float:right;
}

<div class="wrapper">
  <img src="path1" class="left" />
  <img src="path3" class="right"/>
  <img src="path2" />
</div>

PS: Always place the floated elements before their non-floated siblings in markup order.

[Doctor_Varney]

Would you mind checking this out...?

I have done this:

HTML
<img class="EVP001" src="../assets/events/evp001.jpg" alt="EVP2" />
<img class="EVP002" src="../assets/events/evp002.jpg" alt="EVP2" />
<img class="EVP003" src="../assets/events/evp003.jpg" alt="EVP3" />

<div id="caption_split">
 |    <p class="EVP001">...Text...</p>
 |    <p class="EVP002">...Text...</p>
 |    <p class="EVP003">...Text...</p>
</div>
_____________________________________________________________
CSS
/************************
Image Class Instructions
*************************/
/*Row One*/
.EVP001{width:116px;float:left;}
.EVP002{width:227px;float:left;margin-left:45px;}
.EVP003{width:161px;float:right;}

/*Row Two*/
.EVP004{clear:both;width:100px;float:left;}
.EVP005{width:225px;float:left;margin-left:93px;}
.EVP006{width:105px;float:right;}

/*************************
Paragraph Width Instructions
**************************/
#caption_split{clear:both;}
#caption_split p {font-size:0.7em;text-align:left;padding-bottom:1em;}

Which gets me this result:


It's different to yours, Abduraooft, but it seems to work. More importantly, I understand why it works. I'm pleased with it, because the right float ensures the right-most image is exactly the furthest right it can be, inside the #container_wrap. Does it seem correct to you?

[abduraooft]

Does it seem correct to you?

Sorry, I can't get the correct picture from it. In your CSS, you have 6 selectors EVP001-006, but in html, you have repeatedly assigned the same class to paragraphs.

As I told in my above post, it's a tough task to effectively center a floated element by applying some margin. So I left the image to be aligned in the center as such, with no floats and margins and then applied the text-align property to its container(which is enough to center any inline element).

I see 6 images in your screen shot, so it's not clear from your code. Could you post the complete code? (Or a sample link would be better)

[effpeetee]

Just in case it might be useful. It puts images side by side.

Here it is.

Frank

[Doctor_Varney]

Originally Posted by abduraooft

Sorry, I can't get the correct picture from it. In your CSS, you have 6 selectors EVP001-006, but in html, you have repeatedly assigned the same class to paragraphs.

That is because I intended the paragraph width and float behaviour to exactly mirror those of the images. So the same class is used for both image and text and positions them exactly in line with each other. What you're seeing there, is a snippet of code, whereby the 4, 5, 6 is missing - but it is there in the real HTML document.

I have made a lot of changes since posting the above, though.