CSS problem [Archive] - Web Hosting Talk

View Full Version : CSS problem

WannaB_Geek

01-28-2005, 09:26 PM

How does one make a div always go to the right edge of its parent element (either the browser window or another div)?
I'm trying to create a generic layout template (a top-of-page div, a left div, a right div, a bottom-of-page div, a middle div), and everything else is working fine, but I can't make the right div go on the right side.

The divs I currently have are something along the lines of:

<body>

<div id="banner">
This is the top of the page
</div>

<div id="main"> 
<div id="left"></div>
<div id="middle">
<div id="content">
This is where the content of the page goes
</div>
<div id="bottom"></div>
</div>
<div id="right"></div>
</div>

</body>

What do I need to do in order to make the #right div go where it's supposed to go?

Thanks,
An aspiring geek.

the_pm

01-28-2005, 09:35 PM

depending on how your CSS is structured, it might be float:right, or it might be margin-left:auto. Can you share the page in question?

WannaB_Geek

01-28-2005, 10:58 PM

Here's the HTML for the page (I currently only have the file on my computer, not online, as it's just a test page)

<html>
<head>
<title>CSS Test</title>
<style type="text/css">
#banner {background-color: red; width: 100%; height: 68px; top: 0px}

#page {top: 0; position: relative}

#left {background-color: green; width: 150px; left: 0px; top: 0px; position: absolute; height: 100%; z-index: 1}
#main {background-color: blue; left: 150px; top: 0px; position: absolute; height: 100%; z-index: 2}
#right {background-color: yellow; width: 120px; height: 100%; color: #f70; z-index: 4}
#bottom {background-color: black; height: 30px; color: white; z-index: 3}

</style>
</head>
<body>
<div id="banner"></div>
<div id="page">
<div id="left">This div contains lots of text.</div>
<div id="main">This div contains even more text, or at least it will once i get better at writing filler. Well, it appears I need to wroite more filler now in order to better test how this styleshet will work with longer strings of text, so i will continue to wite random stuff for no apparent reason. On that note, I like pie. Well, who doesn't? I don't know.
<div id="bottom">bottom text</div>

</div>
<div id="right">hi.</div>
</div>
</body>
</html>

marsian

01-29-2005, 01:21 AM

should it be like this? no idea

<html>
<head>
<title>CSS Test</title>
<style type="text/css">
#banner {background-color: red; width: 100%; height: 68px; top: 0px}

#page {top: 0; position: relative}

#left {background-color: green; width: 150px; left: 0px; top: 0px; position: absolute; height: 100%; z-index: 1}
#main {
background-color: blue;
left: 150px;
top: 0px;
position: absolute;
height: 100%;
z-index: 2;
width: 698px;
}
#right {
background-color: yellow;
width: 120px;
height: 100%;
color: #f70;
z-index: 4;
position: absolute;
left: 851px;
}
#bottom {background-color: black; height: 30px; color: white; z-index: 3}

</style>
</head>
<body>
<div id="banner"></div>
<div id="page">
<div id="left">This div contains lots of text.</div>
<div id="main">This div contains even more text, or at least it will once i get better at writing filler. Well, it appears I need to wroite more filler now in order to better test how this styleshet will work with longer strings of text, so i will continue to wite random stuff for no apparent reason. On that note, I like pie. Well, who doesn't? I don't know.

<div id="bottom">bottom text</div>
</div>
<div id="right">hi.</div>
</div>
</body>
</html>

</html>