Jump to content

Positioning issue's


ferdy

Recommended Posts

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  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.

Loading...
×
×
  • Create New...