Sidbar positioning using CSS

D

Don G

I am working on a website that has a menu sidebar. I have the menu
worked out just fine, but I would like to put a few more elements in the
the sidebar. The catch is, that I would like these elements to be
placed at the very bottom of the sidebar area. The content area changes
size depending on what I put in it, but I don't want to use absolute
positioning for this; I would rather have it done dynamically.

If any one has any suggestions, I would appreciate it.

Thank you,

Don

Here is some sample code:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
<style>
/* At-Rules */

body {
background-color: gray;
font-size: 15px;
font-family: cursive;
}

#menu {
float: left;
width: 90px;
margin: 0 0 0 0;
padding: 0 0 0 0;
}

#menu ul {
margin: 0 0 0 0;
padding: 0 0 0 0;
list-style-type: none;
}

#menu a {
display: block;
color: white;
background-color: #0066cc;
width: 93px;
padding: 3px 12px 3px 8px;
text-decoration: none;
border-bottom: 1px solid #fff;
font-weight: bold;
font-size: 12px;
}

*html #menu a {
width: 110px;
padding: 3px 12px 3px 8px;
}

#menu a:hover {
background-color: #82A3CC;
color: white;}

#menu a:active {
background-color: #3033cc;
color: white;}

#container {
padding: 0 0 0 0;
margin: 0 0 0 0;
background-color: #0066cc;
color: white;
line-height: 130%;
width: 598px;
}

#top {
padding: .25em .25em .25em .25em;
background-color: #0066cc;
text-align: center;
border: 1px solid blue;
}

#top h1 {
font-size: 2em;
font-weight: bolder;
padding: 0 0 0 0;
}

#contentwindow {
background-color: #dadada;
margin-left: 113px;
padding-top: 10px;
padding-bottom: 10px;
padding-right: 0;
width: 484px;
height: 500px;
}

*html #contentwindow {
margin-left: 100px;
padding-top: 10px;
padding-bottom: 10px;
}

/* End of style section. Generated by AceHTML at 2/8/2005 9:10:14 AM */

</style>

</head>
<body>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Test Page</title>
</head>
<body>
<div id="container">
<div id="top"><h1>Test Page</h1></div>
<div id="menu">
<ul>
<li><a href="">Item 1</a></li>
<li><a href="">Item 2</a></li>
<li><a href="">Item 3</a></li>
<li><a href="">This link should be at the bottom.</a></li>
</ul>
</div>
<div id="contentwindow"></div>
</div>
</body>
</html>
 
K

Karl Core

Don G said:
I am working on a website that has a menu sidebar. I have the menu worked
out just fine, but I would like to put a few more elements in the the
sidebar. The catch is, that I would like these elements to be placed at
the very bottom of the sidebar area. The content area changes size
depending on what I put in it, but I don't want to use absolute positioning
for this; I would rather have it done dynamically.

If any one has any suggestions, I would appreciate it.
Click to expand...

If the code you've listed here is supposed to be a complete page, I
recommend that you look at it a tad bit closer before asking for help -
particularly in the fact that you've re-started the whole document after the
close of your CSS
 
D

Don G

If the code you've listed here is supposed to be a complete page, I
recommend that you look at it a tad bit closer before asking for help -
particularly in the fact that you've re-started the whole document after the
close of your CSS
Click to expand...

Doh! I was cutting and pasting a couple of files together to make it
all in one file, and I guess I got a little something extra. I hope
this is better:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
<style>
body {
background-color: gray;
font-size: 15px;
font-family: cursive;
}

#menu {
float: left;
width: 90px;
margin: 0 0 0 0;
padding: 0 0 0 0;
}

#menu ul {
margin: 0 0 0 0;
padding: 0 0 0 0;
list-style-type: none;
}

#menu a {
display: block;
color: white;
background-color: #0066cc;
width: 93px;
padding: 3px 12px 3px 8px;
text-decoration: none;
border-bottom: 1px solid #fff;
font-weight: bold;
font-size: 12px;
}

*html #menu a {
width: 110px;
padding: 3px 12px 3px 8px;
}

#menu a:hover {
background-color: #82A3CC;
color: white;}

#menu a:active {
background-color: #3033cc;
color: white;}

#container {
padding: 0 0 0 0;
margin: 0 0 0 0;
background-color: #0066cc;
color: white;
line-height: 130%;
width: 598px;
height: 1000px;
}

#top {
padding: .25em .25em .25em .25em;
background-color: #0066cc;
text-align: center;
border: 1px solid blue;
}

#top h1 {
font-size: 2em;
font-weight: bolder;
padding: 0 0 0 0;
}

#contentwindow {
background-color: #dadada;
margin-left: 113px;
padding-top: 10px;
padding-bottom: 10px;
padding-right: 0;
width: 484px;
height: 100%;
}

*html #contentwindow {
margin-left: 100px;
padding-top: 10px;
padding-bottom: 10px;
}
</style>
</head>
<body>
<div id="container">
<div id="top">
<h1>Test Page</h1>
</div>
<div id="menu">
<ul>
<li><a href="">Item 1</a></li>
<li><a href="">Item 2</a></li>
<li><a href="">Item 3</a></li>
</ul>
<ul style="vertical-align: bottom;"><li><a href="">This link should be
at the bottom.</a></li><ul>
</div>
<div id="contentwindow">
</div>
</div>
</body>
</html>
 
D

Don G

If the code you've listed here is supposed to be a complete page, I
recommend that you look at it a tad bit closer before asking for help -
particularly in the fact that you've re-started the whole document after the
close of your CSS
Click to expand...

Doh! Thank you for the correction. I was cutting and pasting files
together, and I guess I got a little something extra. I have corrected
the problem that you mentioned, and I validated the code to make sure
that it is correct.

Thanks again,

Don

Here is the corrected code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
<style type="text/css">
body {
background-color: gray;
font-size: 15px;
font-family: cursive;
}

#menu {
float: left;
width: 90px;
margin: 0 0 0 0;
padding: 0 0 0 0;
}

#menu ul {
margin: 0 0 0 0;
padding: 0 0 0 0;
list-style-type: none;
}

#menu a {
display: block;
color: white;
background-color: #0066cc;
width: 93px;
padding: 3px 12px 3px 8px;
text-decoration: none;
border-bottom: 1px solid #fff;
font-weight: bold;
font-size: 12px;
}

*html #menu a {
width: 110px;
padding: 3px 12px 3px 8px;
}

#menu a:hover {
background-color: #82A3CC;
color: white;}

#menu a:active {
background-color: #3033cc;
color: white;}

#container {
padding: 0 0 0 0;
margin: 0 0 0 0;
background-color: #0066cc;
color: white;
line-height: 130%;
width: 598px;
height: 1000px;
}

#top {
padding: .25em .25em .25em .25em;
background-color: #0066cc;
text-align: center;
border: 1px solid blue;
}

#top h1 {
font-size: 2em;
font-weight: bolder;
padding: 0 0 0 0;
}

#contentwindow {
background-color: #dadada;
margin-left: 113px;
padding-top: 10px;
padding-bottom: 10px;
padding-right: 0;
width: 484px;
height: 910px;
}

*html #contentwindow {
margin-left: 100px;
padding-top: 10px;
padding-bottom: 10px;
}
</style>
</head>
<body>
<div id="container">
<div id="top">
<h1>Test Page</h1>
</div>
<div id="menu">
<ul>
<li><a href="">Item 1</a></li>
<li><a href="">Item 2</a></li>
<li><a href="">Item 3</a></li>
</ul>
<ul><li><a href="">This link should be at the bottom.</a></li></ul>
</div>
<div id="contentwindow">
</div>
</div>
</body>
</html>
 
R

Richard

If the code you've listed here is supposed to be a complete page, I
recommend that you look at it a tad bit closer before asking for help -
particularly in the fact that you've re-started the whole document
after the
close of your CSS
Click to expand...

He was showing the CSS seperately from the actual page coding.
Any fool can easily cut and paste it to where it should be.
But you're no fool are you?
 
R

rf

Richard said:
He was showing the CSS seperately from the actual page coding.
Click to expand...

No, RtS, he was not.

That is shown by the fact that he corrected himself and reposted the code,
only an hour or so after Karls post.
Any fool can easily cut and paste it to where it should be.
Click to expand...

So, being any fool you would have done so? What is the op's solution then?
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Positioning CSS components 1
Interfering CSS 1
Working on mobile css menu with plenty of frustration! 2
Horizontal menu bar header 2
Help with my responsive home page 2
Help needed with code 5
Need help with code on website (noob) 2
Align img inside nav tabs section 5

Members online

Total: 33 (members: 1, guests: 32)
Robots: 323

Forum statistics

Threads
473,755
Messages
2,569,535
Members
45,007
Latest member
obedient dusk

Latest Threads

Top