18 replies [Last post]
deek
Offline
newbie
Last seen: 16 years 17 weeks ago
Joined: 2005-08-09
Posts: 10
Points: 0

I am building a site with a centered container with a header and 2 or 3 columns. Should I position everything in the container with relative or absolute positioning? Thanks

BonRouge
BonRouge's picture
Offline
Enthusiast
Sendai, Japan
Last seen: 13 years 10 weeks ago
Sendai, Japan
Timezone: GMT+9
Joined: 2005-07-10
Posts: 237
Points: 0

centered container

Relative positioning and floats.

deek
Offline
newbie
Last seen: 16 years 17 weeks ago
Joined: 2005-08-09
Posts: 10
Points: 0

centered container

Will I be able to create a header and a footer with relative positioning. Also, will I have to set the width of each column?

BonRouge
BonRouge's picture
Offline
Enthusiast
Sendai, Japan
Last seen: 13 years 10 weeks ago
Sendai, Japan
Timezone: GMT+9
Joined: 2005-07-10
Posts: 237
Points: 0

centered container

Basically...

container - fixed-width, position:relative, margin:auto

header
left float - fixed-width
right float - fixed-width
centre content - left/right margins the same as the float widths
footer - clear:both

close the container

example

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

centered container

position:relative isn't really needed, the default value, static will most likely be fine.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

centered container

People tend to slap on position relative just for the sake of it although it's the 'Magic Bullet' for IE and fixes certain rendering problems it also has the opposite effect and can cause problems as well, it is not, contrary to manys belief, the default positional property for block level elements.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

deek
Offline
newbie
Last seen: 16 years 17 weeks ago
Joined: 2005-08-09
Posts: 10
Points: 0

centered container

I tried a centered 2 column layout. I had the left side and the main content positioned absolutely ans for some reason the left box is outside of the container or wrapper. Whats going on?

BonRouge
BonRouge's picture
Offline
Enthusiast
Sendai, Japan
Last seen: 13 years 10 weeks ago
Sendai, Japan
Timezone: GMT+9
Joined: 2005-07-10
Posts: 237
Points: 0

centered container

I'd recommend not using absolut positioning for your layout.
Just an idea, but... you could try my earlier suggestion.

deek
Offline
newbie
Last seen: 16 years 17 weeks ago
Joined: 2005-08-09
Posts: 10
Points: 0

centered container

Seems like my best bet. I was just curious of why it was positioning outside of the div

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 3 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

centered container

If you are going to use absolute positioning to layout major page elements, not usually a good idea, then the parent must be positioned. That is, it must be position: relative|absolute|fixed. In the case of IE, it must also be dimensioned (not usually a problem).

So make the wrapper div {position: relative;} to provide the proper reference for the AP elements.

[edit] Why can't the spell checker fix wrong words too? [/edit]

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

deek
Offline
newbie
Last seen: 16 years 17 weeks ago
Joined: 2005-08-09
Posts: 10
Points: 0

centered container

Thanks,

You guys have helped a lot. I haven't been able to get answers anywhere else. Plus I'm fairly new to this.

Chris

deek
Offline
newbie
Last seen: 16 years 17 weeks ago
Joined: 2005-08-09
Posts: 10
Points: 0

centered container

The site I am working on is a career services site where I post jobs for the local companies. The local job postings page could be very long. How do I let the container adjust it height to fit the number of job posting?

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

centered container

Don't specify a height - which means the default value (i.e. height:auto).

deek
Offline
newbie
Last seen: 16 years 17 weeks ago
Joined: 2005-08-09
Posts: 10
Points: 0

centered container

When i specify height as auto the container only covers the header. I stops before my #left and #maincontent portions of the page.

deek
Offline
newbie
Last seen: 16 years 17 weeks ago
Joined: 2005-08-09
Posts: 10
Points: 0

centered container

would a clear div work?

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

centered container

You can set an overflow value other than visible on the container (overflow:hidden is considered the best supported) or use some cleared content beyond all your floated content - so yes a clearing div, or the .clearfix solution.

.clearfix:after {
content: '.';
display: block;
clear: both;
height: 0;
visibility: hidden;
}

deek
Offline
newbie
Last seen: 16 years 17 weeks ago
Joined: 2005-08-09
Posts: 10
Points: 0

centered container

Will it work with absolutely positioned elements?

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

centered container

Ah, no. There is no way to get something to expand to surround an absolutely positioned descendent. That, afterall is the point of it being absolutely positioned.

To get container to expand and surround its descendents, you need to go back to bon rouge's original suggestion and use floats.

deek
Offline
newbie
Last seen: 16 years 17 weeks ago
Joined: 2005-08-09
Posts: 10
Points: 0

centered container

I see. Now I am starting to understand it. Basically our web designers backed up and I am taking on addtional work. Its a learning process.