PDA

View Full Version : Problem with right column beneath left column in browser


Corrosive
06-01-2008, 10:38 AM
I have a Sunday challenge! I have been toying with the idea of trying a layout with a full 100% width banner and then a two column layout underneath. Don't know why as I prefer normal centred TCLs but 'you never know'. Here is the URL.

http://corrosiveonline.co.uk/vers3/home.htm

Please ignore the styling (or lack of it) as I want to get the mechanics sorted out. Can anyone help with getting the 'centre column (as it says there) to position just under the nav bar rather than starting at the bottom of the left column please?

Code...



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test Layout </title>
<link href="cssfiles/co_mainlayout.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
body {
background-color: #000000;
background-image: url();
}
-->
</style></head>
<body>
<div align="center">
<div id="banner">
<div id="navbar_top">
<div id="top_menu_5" style="position:absolute; z-index:1">About</div>
<div id="top_menu_4" style="position:absolute; z-index:4">Mailing List</div>
<div id="top_menu_3" style="position:absolute; z-index:3">Articles</div>
<div id="top_menu_2" style="position:absolute; z-index:2">Views</div>
<div id="top_menu_1" style="position:absolute; z-index:1">News</div>
</div>
</div>
</div>
<div id="wrapper">
<div id="navbar">Nav Bar for DD Menus</div>
<div id="leftcolumn">Left Column </div>
<div id="centrecolumn">Content for id "centrecolumn" Goes Here</div>
<div id="footer">Content for id "footer" Goes Here</div>
</div>
</body>
</html>


CSS...


#banner {
height: 150px;
width: 100%;
position: relative;
background-attachment: scroll;
background-image: url(../assets/images/banner_img1.jpg);
background-repeat: no-repeat;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #CCCCCC;
background-color: #000000;
background-position: left;
}
#wrapper {
height: auto;
width: 90%;
position: relative;
margin-right: auto;
margin-left: auto;
background-color: #000000;
}
#navbar {
height: 100px;
width: 100%;
position: relative;
border: thin double #CCCCCC;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #CCCCCC;
}
#navbar_top {
height: 20px;
width: 50%;
position: relative;
left: 0%;
float: left;
}
#leftcolumn {
height: 500px;
width: 20%;
position: relative;
background-color: #CCFFFF;
}
#top_menu_1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
color: #CCCCCC;
height: 20px;
width: 20%;
position: relative;
float: left;
left: 0%;
font-weight: bold;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #CCCCCC;
}
#top_menu_2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
color: #CCCCCC;
height: 20px;
width: 20%;
position: relative;
float: left;
left: 20%;
font-weight: bold;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #CCCCCC;
}
#top_menu_3 {

font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
color: #CCCCCC;
height: 20px;
width: 20%;
position: relative;
float: left;
left: 40%;
font-weight: bold;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #CCCCCC;
}
#top_menu_4 {

font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
color: #CCCCCC;
height: 20px;
width: 20%;
position: relative;
float: left;
left: 60%;
font-weight: bold;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #CCCCCC;
}
#top_menu_5 {


font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
color: #CCCCCC;
height: 20px;
width: 20%;
position: relative;
float: left;
left: 80%;
font-weight: bold;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #CCCCCC;
}
#centrecolumn {
height: 500px;
width: 80%;
position: relative;
background-color: #666666;
float: right;
}
#rightcolumn {
height: 1500px;
width: 20%;
position: relative;
background-color: #CCFFFF;
float: right;
}
#head_wrapper {
height: auto;
width: 100%;
position: relative;
}
#content {
height: auto;
width: 100%;
position: relative;
}
#footer {
height: 40px;
width: 100%;
position: relative;
border: thin double #CCCCCC;
clear: both;
color: #CCCCCC;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: center;
}


I know there is some stuff in the css I am not using but will tidy later. Many thanks for nay help you can provide :-D

domedia
06-01-2008, 01:09 PM
You have to float your left column, if not it's going to take all available width.
The right column is floated already, which is great, but this only affects it's position on elements coming after it, not ahead of it.

Corrosive
06-01-2008, 01:27 PM
You have to float your left column, if not it's going to take all available width.
The right column is floated already, which is great, but this only affects it's position on elements coming after it, not ahead of it.

Cheers fella

That's got it! Can't believe I missed that :oops: . Might be time to get out and enjoy some sunshine.

Thanks very much.

davidj
06-01-2008, 01:29 PM
sunshine.....sunshine!

are you takin the piss

its lashing down here in the toon

Corrosive
06-01-2008, 02:39 PM
sunshine.....sunshine!

are you takin the piss

its lashing down here in the toon

Through risk of sounding like a soft southener. We got a whole month's rain in a day, in the south, last weekend whilst they played cricket at Old Trafford! ;-)

davidj
06-01-2008, 03:57 PM
it may be rainin but im going out with my T Shirt on

being from the toon like

Corrosive
06-01-2008, 04:06 PM
it may be rainin but im going out with my T Shirt on

being from the toon like

Lol! Your going to wear a t-shirt? I though the Geordie Uniform was no shirt at all, come rain, shine, hail, blizzards, arctic winds...:wink:

Ricky55
06-01-2008, 04:29 PM
do you have the famous Geordie belly to keep you warm?

davidj
06-01-2008, 07:37 PM
yes

like jimmy 5 bellies

well

its like this

athletes have honed bodies depending on the sport they partake in. Weight lifters have strong arms and legs, pro footballers have strong toned legs, runners are thin and streamlined. I however have the physique of a programmer!

Corrosive
06-02-2008, 04:30 PM
I however have the physique of a programmer!

It's official then - Davidj - built for comfort not speed. It is hard when the nearest food source to any PC tends to be Haribo, 9 times out of 10 :wink: