Positioning issue's

[ferdy]

Hi people, I'm new around here. I am making a site for myself and am having trouble with positioning 3 divs next to eachother. The problem is not actually getting them next to eachother though, I managed to do that quite easily. No, my problem is that they I can't get them spaced out the way I want them to.

 

The middle one of the three has a fixed width of 940 pixels and should be in the center of the page. The other 2 divs are of variable length. Now, I figured that simply giving the center one margin-left: auto and margin-right: auto would do the trick for me, but no such luck.

 

The code:

 

test

test

 

The url is ferdy . sohosted . com / ferdy

 

And the place where it goes wrong is the footer of my site. Also, yes I am aware that inline styles are evil, they are just there untill I get it fixed

[falkencreative]

I may be understanding you wrong... but here is what I did to adjust things:

 

-- Middle div:

-- removed "float: left"

-- changed "min-width" to "width"

 

-- right div:

-- added "position:relative" and "top: -175px;" to move it into position

 

This has only been tested on Firefox, so I'd suggest making the changes and then coming back here if you are still having issues on other browsers.

[ferdy]

Thanks for your help, it's working in Firefox and Chrome for me, but in IE it makes the center div off-center(die IE, die! ).

[falkencreative]

What content are you trying to place in these divs? Perhaps it would make more sense to know that, in case the code could be adjusted to make things simpler.

[falkencreative]

OK, try this instead:

 

I moved the right div up in the code, so there is no longer any need for the position: relative and changing of the top value. Also, I added text-align:center to the wrapper div, to compensate for the margin: 0 auto; It worked for me in Firefox and IE, though I didn't actually plug it into your website, so you'll need to check that.

 

left

right

center

[PicnicTutorials]

OK, try this instead:

 

I moved the right div up in the code, so there is no longer any need for the position: relative and changing of the top value. Also, I added text-align:center to the wrapper div, to compensate for the margin: 0 auto; It worked for me in Firefox and IE, though I didn't actually plug it into your website, so you'll need to check that.

 

left

right

center

 

I didn't even see that you had the solution before I worked on it. Same thing I did - works in all!

[Wickham]

Two correct answers :/ but it's worth noting that it only works when the two side divs are the same width (or as in this case have no defined width and have the same length of text) Try it with "teeeeeest" in the left div and "test" in the right div in a large enough screen resolution (I reduced the middle div to 900px to see the effect in my 1024*768px resolution).

 

IE centers the middle div in the space between the two side divs (which is not central on the page if the side divs have unequal width) while Firefox centers in the whole page (which means the center div is closer to one side div than the other if they have unequal width).

 

See item 6 here in IE7 and then in Firefox:-

http://w ww.wickham43.net/threecolumns.php

which shows the effect if the side divs are unequal.

[falkencreative]

Two correct answers :/ but it's worth noting that it only works when the two side divs are the same width (or as in this case have no defined width and have the same length of text) Try it with "teeeeeest" in the left div and "test" in the right div in a large enough screen resolution (I reduced the middle div to 900px to see the effect in my 1024*768px resolution).

 

IE centers the middle div in the space between the two side divs (which is not central on the page if the side divs have unequal width) while Firefox centers in the whole page (which means the center div is closer to one side div than the other if they have unequal width).

 

I was under the impression that I tested that... I'll have to double check.

[Wickham]

It's OK as he has it with both divs with no width and with the same text "test" so you wouldn't notice. I just made the point in case he adds different text or width later.

[ferdy]

Well, it indeed works in Firefox, but as Wickham said, if the two side divs change lenght, it gets screwed up again in IE.

 

As for the content I want to place there... well nothing really at the moment. I have just read several articles about how placing content in the footer is actually becoming a good idea. So I just want them there in case I find something to place there. It also seemed a nice way of getting some more CSS practice, but yeah, try as I might I can't get it done

Edited January 17, 2009 by ferdy

[falkencreative]

Well, it indeed works in Firefox, but as Wickham said, if the two side divs change lenght, it gets screwed up again in IE.

 

As for the content I want to place there... well nothing really at the moment. I have just read several articles about how placing content in the footer is actually becoming a good idea. So I just want them there in case I find something to place there. It also seemed a nice way of getting some more CSS practice, but yeah, try as I might I can't get it done

 

I can understand wanting to add footer text inside the main 940px area (what is currently the center div) but I really can't see why you'd want to add text to the far left/right. If a user is using a smaller screen size (1024x768, for example), text outside your main content area will force additional scrolling. That's why I was asking about what sort of content you intended to put in that area.

[Wickham]

If the container has a fixed width and two side divs have unequal width you need to use item 7 here to position the middle div equally between them (but not centered in the page):-

http://w'>http://w ww.wickham43.net/threecolumns.php

which means that you have to state a width for each side div, you can't leave them flexible, and then the middle div has a calculated margin-left.

 

If the container is flexible to 100% and has no stated width like your div, then you have to use position: relative for the container and position: absolute for the two side divs if they have unequal width. It looks odd because the middle div is central on the page in both IE and Firefox but is closer to one side div than the other. Use 1024*768 resolution with this code:-

style="float:left;background-color:red; position: absolute; top: 0; left: 
0;">teeeeest

test



Side divs have no width but different widths of text (or different stated 
widths). Middle div centers on the page in both IE and Firefox which 
means that it's closer to one side div than the other. Use 1024*768 
resolution to see the effect best.

 

Look at the 3 examples at the bottom of the page in IE7 and in Firefox to see the difference (use 1024*768 to see the effect best):-

http://w ww.wickham43.com/forumposts/ferdy090117.html

[ferdy]

Ok, that indeed works. After seeing my site in 1024*768 for the first time however, I do think it'd be a wiser idea to not go through with that idea. There is just no room at that resolution. I have to admit, I tend to forget about different resolutions, and it seemed like a nice idea with my nice 22" screen with its 1680*1050 resolution.

 

So, like Falkencreative said, it would just be better to place any content I need in the footer in that 940px area. Thanks for all your help, and I apologize for making you 2 put in all this effort to help me, only to have me discover it just won't work out and thus not using it.