...

View Full Version : Div Alignment & Position



Shoot2Kill
02-02-2007, 03: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, 03: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, 05: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, 09: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, 07:57 AM
#container{
width: 760px;
float: right;
margin: 0 50px 0 0;
background-color: #d3d3d5;
overflow: hidden;
}

Shoot2Kill
02-03-2007, 01: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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum