View Full Version : Help with div tags and positioning

01-27-2012, 12:26 PM
I hope one of you kind people can help me with a problem that kept me up most of last night - no matter how I arrange the div tags for the layout below, I simply can't get image2 to align with image3 + text1.
If I make two containers, one for image1, image3 and text1, then another for image2, then float the first container left, then the second container right, I don't seem to be able to get text1 to stick to the right of image3. The separate div tags for text1 and image3 are both set to float:left, but they just sit there on top of each other, mocking me.
I know it has something to do with absolute and relative positioning, but in spite of searching the web, reading until my eyes bleed, I can't work out how to make text1 sit to the right of image3 without screwing everything else up.
I can post the code and css stylesheet, but it's now in such an ugly mess that I'm not sure it would make it any clearer and you'll all laugh at my dimwit coding :(
All I'm hoping is that someone can quickly explain 1) How to organise the div tags 2) How to set positioning so they all sit where they should.
Even a link to a tutorial / book / video which would help would be really useful.
On a more cheerful note, text2 sits where it should thanks to a clear:both function :cool:
Thank you!!!!

01-27-2012, 01:05 PM
see examples for div tag http://www.tizag.com/htmlT/htmldiv.php

01-27-2012, 01:36 PM
Thanks, but that site just explains what a div tag does, which I'm nice and easy with. My question is about how to float one main container to the left of another, but for the elements within that container to sit side by side.

01-27-2012, 02:02 PM
There are like a 100 ways to do this, so no one solution will be correct. Here's one I came up with:

<body style="padding: 20px;">

<div style="width: 100%; border: 1px solid black;">
<div style="background: red; float: left; height: 100px; width: 30%;">image 1</div>
<div style="background: yellow; float: left; height: 50px; width: 15%; clear: both;">image 3</div>
<div style="background: blue; float: left; height: 50px; width: 25%;">text 1</div>
<div style="background: orange; float: right; height: 400px; width: 25%; margin-top: -100px;">image 2</div>
<div style="background: green; float: left; height: 25px; width: 100%; clear: both;">text 2</div>
<div style="clear: both;"></div>


I used a clear to get image 3 and text 1 below image 1. Unfortunately, that puts image 2 down too low. To fix that, I added a negative top margin equal to the height of image 1.

Edited to close an open <div>

01-27-2012, 02:17 PM
You should have containers, for example, image1, text1 and image3 will be in 1 container, image 2 will be in another and footer in the 3rd. To make container 1 and 2 to float next to each other, you need to set their width, but make sure that when they are added together, they do not exceed the width you have set your website to.

So, you should make the 2nd container (image 2) float right, but in your html file, it should be BEFORE the 1st container and if you have your widths properly, container 1 shouldn't need to float: left;
example, this will make container2 float beside container1:

width: 70%;
height: 200px;
padding: 0;
margin: 0;

height: 200px;
float: right;
padding: 0;
margin: 0;

But, ONLY if you have container2 first in the html code. And I think I am also right in saying that this would also work for IE 6/7 too

Now, you should be able to use some of the same code to align the images in container1 too :)

01-27-2012, 04:14 PM
That is so cool of you both - each of your suggestions worked like a dream - a happy codey div-tag dream.
Thanks for taking the time to explain - appreciated muchly.