arbitter Posted April 6, 2010 Share Posted April 6, 2010 This problem has perhaps been explained millions of times, I just can't find it all to work. I want a div that is in the center of the page with a height of the whole page <head> <style type='text/css'> body { margin:0 0 0 0; background-color:red; } #main { background-color:#afafaf; width:1024px; text-align:center; margin-top:0; margin-bottom:0; margin-left:auto; margin-right:auto; height:100%; position:absolute; } </style> </head> <body> <div id='main'> </div> </body> Like this, I get the whole thing (good height), but on the left-hand side of the screen. With relative instead of absolute, I only get a small, one-lined grey box (that is centered) on the top of the page. Perhaps you can also delete all the unnecessary stuff from the css? eg i don't think the body needs a set height and stuff. Thanks a lot Quote Link to comment Share on other sites More sharing options...
haku Posted April 7, 2010 Share Posted April 7, 2010 html, body, div#wrapper { height:100%; } div#wrapper { width:1024px; margin:0 auto; } Give your div an ID of 'wrapper' and if you use the above it will work. Quote Link to comment Share on other sites More sharing options...
arbitter Posted April 7, 2010 Author Share Posted April 7, 2010 Thank you for the help! I'd been searching off sites for it but just couldn't find it.. Though this doesn't quite work in IE and there is a margin at the top... What I had after doing some more research: body { margin:0 0 0 0; background-color:#3f3f3f; } #main { background-color:#afafaf; width:1024px; margin:auto; } .header { height:100px; background-color:#cdaae7; } #left { width:904px; float:left; background-color:green; height:100%; position: absolute; } #right { width:120px; float:right; background-color:yellow; height:100%; position:relative; } Using this, the left-right margins are good in all the browsers. Only problem is that they aren't 100%... (Though in chrome the 'right' div is 100%, in IE it isn't.) Quote Link to comment Share on other sites More sharing options...
haku Posted April 8, 2010 Share Posted April 8, 2010 I'm not sure if you are asking a question, giving a result, or even what you are saying. Quote Link to comment Share on other sites More sharing options...
arbitter Posted April 13, 2010 Author Share Posted April 13, 2010 My bad. SOrry for the late response, I was on vacation in Naples in Italy. What I want is a div that is centered and has a certain width. That is no problem. But then that div is divided in 3 parts; a left, center and right column. I want the left and right column to be as high as the center column. The center column has a variable width. So I'd try width:100% But that doesn't work... This is what I have in the css: body { margin:0 0 0 0; background-color:#3f3f3f; background-image:url(back.jpg); font-size:12px; } #main { width:1024px; margin:auto; } .banner { height:100px; background-color:#3f3f3f; border-bottom-style:double; border-bottom-color:#3870c4; } #menulinks { width:140px; float:left; background-color:#3f3f3f; height:500px; padding:5px 5px 5px 5px; color:white; font-family:sans-serif; } #center { width:714px; float:left; background-color:#565656; height:500px; padding:5px 5px 5px 5px; } #rechts { width:150px; float:right; background-color:yellow; height:500px; } Now ofcourse the height is just put there to test the rest of the page, since in will not work with 100%. How do I do this? Quote Link to comment Share on other sites More sharing options...
haku Posted April 14, 2010 Share Posted April 14, 2010 I see what you are saying. You need the faux columns method. Quote Link to comment Share on other sites More sharing options...
arbitter Posted April 14, 2010 Author Share Posted April 14, 2010 Never heard of that. Did some research though. So I have to make an image and repeat it? Is there no other way? Because perhaps I'd like to implement a userchoice background, or even that the user can choose colours, I can't make images for each color can I... Quote Link to comment Share on other sites More sharing options...
haku Posted April 14, 2010 Share Posted April 14, 2010 It's not impossible, but still a little difficult. You can use a PHP image library to make the images on the fly for users if you want them to be able to set backgrounds. Either that or you can use a javascript solution, but of course this won't work for any users who have javascript turned off. Quote Link to comment Share on other sites More sharing options...
arbitter Posted April 14, 2010 Author Share Posted April 14, 2010 Oh boy. I'll just do it with the faux containers then, if I find it necessary to make the colours changable I'll think about that library thing. Thanks for the help, I've learned another thing today! Quote Link to comment 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.