Ninjakreborn Posted June 2, 2006 Share Posted June 2, 2006 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. Quote Link to comment https://forums.phpfreaks.com/topic/11022-setting-width-height/ Share on other sites More sharing options...
wildteen88 Posted June 2, 2006 Share Posted June 2, 2006 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. Quote Link to comment https://forums.phpfreaks.com/topic/11022-setting-width-height/#findComment-41172 Share on other sites More sharing options...
Ninjakreborn Posted June 2, 2006 Author Share Posted June 2, 2006 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 pixelsI set the widths for all 3 to 33%, and the height to 100%, and it didn't work. Quote Link to comment https://forums.phpfreaks.com/topic/11022-setting-width-height/#findComment-41173 Share on other sites More sharing options...
nogray Posted June 2, 2006 Share Posted June 2, 2006 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. Quote Link to comment https://forums.phpfreaks.com/topic/11022-setting-width-height/#findComment-41265 Share on other sites More sharing options...
Ninjakreborn Posted June 2, 2006 Author Share Posted June 2, 2006 I have something worked out with it I might, I try to avoid using javascript to deal with aspects of the design, because I have had issues with it, when people didn't have it enabled. Quote Link to comment https://forums.phpfreaks.com/topic/11022-setting-width-height/#findComment-41273 Share on other sites More sharing options...
seanlim Posted June 3, 2006 Share Posted June 3, 2006 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 useIf anybody has a proper solution to this without javascript or any other scripts in css, i would be more than happy to see it. Quote Link to comment https://forums.phpfreaks.com/topic/11022-setting-width-height/#findComment-41417 Share on other sites More sharing options...
Ninjakreborn Posted June 3, 2006 Author Share Posted June 3, 2006 I have will have a 3 column css solution by the end of the week if it kills me, I will let you know. Quote Link to comment https://forums.phpfreaks.com/topic/11022-setting-width-height/#findComment-41437 Share on other sites More sharing options...
AndyB Posted June 3, 2006 Share Posted June 3, 2006 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] Quote Link to comment https://forums.phpfreaks.com/topic/11022-setting-width-height/#findComment-41440 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.