Table layout replacement help

[programmer-in-training]

I was recently reading up at http://www.safalra.com/web-design/ and had my views changed on uses of tables. Now I have a question -- I'm trying to stick to the XHTML Transitional DTD, but I don't know how to design the layout with <div>s. The catch is, I want the logo and footer always visible, i.e. the body doesn't scroll but the content does. How do I set up <div>s to do this? If I include the <!DOCTYPE>, the width and height 100%'s don't seem to work -- the <div>s just shrink. Logo {Width: 100%; Height: 128px} Menu {Width: 134px; Height: 100%} Content {Width: 100%; Height: 100%} Links {Height: 100%} Footer {Width: 100%; Height: 1em} Do the 100%'s fill extra space, or force more? I.e, does 134px + 100% = the page width, or 134px + 100% = page width + 134px?

[elementalgrace]

I was recently reading up at http://www.safalra.com/web-design/ and had my views changed on uses of tables. Now I have a question -- I'm trying to stick to the XHTML Transitional DTD, but I don't know how to design the layout with <div>s. I would like this layout: The catch is, I want the logo and footer always visible, i.e. the body doesn't scroll but the content does. How do I set up <div>s to do this? If I include the <!DOCTYPE>, the width and height 100%'s don't seem to work -- the <div>s just shrink. Logo {Width: 100%; Height: 128px} Menu {Width: 134px; Height: 100%} Content {Width: 100%; Height: 100%} Links {Height: 100%} Footer {Width: 100%; Height: 1em} Do the 100%'s fil extra space, or force more? I.e, does 134px + 100% = the page width, or 134px + 100% = page width + 134px?

This article will give you a good start on creating 3 column layouts. You can fiddle about with it once you've got the basics of it right and set the heights etc. http://www.alistapart.com/articles/holygrailYou might want to try overflow:auto or overflow:scroll in the CSS for the Content section.

[programmer-in-training]

Thanks, I think I'm on the right track now.

[programmer-in-training]

I can't seem to juggle the <div>s around properly. I'm looking for this structure:What HTML and CSS should I use? (I would like the menu, links, logo and footer to be fixed and the content to scroll.)

[Ingolme]

This should work. I didn't test it myself, but it's basic and shouldn't have any problems. I'm not used to designing things to fit exceed the screen height though.CSS:

html,body { margin: 0; padding: 0; height: 100%; }#menu { float:left; width: 180px; height: 100%;}#logo { margin-left: 184px; height: 12%}#links { float: right; width: 180px; height: 88%}#content,#footer { margin: 0 184px; }#content { height: 76%; overflow: auto; }#footer { height: 12%; }

HTML:

<div id="menu">Menu</div><div id="logo">Logo</div><div id="links">Links</div><div id="content">Content</div><div id="footer">Footer</div>

[elementalgrace]

And don't forget to clear your floats!

[Ingolme]

There's no need for clearing the floats in the layout I've given. A floated box doesn't affect anything before it. I've placed the boaxes in the correct order so that they don't need to be cleared.

[programmer-in-training]

It didn't quite work. I want to have the menu be 134px wide, the links 188px wide, the header 128px high, the footer 1em high, and stay that way.But more importantly, I need this arrangement to fill the available space at all times (so that the footer is always at the bottom, even if there's not enough text).I also need the content to scroll inside, with the menu, links, header and footer staying still.Is it possible? I don't know if I know enough. Is it possible to add/subtract CSS values, e.g. 100% - 128px - 1em?

[Ingolme]

Unfortunately, it's not possible to add or subtract anything in CSS. All the vertical measurements have to be done in percentages which must sum up to 100% in order for the page to take the full height. All you can do it make the boxes taller or shorter by giving them more or less percent, making sure they still sum up to 100 between all of them.You can change the widths of the containers if you want to:

I want to have the menu be 134px wide, the links 188px wide

#menu { float:left; width: 134px; height: 100%;}#links { float: right; width: 188px; height: 88%}#content,#footer { margin: 0 190px 0 136px; }

[Kahor]

But more importantly, I need this arrangement to fill the available space at all times (so that the footer is always at the bottom, even if there's not enough text).I also need the content to scroll inside, with the menu, links, header and footer staying still.

For your footer, supposing it's in a div id="footer"div#footer { position: absolute; width: 100%; bottom: 0; }There's a lot of CSS tutorials that'll teach you exactly what your looking for, unfortunatly the ones I am using are written in french so that won't help you, you'll have to find your own.

[Ingolme]

For your footer, supposing it's in a div id="footer"div#footer { position: absolute; width: 100%; bottom: 0; }There's a lot of CSS tutorials that'll teach you exactly what your looking for, unfortunatly the ones I am using are written in french so that won't help you, you'll have to find your own.

The reason I wouldn't do that is because content of other boxes will go behind this one rather than stop and scroll right where it starts.

[Synook]

But more importantly, I need this arrangement to fill the available space at all times (so that the footer is always at the bottom, even if there's not enough text).

Non-absolute positioned and bottom property-using solution: http://www.themaninblue.com/writing/perspective/2005/08/29/

[programmer-in-training]

I'm not sure If I'm communicating what I want properly. I'm want the edges (header, footer, sidebars) to stay fixed, never smaller than the browser and never larger. I don't want to body itself to scroll at all.Then, I want the content inside to act as a normal web page, scrolling etc.The best I've come up with has the whole page scrolling instead of just the content inside.Is this clear enough?

[Synook]

Have you tried using position:fixed? Experiment with it.

[justsomeguy]

Unfortunately, this is an example where the CSS designers seem like they don't use the internet. There should be a way in CSS to easily specify that a certain element should stick to any one side of the viewport, but there isn't. This is a reason why tables are still used for layouts, this type of thing is really easy to do with a table.This isn't going to answer your question on how to create a tableless layout (because it uses tables), but you can always use a third-party toolkit to help you out.http://extjs.com/deploy/dev/examples/layout/complex.htmlhttp://extjs.com/deploy/dev/examples/desktop/desktop.htmlhttp://extjs.com/deploy/dev/examples/portal/portal.htmlhttp://extjs.com/deploy/dev/examples/feed-viewer/view.htmlhttp://extjs.com/deploy/dev/examples/layou...ut-browser.htmlHopefully some day one of the CSS designers will try to create a web page (one of them works for Opera - cmon buddy!) and realize that there are a lot of things that should be easy that CSS is lacking. Another one is constants, I can't believe we're on CSS 3 and still don't have constants. e.g.

@define $main_text: "#123456";@define $main_bg: "#987654";.h1 { color: $main_text; }.div {   color: $main_text;   background: $main_bg;}

I love finding and replacing across several files just as much as the next guy, but cmon.

[Synook]

Another one is constants, I can't believe we're on CSS 3 and still don't have constants. e.g.

I think the reason we don't have constants in CSS is that combination selectors should be able to select everything that requires that property, and thereby only having to write it once. E.g.

.h1, .div {	color:#123456;}.div {	background:#987654;}

[programmer-in-training]

Well, I will resort to tables if there is no way to do it otherwise.CSS designers, the ball is in your park!

[programmer-in-training]

I can't seem to get tables to do it, either. My links push down the bottom of the table beyond the screen; they won't stay within or resize with the window.

[justsomeguy]

I think the reason we don't have constants in CSS is that combination selectors should be able to select everything that requires that property, and thereby only having to write it once. E.g.

Maybe so, but that's not reality. Look at the stylesheet for this forum, "color: #222222" appears 8 times, the color #072a66 shows up 33 times. That's just the way people use CSS, there's not a good reason not to have constants that we can use. Moreover, using complicated selectors to try to define your attributes once just makes the file more confusing, and possibly larger in size because of the extra definitions. If you want to change the style of one class or element but not others then you probably have to rewrite your rules. Other people agree. But this is getting off-topic, CSS has it's issues like anything else and updates to it will probably address some of them eventually. I do wish they would add "top" and "bottom" as float properties though.<div style="float: top;">header!</div><div style="float: left;">nav!</div><div>content!</div><div style="float: right;">sidebar!</div><div style="float: bottom;">footer!</div>

[jlhaslip]

Like this? Sorta aout the right thing? the centre content scrolls and the rest of the page is fixed? Might be able to mod the layout to include the menu sidebars, etc. Sorry, i simply do not have the time to play with this at present.http://www.jlhaslip.trap17.com/samples/tem...amed/index.html

[programmer-in-training]

I was hoping to have the sidebars width fixed in all circumstances.