Jump to content

CSS question


darkzar99
 Share

Recommended Posts

Ok, I want a 3-column css layout with a fixed width, and a header and footer. I want all three columns to be the same height at all times, as you can see in the picture in the first post the middle is shorter and when i add text to it the side colums are shorter,

i found this link http://www.positioniseverything.net/articl...d_pagemaker.php

but that was made with a layout generator but i dont like that because i dont really know whats going on

Link to comment
Share on other sites

Well making all the other collums hight change with the rest of them is complicated. The best method that I have came across is making an image that is 1px high with the width of the site. Then you make that repeat-y. Make this image the background of a div which parents all the different column divs. Expending as they do. I have an example online

http://www.simplefolder.com/werelinux/were.../submitdocs.php

The site is dead, but you get the idea. The css file can be found at

http://www.simplefolder.com/werelinux/werelinux/main.css

As you can see the parent div css background is

background: url(bg.png) repeat-y 0 0;

and the image can be found here

http://www.simplefolder.com/werelinux/werelinux/bg.png

THis is very old, and i'm sure my code is crap, but it's a start.

If i could remember the name of that method i would be able to help you out more. If you need to have borders that are dashed just make the image like 4 pixels high and have two of them black, two white.

Good luck!

Link to comment
Share on other sites

Ok, I want a 3-column css layout with a fixed width, and a header and footer. I want all three columns to be the same height at all times, as you can see in the picture in the first post the middle is shorter and when i add text to it the side colums are shorter,

i found this link http://www.positioniseverything.net/articl...d_pagemaker.php

but that was made with a layout generator but i dont like that because i dont really know whats going on

Does it have to be a CSS-only solution? You can do this with Javascript if you need to.

Secondly, it is possible to do it all with Javascript, but is it okay to FAKE it? You can use background images to make it appear that the columns extend when they do not.

Thirdly, you said it is fixed width, but is it fixed height? That is, is the footer at the bottom of the PAGE or the Browser window?

Link to comment
Share on other sites

Something i noticed about your CSS is you take it oldschool. You can edit all the border tags in 1 line.

border-left: 1px solid #000;

border-right: 1px solid #000;

border-bottom: none;

border-top: none;

yeah, just thought I'd point that out.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...