Go Back   CodingForums.com > :: Client side development > HTML & CSS

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 02-22-2004, 02:55 AM   PM User | #1
doni
Regular Coder

 
Join Date: Oct 2002
Posts: 178
Thanks: 3
Thanked 0 Times in 0 Posts
doni is an unknown quantity at this point
Trying the CSS approach to positioning--couple questions...

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>
doni is offline   Reply With Quote
Old 02-22-2004, 03:29 AM   PM User | #2
missing-score
Senior Coder


 
missing-score's Avatar
 
Join Date: Jan 2003
Location: UK
Posts: 2,194
Thanks: 0
Thanked 0 Times in 0 Posts
missing-score is on a distinguished road
layers (DIV) will automatically expand to the full width.

I dont have time to go into a detailed explanation but you may want to have a look at the "float" property as it will be your main way of positioning.

some sites to look at that use CSS:

http://www.ithium.net
http://www.mindlesslemming.au.ms
<plug type="shameless">
http://www.freeipb.net/ibe
</plug>

If you look over how each site has been made and have a go you will learn alot.
missing-score is offline   Reply With Quote
Old 02-22-2004, 03:39 AM   PM User | #3
mindlessLemming
Senior Coder

 
Join Date: Oct 2003
Location: Australia
Posts: 1,963
Thanks: 0
Thanked 0 Times in 0 Posts
mindlessLemming is an unknown quantity at this point
Quote:
Originally posted by missing-score

http://www.mindlesslemming.au.ms
<plug type="shameless">
LOL
Thanks for that, none of my work has been used as an example to others before...
Although, that site was made when I had only known about CSS for three months.
My current project's use is far more advanced.
Navigate Australia

*Seeing as you're using absolute positioning, just give
#bottom{position:absolute;bottom:10px;}.

This isn't the best fix, but I feel the next step might be a little much for you at this point. (no offense )

You should know that position:absolute takes elements out of the natural flow of the page, which often causes problems if you want an inline element to fall beneath the absolutely positioned div.

Andrew
__________________

I take no responsibility for the above nonsense.


Left Justified

Last edited by mindlessLemming; 02-22-2004 at 03:48 AM..
mindlessLemming is offline   Reply With Quote
Old 02-22-2004, 03:42 AM   PM User | #4
missing-score
Senior Coder


 
missing-score's Avatar
 
Join Date: Jan 2003
Location: UK
Posts: 2,194
Thanks: 0
Thanked 0 Times in 0 Posts
missing-score is on a distinguished road
thats the one! I couldnt remember the address so I just found your profile and took the link, didnt think to check if it was the right one.

Having said that, your mindlessLemming site is still very cool
missing-score is offline   Reply With Quote
Old 02-22-2004, 04:47 AM   PM User | #5
doni
Regular Coder

 
Join Date: Oct 2002
Posts: 178
Thanks: 3
Thanked 0 Times in 0 Posts
doni is an unknown quantity at this point
Quote:
Originally posted by mindlessLemming
*Seeing as you're using absolute positioning, just give
#bottom{position:absolute;bottom:10px;}.

This isn't the best fix, but I feel the next step might be a little much for you at this point. (no offense )

You should know that position:absolute takes elements out of the natural flow of the page, which often causes problems if you want an inline element to fall beneath the absolutely positioned div.
I was trying to avoid using absolute for that very reason--but I couldn't find a better way to accomplish it.

The goal is to have a header, two colums (the left is my link menu and needs to be around 120-135 px wide & the right should be the width of the window - the width of the left column - some padding between the columns) and one footer.
doni is offline   Reply With Quote
Old 02-22-2004, 08:54 AM   PM User | #6
mindlessLemming
Senior Coder

 
Join Date: Oct 2003
Location: Australia
Posts: 1,963
Thanks: 0
Thanked 0 Times in 0 Posts
mindlessLemming is an unknown quantity at this point
3 Columns, header, footer always at bottom unless content extends.
Here you go


(ignore the gross colours!)
__________________

I take no responsibility for the above nonsense.


Left Justified
mindlessLemming is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 02:29 PM.


Advertisement
Log in to turn off these ads.