Jump to content

setting width, height


Ninjakreborn

Recommended Posts

Need help, I am in the middle of a lot of projects, I am having a lot of fun, but I encountered a small problem.
I have set a header, stretched it wide 100%, put a logo picture(the name of the site), and a picture of what he wanted. Ok now, I was trying to, I can't show a url because it's not live. Now what I want to do is have a 3 column layout, this is his master homepage, it will have a bunch of stuff linked to 3 drawers, with a bunch of mouse events to do some popping in and out. What i want is to have the header, all the way across the top, the two images are set and everything, it's done, now I have 3 columns, left, middle, right, each with a different background color, background image, and pictures. I need them to equally take up a section of the screen, I tried width:33% for all 3 of them, and then I tried setting height:100% for all 3 of them but it didn't work, I need each section to take up an equal part of the page, and I need all 3 to extend to the bottom of the page, I don't want to take the chance of setting it in pixels, because if I do, then if he uses that as a template later, with more content, and a scroll bar appears on the side, then the background will cut out, early. I need it to always go to the bottom of the screen, and if you scroll down, then it will either stretch with it or whatever, here is what i Have, you can copy this into a file and preview in browser, you won't see the pics, but you will get an idea of what I am wanting to do.

[code]
body
{
padding:0px;
margin:0px;
}

#header
{
width:100%;
height:120px;
background-color:#000000;
background-image:url(indexPgImagesEtc/ShelfMolding.jpg);
background-position:bottom;
background-repeat:no-repeat;
}

#logo
{
margin-left:300px;
margin-top:50px;
}

#left
{
height:auto;
width:33%;
background-color:#000000;
}

#middle
{
height:auto;
width:33%;
background-color:#7B7B7B;
}

#right
{
height:auto;
width:33%;
background-color:#FFFFFF
}

[/code]
[code]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="huttonio.css" />
<title>Huttonio Brooks: Furniture, Photographic Works, Sculpture and Fine Art Works, etc
</title>
</head>
<body>
<div id="header">
<img src="indexPgImagesEtc/HBlogoSm.jpg" alt="Name Logo" id="logo" />
</div>
<div id="left"></div>
<div id="middle"></div>
<div id="right"></div>
</body>
</html>


[/code]

Any advice or guidance would be greatly appreciated.
Link to comment
Share on other sites

This is possible with css. Have a look at [a href=\"http://solardreamstudios.com/learn/css/footerstick/\" target=\"_blank\"]footerStick[/a] for an explanation of how to do it. Also ahve a look at [a href=\"http://www.themaninblue.com/writing/perspective/2005/08/29/\" target=\"_blank\"]footerStickAl[/a] too which is better way of doing it.
Link to comment
Share on other sites

There won't be a footer, but that helps, I will keep that in mind for the future.
What I mean was for instance, I have say there are 4 sections to my website, the header, and 3 for the body. It's a standard 3 column layout. I want to have the 3 columns stretch all the way from left to write, that is pretty easy, I think, but I want all 3 columns, to go from the top, Where I have them below the header, ALL the way down to the bottom of the screen. Without having to set it in pixels
I set the widths for all 3 to 33%, and the height to 100%, and it didn't work.
Link to comment
Share on other sites

Height is a mystery for all browsers and CSS (none of them treat it the same way). If you want to use height:100% you have to set all the parent elements height (including the body and html)

What I usually do when I have a lot of column is to set the height using javascript. when the page load, I get the window height and the three columns, than set the height to the highest amount.
Link to comment
Share on other sites

I have tried many times to create a three column layout. I tried looking up previously on this issue and the most common solutions are to use javascript or using a 1px by 1px image (if i'm not wrong).

However, i have never like these kinds of workaround as i feel it not 'pure' css and i have turned to creating three column layouts with a similar background color so it can blend in.

If you are really really really desperate though, i supposed u could use tables? Yeah.. that's like breaking on of the most basic rule of web designing and i know disadvantages/problems of using a table, but if you are really desperate.. why not? and its not hard to use

If anybody has a proper solution to this without javascript or any other scripts in css, i would be more than happy to see it.
Link to comment
Share on other sites

No need to kill yourself.

[a href=\"http://www.searchenginefriendlylayouts.com/layouts/3_column_liquid_layout%2c_header%2c_footer_23.html\" target=\"_blank\"]http://www.searchenginefriendlylayouts.com..._footer_23.html[/a]
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

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.   Restore formatting

  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.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.