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. 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. 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. 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. 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. 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. 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. 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] Link to comment https://forums.phpfreaks.com/topic/11022-setting-width-height/#findComment-41440 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.