rtpmatt Posted July 22, 2007 Share Posted July 22, 2007 Iv been teaching myself CSS this week, and I have run into a small problem. My design currently has a background color defined in the body { background-color: #FFFFFF; } method, and I am trying to place another frame over the center with a different background color like so: #frame { background-color:#000000; width:800px; } then my is pretty much as so: <HTML> <BODY> <div id="frame"> ...my fancy page... </div> </BODY> </HTML> the problem is that my frame will not encompass any of the DIVs i have below it, it will ONLY stretch over stuff not inside of a DIV. Any ideas of how to make it stretch over (well, beneath really) everything in between the div declaring and the /div closing it? thanks for any help. -matt Quote Link to comment Share on other sites More sharing options...
calabiyau Posted July 22, 2007 Share Posted July 22, 2007 Post more code of what you are trying to do...ie..the other div tags on your page. Hard to know exactly what you mean without seeing the rest of the code. Quote Link to comment Share on other sites More sharing options...
rtpmatt Posted July 22, 2007 Author Share Posted July 22, 2007 alright, sorry, my index.php is something like: <HTML> <HEAD> <link href="styles/style.css" rel="stylesheet" type="text/css"> </HEAD> <BODY> <div id="frame"> <div id="header"> <a href="index.php"><img src="images/logo.jpg" width="220" height="90"></a> </div> <div id="leftBody"> menu: <a href="index.php">home</a> <a href="main.php">main</a> </div> <div id="centerBody"> Welcome! Hope you enjoy the page! </div> <div id="rightBody"> *Some nice ads go here* </div> XXX </div> I have found that if i replace the XXX above with a ton of BR's it will bring the frame down, the problem is that I dont know the size of each page, so I won't know the correct amount to put there. my style.css is pretty much: #header { position: absolute; left: 20%; top: 10px; width: 750px; } #leftBody { position: absolute; left: 20%; width: 300px; top: 100px; } #centerBody { position: absolute; width: 350px; left: 37%; top: 100px; } #rightBody { position: absolute; left: 65%; top: 100px; } body { background-color: #FFFFFF; } #frame { background-color:#000000; width:800px; } hope that makes more sense, thanks for any help! -matt Quote Link to comment Share on other sites More sharing options...
bronzemonkey Posted July 22, 2007 Share Posted July 22, 2007 If you want to use {position:absolute} to position elements within another element then you need to use {position:relative} on the parent element. If you want to center a div you need to use {margin:0 auto 0 auto} to automatically create margins large enough to center the div within its parent element. You also cannot use {position:absolute} to create a layout such as the one you want because the parent element will not expand to contain all the content (actually, in all browsers apart from IE6/5.5) this is not true anymore. Producing a 3 column layout with CSS is actually a little tricky. Best way to learn is to look at how other sites do it. CSS Play has a demo that you could learn from too - http://www.cssplay.co.uk/layouts/3cols.html Quote Link to comment Share on other sites More sharing options...
rtpmatt Posted July 22, 2007 Author Share Posted July 22, 2007 thanks, ill give that a study 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.