21 replies [Last post]
Talent
Offline
newbie
Last seen: 16 years 12 weeks ago
Timezone: GMT-6
Joined: 2005-11-03
Posts: 10
Points: 0

I really hate the idea of using CSS, and this is exactly why. Tables were a lot easier and perfectly fine for me... but this is used widely now so I decided to go with it. The problem is I have a 5 column layout, the 2nd, 3rd, and 4th columns are the content part of the layout. Whenever I try to achieve this, something is always out of place.

Can someone supply sample code on how to structure the layout this way:

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 15 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

CSS Layout with 100% height

Are the outside columns actually columns with content in them, or are they just the frame for the three-column layout in the middle?

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Talent
Offline
newbie
Last seen: 16 years 12 weeks ago
Timezone: GMT-6
Joined: 2005-11-03
Posts: 10
Points: 0

CSS Layout with 100% height

Thanks for replying, They are just 'frame' columns..

And the width's of the columns are:

Column 1: 40px
Column 2: 420px
Column 3: 220px
Column 4: 160px
Column 5: 40px

Should also note that this is a centered page layout. Thanks

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 15 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

CSS Layout with 100% height

I wouldn't worry about the 'frame' columns - let the area outside your layout (ie the body) define those.
For three-column layouts, you might like to take a look at these:
http://css-discuss.incutio.com/?page=ThreeColumnLayouts
http://www.pmob.co.uk/temp/3colfixedtest_4.htm
http://www.alistapart.com/articles/fauxcolumns/

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Talent
Offline
newbie
Last seen: 16 years 12 weeks ago
Timezone: GMT-6
Joined: 2005-11-03
Posts: 10
Points: 0

CSS Layout with 100% height

Figured out the 3 column part. So you're saying I should make the frames part of the background? Wouldn't that mess up the alignment with the layout if the browser window was resized?

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 15 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

CSS Layout with 100% height

Am I right in thinking that you want solid colour either side of your layout? Or do you intend having a different colour again outside your frames?
If you just want a solid colour either side of your layout, give your layout a fixed width (something like 780px to fit into screen res 800 x 600) and then apply a background colour or repeating image to your body. The size of the area outside your layout will obviously vary according to the user's window size, so there's no point in you specifying a width for it.
If you want to have your frames and then a solid colour, you could do it one of two ways: use borders on the body or use a background image on the body that looks like it has borders either side of your layout that repeats vertically.
There's no need to create elements in your layout for these 'frames' if all they're going to do is hold colour.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Talent
Offline
newbie
Last seen: 16 years 12 weeks ago
Timezone: GMT-6
Joined: 2005-11-03
Posts: 10
Points: 0

CSS Layout with 100% height

The frames are vertically tiling images, this is what the layout looks like to give you a better idea:

I've gotten the 3 middle columns to work, but I still can't get the outer frames to align correctly, and I'm also having trouble aligning the 'footer' to the bottom of the page.

Here is my code that I'm working with

HTML:

<div align="center" id="bgframes">
<div align="center" id="wrapper">
	<div id="header"></div>
	<div id="topmenu"></div>
	<div id="topcap"></div>
	<div id="botcap"></div>
	<div id="col1"></div>
	<div id="col2"></div>
	<div id="col3"></div>
</div>
</div>

CSS:

html {
	height: 100%; }

body {
	background-color: #AFAFAF;
	height:100%;
	margin:0; padding:0;
	font: 11px Verdana; }

img {
	border: 0; }

div#wrapper {
	height: 100%; width: 800px;
	margin: auto;
	text-align: center; }
	
div#header {
	background-image: url(../images/header.jpg);
	height: 61px; width: 800px;
	position: inherit; top: 0; left: 0px; }
	
div#footer {
	background-image: url(../images/footer.jpg);
	height: 40px; width: 800px;
	position: inherit; top: 100%; left: 0px; }
	
div#topmenu {
	background-image: url(../images/topmenu.jpg);
	height: 25px; width: 800px;
	position: inherit; top: 76px; left: 0px; }
	
div#topcap {
	background-image: url(../images/topcap.jpg);
	height: 17px; width: 800px;
	position: inherit; top: 86px; left: 0px; }

div#botcap {
	background-image: url(../images/topcap.jpg);
	height: 14px; width: 800px;
	position: inherit; bottom: 0px; left: 0px; }
	
div#col1 {
	background-image: url(../images/bg-1.jpg);
	height: 100%; width: 420px;
	position: inherit; top: 0; left: 0px;
	float: left; }
	
div#col2 {
	background-image: url(../images/bg-2.jpg);
	height: 100%; width: 220px;
	position: inherit; top: 0; left: 420px;
	float: left; }
	
div#col3 {
	background-image: url(../images/bg-3.jpg);
	height: 100%; width: 160px;
	position: inherit; top: 0; left: 640px;
	float: right; }

div#bgframes {
	background-image: url(../images/bg-frames.jpg);
	height: 100%; width: 880px;
	margin: auto;
	text-align: center;
	position: inherit; top: 0; left: 0px; }

The problem is the outer frames don't go the whole length of the page, I'm pretty sure it's because of the header. Any ideas?

Talent
Offline
newbie
Last seen: 16 years 12 weeks ago
Timezone: GMT-6
Joined: 2005-11-03
Posts: 10
Points: 0

CSS Layout with 100% height

Note that part of that image was chopped off, there is a frame on the right side too

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 15 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

CSS Layout with 100% height

Couple questions: why not apply #bgframe's background image to #wrapper instead and do away with the unnecessary extra div?
Also, what are #topcap and #bottomcap?
For getting a footer to stick to the bottom, you might want to look at http://www.themaninblue.com/writing/perspective/2005/08/29/

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Talent
Offline
newbie
Last seen: 16 years 12 weeks ago
Timezone: GMT-6
Joined: 2005-11-03
Posts: 10
Points: 0

CSS Layout with 100% height

The cap's are just the images between the header/footer and content

I tried making the frames part of the background for #wrapper, but, I'm not sure how I can align the entire layout to the center of that because the layout is 800px where as the frames are 880px. Thanks for the footer link, that helped.

Talent
Offline
newbie
Last seen: 16 years 12 weeks ago
Timezone: GMT-6
Joined: 2005-11-03
Posts: 10
Points: 0

CSS Layout with 100% height

edit: I made the frames the part of the background of #wrapper, but they still don't extend the full length of the screen for some reason. :? :?:

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 15 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

CSS Layout with 100% height

Got a link to a page that people can look at? It's always easier that way.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Talent
Offline
newbie
Last seen: 16 years 12 weeks ago
Timezone: GMT-6
Joined: 2005-11-03
Posts: 10
Points: 0

CSS Layout with 100% height

Meh I gave up on it and did it with tables in 30 seconds Wink

If you have any ideas it'd be great, I uploaded the CSS one here so you can see: http://www.tecmo.gamernode.com/layout/ - Thanks

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 years 48 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

CSS Layout with 100% height

Talent, you state that tables are so easy, but surely it's because you already know them. If you had started out with CSS and tried to code a layout in tables you'd be thinking just the opposite right now. Don't give up on CSS just yet - it takes time. Sometime in the near future CSS will 'click' and you'll never look back. Smile

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 2 weeks 17 hours ago
Joined: 2004-06-30
Posts: 9679
Points: 815

CSS Layout with 100% height

Your awesome tables idea doesn't work:

Verschwindende wrote:
  • CSS doesn't make pies

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 15 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

CSS Layout with 100% height

thepineapplehead wrote:
Your awesome tables idea doesn't work

Um, that's actually the one created with <div>s. Wink (Unless you've got a link that I've missed in this thread.)

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 2 weeks 17 hours ago
Joined: 2004-06-30
Posts: 9679
Points: 815

CSS Layout with 100% height

Doh!

Verschwindende wrote:
  • CSS doesn't make pies

Talent
Offline
newbie
Last seen: 16 years 12 weeks ago
Timezone: GMT-6
Joined: 2005-11-03
Posts: 10
Points: 0

CSS Layout with 100% height

wolfcry911 wrote:
Talent, you state that tables are so easy, but surely it's because you already know them. If you had started out with CSS and tried to code a layout in tables you'd be thinking just the opposite right now. Don't give up on CSS just yet - it takes time. Sometime in the near future CSS will 'click' and you'll never look back. Smile

Tables are simple enough anyway, I don't understand the whole CSS craze, I can see the use in styling fonts and such but replacing whole sites with it seems pointless :?:

No one could figure out the layout problem? Sad

Anonymous
Anonymous's picture
Guru

CSS Layout with 100% height

Talent wrote:
Tables are simple enough anyway, I don't understand the whole CSS craze, I can see the use in styling fonts and such but replacing whole sites with it seems pointless :?:
Using tables for layout is a hack. Tables are not meant to be used for layout. It is not as cross-browser compatible as everyone would have you think and it bloats your code. :shrug:

http://www.hotdesign.com/seybold/index.html

Talent
Offline
newbie
Last seen: 16 years 12 weeks ago
Timezone: GMT-6
Joined: 2005-11-03
Posts: 10
Points: 0

CSS Layout with 100% height

Triumph wrote:
Talent wrote:
Tables are simple enough anyway, I don't understand the whole CSS craze, I can see the use in styling fonts and such but replacing whole sites with it seems pointless :?:
Using tables for layout is a hack. Tables are not meant to be used for layout. It is not as cross-browser compatible as everyone would have you think and it bloats your code. :shrug:

http://www.hotdesign.com/seybold/index.html

Interesting. But wouldn't it have been more efficient just to standardize browser's protocol with tables so that they all display data the same (they still don't even to this day with or without), instead of a whole new language and making everyone re-learn this stuff? Also it works in IE and there's somewhere around 90% of people still using IE. I just recently switched to Firefox, don't really notice the big whoop about this browser. Anyway, one argument I hear a lot is that it saves on page size, but that would have been useful in the dial-up days, we're on the brink of fiber-optics and terabyte hard drives for pennies a GB. I think people buy into hype too much. Still, with all this evangelism for CSS, no one has been able to figure out my page problem :-k

Not trying to come off as someone with an attitude, but no matter what I read this language makes no sense to me as far as advantages.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 15 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

CSS Layout with 100% height

Talent wrote:
Not trying to come off as someone with an attitude, but no matter what I read this language makes no sense to me as far as advantages.

  • Easier to make site-wide changes
  • Better search engine ranking.
  • Content is accessible to wider range of devices (screen readers, browsers, text based browsers, hand helds, search robots, printers, fridges etc).
  • Content is accessible to wider range of users (normal users, blind users, vision impaired users, dyslexic users, motor skill impaired users etc).
  • Gives the designer more control over code which makes possible things like delivering code in the preferred order for screen readers.
  • Allows users to customise a site to their own needs by using style switchers which can increase text sizes or change colours.
  • Provides print-friendly versions for all pages.

[/]

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Anonymous
Anonymous's picture
Guru

CSS Layout with 100% height

Tyssen wrote:
  • Easier to make site-wide changes
  • Better search engine ranking.
  • Content is accessible to wider range of devices (screen readers, browsers, text based browsers, hand helds, search robots, printers, fridges etc).
  • Content is accessible to wider range of users (normal users, blind users, vision impaired users, dyslexic users, motor skill impaired users etc).
  • Gives the designer more control over code which makes possible things like delivering code in the preferred order for screen readers.
  • Allows users to customise a site to their own needs by using style switchers which can increase text sizes or change colours.
  • Provides print-friendly versions for all pages.
All of those are possible with CSS because the layout is completely separate from the markup.

[/]