Tweet
Ok,
I think I'm starting to understand the benefits of CSS for positioning. However, there are a couple things I'm having trouble grasping.
1 - How can I force one DIV to be "footer"?
2 - I made one DIV 145px wide. How can I make the one next to it take up the rest of the space? Meaning in the top DIV, I set the width to 100%. The width of the DIV in question should be 100% - 145px - 10px(for padding).
I posted what I have so far. The colors are pretty strange right now. They're just for testing purposes. The DIV that I want to change in item 2 is the YELLOW one. The DIV that I want to force to the bottom is the RED one.
TIA
Here's the code from the two files:
body {
background-color:Blue;
}
#top{
position:absolute;
justification:center;
width:100%;
Height:20;
background-color:lightblue;
valign:center;
padding-left:10;
}
#left{
position:absolute;
width:140px;
top:75px;
height:85%;
background-color:green;
}
#right{
position:absolute;
top:75px;
left:155px;
background-color:yellow;
}
#bottom{
position:relative;
height:15px;
background-color:red;
}
<html>
<LINK REL="stylesheet" type="text/css" href="newstyle.css">
<body>
<div id="top">
<h1>New Horizon Properties & Investments, L.L.C.</h1>
</div>
<div id="left">
This is the "Left" div.
</div>
<div id="right">
This is the "Right" div.
</div>
<div id="bottom">
<center>Copyright New Horizon Properties & Investments, L.L.C.</center>
</div>
</body>
</html>
I think I'm starting to understand the benefits of CSS for positioning. However, there are a couple things I'm having trouble grasping.
1 - How can I force one DIV to be "footer"?
2 - I made one DIV 145px wide. How can I make the one next to it take up the rest of the space? Meaning in the top DIV, I set the width to 100%. The width of the DIV in question should be 100% - 145px - 10px(for padding).
I posted what I have so far. The colors are pretty strange right now. They're just for testing purposes. The DIV that I want to change in item 2 is the YELLOW one. The DIV that I want to force to the bottom is the RED one.
TIA
Here's the code from the two files:
body {
background-color:Blue;
}
#top{
position:absolute;
justification:center;
width:100%;
Height:20;
background-color:lightblue;
valign:center;
padding-left:10;
}
#left{
position:absolute;
width:140px;
top:75px;
height:85%;
background-color:green;
}
#right{
position:absolute;
top:75px;
left:155px;
background-color:yellow;
}
#bottom{
position:relative;
height:15px;
background-color:red;
}
<html>
<LINK REL="stylesheet" type="text/css" href="newstyle.css">
<body>
<div id="top">
<h1>New Horizon Properties & Investments, L.L.C.</h1>
</div>
<div id="left">
This is the "Left" div.
</div>
<div id="right">
This is the "Right" div.
</div>
<div id="bottom">
<center>Copyright New Horizon Properties & Investments, L.L.C.</center>
</div>
</body>
</html>
)
Comment