Tek-Tips is the largest IT community on the Internet today!
Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!
-
Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
Table layout : be gone! How to do this with divs? 3
- Thread starter dkdude
- Start date
BillyRayPreachersSon
Programmer
Tricky one... I had a requirement to do this a while back, and at the time, the only way I'd found (aside from using tables) was to use "quirks mode" (for IE) by omitting the DOCTYPE, and using some quirky CSS.
You can see the site for yourself here:
If you find a more up-to-date way of doing this without tables that will have a valid DOCTYPE, I'd love to know.
Hope this helps,
Dan
Coedit Limited - Delivering standards compliant, accessible web solutions
[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
You can see the site for yourself here:
If you find a more up-to-date way of doing this without tables that will have a valid DOCTYPE, I'd love to know.
Hope this helps,
Dan
Coedit Limited - Delivering standards compliant, accessible web solutions
[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
BillyRayPreachersSon
Programmer
Oh. After viewing the source, I found that there had to be 1 single outer table in there. Bummer!
Coedit Limited - Delivering standards compliant, accessible web solutions
[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
Coedit Limited - Delivering standards compliant, accessible web solutions
[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
- Thread starter
- #4
-
3
- #5
Ok, here's a few references:
- -- lots of methods, but none of them really sounds perfect.
- -- cheat with the table display.
- -- here is how Victoria does it.
- -- this one has incorrect doctype but works with a correct one as well (it seems to be my favourite).
- -- lots of methods, but none of them really sounds perfect.
- -- cheat with the table display.
- -- here is how Victoria does it.
- -- this one has incorrect doctype but works with a correct one as well (it seems to be my favourite).
Is the 'page' of fixed height?
If so then you can do a thing with negative top and bottom margins.
If not, then imagine the 'page' was of a greater depth than the viewport. How would it center vertically? Would the top of the page poke off the top of the viewport?
Best solution I've found for this is to work on a viewport size I like and then just work out a margin-top percentage that looks ok and live with it.
The only other way I can think of is to use Javascript to get the height of the 'page', work out it's center then get the the height of the viewport, calculate it's center and put the page center on to the viewport center line up. I've no idea if this is even practical, just an idle thought.
<honk>*:O)</honk>
Designease Ltd. - polyprop folders, ring binders and creative presentation ideas
Earl & Thompson Marketing - Marketing Agency Services in Gloucestershire
If so then you can do a thing with negative top and bottom margins.
If not, then imagine the 'page' was of a greater depth than the viewport. How would it center vertically? Would the top of the page poke off the top of the viewport?
Best solution I've found for this is to work on a viewport size I like and then just work out a margin-top percentage that looks ok and live with it.
The only other way I can think of is to use Javascript to get the height of the 'page', work out it's center then get the the height of the viewport, calculate it's center and put the page center on to the viewport center line up. I've no idea if this is even practical, just an idle thought.
<honk>*:O)</honk>
Designease Ltd. - polyprop folders, ring binders and creative presentation ideas
Earl & Thompson Marketing - Marketing Agency Services in Gloucestershire
ew. in your favorite one all the side navigation comes before the semantical content.
boo to that. if this layout is that important, just do a normal horizontally-centered one and utilize javascript to vertically-center. the small number of people with js disabled will not have the vertical centering, but the horizontal will remain.
*cLFlaVA
----------------------------
[tt]"quote goes here"[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]
boo to that. if this layout is that important, just do a normal horizontally-centered one and utilize javascript to vertically-center. the small number of people with js disabled will not have the vertical centering, but the horizontal will remain.
*cLFlaVA
----------------------------
[tt]"quote goes here"[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]
I don't know what the content of the centered container has to do with anything. As long as that container is centered. And it is not using any weird absolute positioning, display: table-cell or any other trick like that. Anyway, I just glanced and liked it.
If you are eluding to my question about the size of the container....
I ask because I wonder what happens if the container is bigger than the viewport.
Does the container then sit flush with the top of the viewprt until the viewport is enlarged to be bigger than the container?
Or are the container and viewport truly centered on one another? i.e. their centre points are on top of each other.
<honk>*:O)</honk>
Designease Ltd. - polyprop folders, ring binders and creative presentation ideas
Earl & Thompson Marketing - Marketing Agency Services in Gloucestershire
I ask because I wonder what happens if the container is bigger than the viewport.
Does the container then sit flush with the top of the viewprt until the viewport is enlarged to be bigger than the container?
Or are the container and viewport truly centered on one another? i.e. their centre points are on top of each other.
<honk>*:O)</honk>
Designease Ltd. - polyprop folders, ring binders and creative presentation ideas
Earl & Thompson Marketing - Marketing Agency Services in Gloucestershire
- Thread starter
- #10
This :
... and save your selves the effort -I know it won't validate ;-)
But it show you the idea about viewport and scroll behavior.
... and save your selves the effort -I know it won't validate ;-)
But it show you the idea about viewport and scroll behavior.
BillyRayPreachersSon
Programmer
Perhaps it's worth saying "this can't be done", and living with a non-centred page?
Dan
Coedit Limited - Delivering standards compliant, accessible web solutions
[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
Dan
Coedit Limited - Delivering standards compliant, accessible web solutions
[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
- Thread starter
- #12
Yes, you're right. It cannot be done.
And you can continue to ignore my input.
And you can continue to ignore my input.
BillyRayPreachersSon
Programmer
Fantastic link, Vragabond. I'll be using that one next time I need a vertically centred site. Star on me!
Dan
Coedit Limited - Delivering standards compliant, accessible web solutions
[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
Dan
Coedit Limited - Delivering standards compliant, accessible web solutions
[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
I'll second that. I took a quick look at that technique and rather like it. Good jorb!
<honk>*:O)</honk>
Designease Ltd. - polyprop folders, ring binders and creative presentation ideas
Earl & Thompson Marketing - Marketing Agency Services in Gloucestershire
<honk>*:O)</honk>
Designease Ltd. - polyprop folders, ring binders and creative presentation ideas
Earl & Thompson Marketing - Marketing Agency Services in Gloucestershire
- Thread starter
- #16
have a star- Status
Similar threads
- Locked
- Question
- Locked
- Question
