Centering with absolute positioning

Get Started
1

I almost found the answer to my dilemma in the thread from March 20, 2010 “confusion over page centering”. But not quite.

For reference, here is my website: www.wirestrungharp.com

My CSS #container" div (the word “wrapper” just doesn’t work for me) is this:

#container {
width: 1024px;
margin-left: 192px
}

The answer that almost worked was to do this:

#container {
width: 1024px;
margin: 0 auto;
}

But when I do that, the new problem is that when you drag the screen smaller certain items start moving around in relation to each other and it makes a hash of my design.

What I want is for the site to automatically center on whoever’s screen is displaying it, whatever size their view-area is, while also having a couple of nice design bars that go the entire width of the screen (one is grey and one is skinny orange). A look at the SitePoint website (home page, for example) shows what I want to achieve for my site.

I also don’t want the lower horizontal scroll bar to show up until the screen reaches the edges of the white area on either side of the actual content. The SitePoint page does what I want, but on my site the horizontal bar shows up almost immediately (even with the fix given above).

(BTW, the 20px right-hand padding in my #container div is to keep the vertical scroll bar from overlapping my content area on small screens. I have had two friends claim this to be a problem. I’m hoping it will go away when I get this other issue fixed, otherwise the 20px pad seems to be working).

I’m really hoping Ralph.m (who helped Jeannie on Mar 20) can help, or anyone else. Oh, and I also learned all I know (and some things I don’t know) from Ian Lloyd’s excellent “Build Your Own Site” book. I could not have gotten this far without it.

~Cynthia Cathcart

2

I figured this out my own self. (Allow me a moment of pride).

In case anyone else is curious, the secret was in my thread’s heading. I don’t think you can center a webpage the way I described and use absolute positioning.

The secret is to use the Float “command” for positioning. (I’m a novice, so I doubt my terminology is correct.) This, and then to make columns I used this CSS:

left_column { float: left; margin: 0 20px 20px 0; }
center_column { margin: 0 auto; display: block; }
right_column { float: right; margin: 0 0 20px 20px; }

You can change up the quantified pixels to get the margin you like. The margin: 0 auto is from the ‘centering’ secret that Roger shared in the earlier thread.

If you don’t have a center column, just leave that command out.

And then the other trick is to place those columns inside a containing div. I used such things as #header to set the top bar of my page, then #candycontents (as in eye-candy) to set the center, image-containing bar, and then #bodycontents for everything below that.

At least, that’s what I think I’ve done. Now, I haven’t up-loaded it yet, so we’ll see.

3

A bit too late but anyway here is my slim version for you to compare notes:

http://localhost/downloads/sp/wirestrungharp/

Ignore the background-colours they are just there to make it easier to distinguish the different DIVS.

I also removed all your position:absolute;

.

4

WHOOPS - wrong link:

http://johns-jokes.com/downloads/sp/wirestrungharp/

.

5

John, thank you! I really appreciate the time and skill you have shared with me.

Actually, it’s not too late, because one of the divs I had “programmed” still wasn’t working the way I thought it should, but your code is doing it right, naturally enough, so I will indeed study and compare what you did.

I like the thicker borders you put on my link-icons. That just works so much better, a much better user-design than what I had done. I will be taking this in, and thank you for that idea.

Nice to have your confirmation that the position:absolute was indeed the core of my problems. And an excellent first experience for me on this forum!

~Cynthia

6

'glad to be able to help, I apprecaiate the feedback looking forward to seeing your new design.

.

7

Just wanted to say that the wrapper div worked well for me (I was the March 20 questioner). I wanted a page that would be about 880px wide with some space left over on the sides - both site solutions for the harp wire site are really nice.

It was recommended to me that I work with Firefox and install the Firebug add-on so I could see the CSS as well. I did that, but when I went to look at the CSS on the two sites, I realized I don’t know how to use Firebug to see both the HTML and the CSS.

I actually have a similar need on my site for even rows of same height images and solved it nicely with a table. I am sure you guys have more elegant solutions and I would like to be able to study them and experiment with them - can you help me with how to use Firebug so I can do that?

Thanks,

Jeannie

8

Jeannie,
Thanks for your positive comments on my site. I’m going to be working on it this Friday and Saturday, using John’s ideas to see if I can make it 100% what I want. (It still runs over on one of my friend’s screens, so I’m going to really look to see how John’s CSS may fix that.)

I designed the site in Firefox. It worked very nicely. I have downloaded Firefox’s Firebug, will see if I can figure out how it works on Friday.

If you want to see the CSS from the html markup…I’m assuming you are doing “right-click, view source” to see the html. If you find the line of code that is: <link rel=“stylesheet” [etc, etc]> and then move your curser over the name of the style sheet, you’ll see you can click on it, and the CSS will open for you. Does that help, or am I confused on what you’re looking to do?

I’m tempted to try a table for those images on my index page, even though “tables are for data”. The approach I am using works, except that the middle column links sometimes don’t work and sometimes do. Maybe John has fixed that in his sample…I hope so!

9

Cynthia,

Thank you for the idea on how to see your stylesheet from View Source - View Source is what I had been reduced to using when I couldn’t figure out Firebug. I shall try your suggestion.

As to your column problem, I wasn’t sure if you were talking about tables in HTML or CSS. I bought myself a Christmas present during the December Sitepoint sales and got Everything You Know about CSS is Wrong. One of the examples was setting up a page similar to what you are doing using a table in the style sheet to set up the placement - making even rows and columns of images One of the major differences is that you have to set your HTML up in the order that it will display on the page.

Of course that may be what you are refering to here - it is just that most people have been used to trying to use tables in HTML to do placement - which is what I learned to do years ago.

Let me know if you need further info or if you figure out Firebug.

Thanks

Jeannie