Div Alignment & Position

Shoot2Kill

02-02-2007, 02:21 PM

Hiya Guys...

I have a slight problem, i have just started to create my own web site, and have come across a problem.

i am sure it would be really easy to fix, and i probably just missed something out of the CSS, but here it goes...

CSS File

body{
text-align: left;
background-color: #171717;
font-family: courier new;
font-weight: normal;
font-size: 16pt;
}
h1{
color: #aaff55;
font-family: comic sans ms;
font-size: 32pt;
font-weight: normal;
}
h2{
color: #ffffff;
font-family: tahoma, serif;
font-size: 18pt;
font-weight: normal;
}
h3{
color: #aaff55;
font-family: comic sans ms;
font-size: 18pt;
font-weight: normal;
text-decoration: underline;
}

#container{
width: 760;
height: auto;
position: absolute;
right: 50px;
background-color: #d3d3d5;
}

#header{
width: 760;
height: 220;
background-image: url(images/Header.jpg);
background-repeat: no-repeat;
position: relative;
}

#sidebar {
width: 200;
height: auto;
overflow: auto;
float: left;
text-align: center;
}
#sidebar a:link {
color: #333333;
text-decoration: underline;
}
#sidebar a:visited {
color: #333333;
text-decoration: underline;
}
#sidebar a:hover {
color: 00ff00;
background-color: #171717;
}

#section{
width: 550;
height: auto;
overflow: auto;
margin-left: 10px;
}

#footer{
width: 760;
height: 186;
background-image: url(images/Footer.jpg);
background-repeat: no-repeat;
position: absolute;
}

HTML File

<html>
<head>
<title>
GCS-Computers - Friends, Games & Web Dev
</title>
<LINK REL=StyleSheet HREF="layout.css" TYPE="text/css" MEDIA=screen>
</head>

<body>
<div id="container">
<div id="header">
</div>
<div id="sidebar">
<a href="swat4.htm">SWAT 4 Server</a></li>
<a href="send.htm">Send E-Mail</a></li>
</div>
<div id="section">
Hello World !!!
</div>
<div id="footer">
</div>
</div>
</body>
</html>

Now, the problem is, when the main body (#section) is larger than the nav bar(#sidebar) then the #footer positions itself underneith the main #section...that is all good.. :D

however, if on one page the #section is only small and the #sidebar has many links, the #footer still positions itself under the body, even though the #sidebar is longer, this results in the #sidebar being behind #footer and proruding from the bottom...

a couple of links...

Working Fine - http://gcs-computers.net/section.htm
Long #sidebar - http://gcs-computers.net/sidebar.htm

Hope you guys can help me out...

S2K

EDIT--
the error with the sidebar displays differently on IE... but im looking to get it right on FF first.. :D

Excavator

02-02-2007, 02:46 PM

Goodmorning Shoot2Kill,
The random absolute positioning was not helping, remove that and add clear: both; and the footer will be pushed down by whichever column is longest.
Like this:
#container{
width: 760;
background-color: #d3d3d5;
overflow: hidden;
}
#header{
width: 760;
height: 220;
background-image: url(images/Header.jpg);
}
#sidebar {
width: 200;
float: left;
text-align: center;
}
#section{
width: 550;
margin: 0 0 0 210px;
}
#footer{
width: 760;
height: 186;
background-image: url(images/Footer.jpg);
clear: both;
}

Shoot2Kill

02-02-2007, 04:37 PM

Yes, Thankyou This Worked Great,

however, with the #container Div, i have entered
right: 50px;

but al of the container is aligned to the left, not right...

Shoot2Kill

02-02-2007, 08:28 PM

**Bump**

http://gcs-computers.net/index.htm

How do i align everything right (but leave a 50px gap like above links...) ??

Excavator

02-03-2007, 06:57 AM

#container{
width: 760px;
float: right;
margin: 0 50px 0 0;
background-color: #d3d3d5;
overflow: hidden;
}

Shoot2Kill

02-03-2007, 12:41 PM

OK, Thanks.. Worked Great, i should have thought of it.. lol...

1 more problem.. lol

on the site http://gcs-computers.net

when you hover on a link, it displays a block with span text in it, however this block is positioned "fixed" and i want it to be inside the sidebar <div> so that when the page is moved, or a different res is used, it will still position correctly..

sorry about al <div> questions, but it is the first time i have really used them, i used to use tables :( :( :( lol