Irishjugg
07-22-2008, 06:59 PM
Hey,
I'm trying to set up a layout where I have 2 colored stripes (one vertical one horizontal) off to the top and left, each being 100% width and height, then, inside the corner and down to the bottom of my container div would be another section. The problems I am having is, once I get my 2 stripes placed, I want to offset my other content section(div) to put it near the corner but partially overlapping the stripes. What is happening is I cant use height: 100% since Ive done an offset therefor I overflow past the container div's size (which is set at 100%).
I know theres a good way to make a div fill to the bottom of a container div, I simpy don't know it. Ill attach the dummy index page and the layout for it.
Secondly, using 100% for the vertical stripe Im left with 10 pixel boarders on the top and bottom of my firefox window, whats the fix for that?
<html>
<head>
<title>
</title>
<link rel="stylesheet" type="text/css" href="layout.css" />
<style type="text/css">
</style>
</head>
<body>
<div id="upperstripe">
</div>
<div id="fullcontainer">
<div id="leftstripe">
</div>
<div id="contentcontainer">
<div id="clearer"></div>
<div id="lspacer"></div>
<div id="content-round">
</div>
</div>
</div>
</body>
</html>
and the CSS
body {
text-align: center;
font-family: calibri, arial;
background-color: #86B7BB;
}
#upperstripe {
background-color: #FFAE5E;
text-align: left;
height: 140px;
width: 100%;
position: absolute;
left: 0px;
top: 80px;
z-index: 3;
}
#fullcontainer {
margin: 0 auto;
width: 900px;
height: 100%;
text-align: left;
position: relative;
top: 0px;
background-color: gray;
}
#leftstripe {
background-color: #FFFF84;
lext-align: left;
height: 100%;
width: 18%;
position: absolute;
float: left;
z-index: 1;
}
#contentcontainer {
//background-color: black;
width: 92%;
height: 100%;
position: relative;
//top: 120px;
left: 8%;
z-index: 4;
}
#clearer {
width: 100%;
height: 212px;
background-color: blue;
float: left;
}
#lspacer {
width: 90px;
float: left;
height: 1px;
background-color: green;
z-index: 0;
}
#content-round {
position: relative;
float: left;
//margin: 0 0;
height: 100%;
width: 738px;
background-color: white;
//height: 200px;
}
Can anyone offer some help? Right now all my stuff is colored randomly so I can see what the heck is going on.
I'm trying to set up a layout where I have 2 colored stripes (one vertical one horizontal) off to the top and left, each being 100% width and height, then, inside the corner and down to the bottom of my container div would be another section. The problems I am having is, once I get my 2 stripes placed, I want to offset my other content section(div) to put it near the corner but partially overlapping the stripes. What is happening is I cant use height: 100% since Ive done an offset therefor I overflow past the container div's size (which is set at 100%).
I know theres a good way to make a div fill to the bottom of a container div, I simpy don't know it. Ill attach the dummy index page and the layout for it.
Secondly, using 100% for the vertical stripe Im left with 10 pixel boarders on the top and bottom of my firefox window, whats the fix for that?
<html>
<head>
<title>
</title>
<link rel="stylesheet" type="text/css" href="layout.css" />
<style type="text/css">
</style>
</head>
<body>
<div id="upperstripe">
</div>
<div id="fullcontainer">
<div id="leftstripe">
</div>
<div id="contentcontainer">
<div id="clearer"></div>
<div id="lspacer"></div>
<div id="content-round">
</div>
</div>
</div>
</body>
</html>
and the CSS
body {
text-align: center;
font-family: calibri, arial;
background-color: #86B7BB;
}
#upperstripe {
background-color: #FFAE5E;
text-align: left;
height: 140px;
width: 100%;
position: absolute;
left: 0px;
top: 80px;
z-index: 3;
}
#fullcontainer {
margin: 0 auto;
width: 900px;
height: 100%;
text-align: left;
position: relative;
top: 0px;
background-color: gray;
}
#leftstripe {
background-color: #FFFF84;
lext-align: left;
height: 100%;
width: 18%;
position: absolute;
float: left;
z-index: 1;
}
#contentcontainer {
//background-color: black;
width: 92%;
height: 100%;
position: relative;
//top: 120px;
left: 8%;
z-index: 4;
}
#clearer {
width: 100%;
height: 212px;
background-color: blue;
float: left;
}
#lspacer {
width: 90px;
float: left;
height: 1px;
background-color: green;
z-index: 0;
}
#content-round {
position: relative;
float: left;
//margin: 0 0;
height: 100%;
width: 738px;
background-color: white;
//height: 200px;
}
Can anyone offer some help? Right now all my stuff is colored randomly so I can see what the heck is going on.