...

View Full Version : CSS floating



qhx398
12-14-2009, 05:16 AM
Hey everyone, for my site I have my navigation links on the left, main content on the right. When the navigation bar comes in, the content box will move all the way down to the bottom of the screen and go to the very right. But, without the navigation bar everything is displayed fine. I can't figure out what im missing in my code to make the content box go beside the navigation bar below iv included the code to the stylesheet and the index file. Any help or ideas id appreciate thanks.


#container {
width:995px;
border:solid black 1px;
}
#header {
width:960px;
height:233px;
padding:5px;
border:none;
position:relative;
}
.logo {
position:absolute;
left:150px;
}
#rezexpert {
width:500px;
height:auto;
padding:5px;
border:none;
position:relative;
left:230px;
}
#headertext {
width:500px;
height:auto;
padding:5px;
border:none;
position:relative;
left:230px;
text-align:center;
font-family:"Arial Black","Times New Roman";
}
#leftnav {
position:relative;
float:left;
width:128px;
height:auto;
padding:0px;
border: solid black 1px;
}
#leftnav a {

color: black;
display: block;
text-decoration: underline;
font-weight: bold;
font-family: Verdana;
font-size: 18px;

}
#leftnav a:visited {

color: #000000;
text-decoration: underline;
font-weight: bold;

}
#leftnav a:hover {

color: white;
text-decoration: none;
font-weight: bold;

}
.navlinks ul {

margin: auto;
width:134px;
background-color: silver;
border-top: 1px solid black;
border-right: 1px solid black;
border-left: 1px solid black;
padding: 0;
margin: 0;

}
.navlinks li {

margin:0px 0px 0px 0px;
border-bottom: 1px solid black;
list-style-type: none;

}
.navlinks li a {

color: #000000;
width: 128px;
text-decoration: none;
font-size: 16px;
font-family: Verdana;
padding: 0px 5px;

}
.navlinks li a:hover{

color: #ffffff;
width: 124px;
background-color: green;
/*If you want to use a color for the background instead replace above line with background-color: [insert color here with # sign in front];*/
text-decoration: underline;


}
#footer {
height:auto;
border:none;
clear:both;
position:relative;
float:center;
}
#footertext {
font-family:"Times new Roman";
font-size:8pt;
text-align: center;
}
#content {
position:relative;
float:right;
width:820px;
height:auto;
border:solid black 2px;
background-color:#FFFFFF;
}
body {
margin-left:10px;
background-color:#EA3130;
font-family:"Arial", "Times New Roman";
color:Black;
font-size:10pt;
}
p.white {
font-family"Arial Black", "Times New Roman";
color:white;
font-size:10pt;
}
h1 {
font-family:"Arial Black", "Times New Roman";
color:Black;
}


/*list style=none*/


<!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>
<link href="images/favicon.ico" rel="shortcut icon" type="image/x-icon">
<link href="styles/main.css" rel="stylesheet" type="text/css">
<meta name="keywords" content="camping,rv,tenting,delta,tsawassen,canada">
<meta name="description" content="Campground and recreation vehicle parking equipped with full hook-up, water, and electricity. Provides list of features, maps and reservation information.">
<title> Parkcanada, Delta, British Columbia, Canada- Camping and RV Park </title>
</head>

<body>
<div id="container">
<div id="header">
<div class="logo">
<img src="images/logo.gif" alt="Logo"/>
</div>
</div>

<div id="rezexpert">
<a href="http://reservations.parkcanada.com" target="_blank">
<img src= images/rezrobot.gif alt="Online Booking System - Powered by RezExpert"></a>
</div>

<div id="headertext">
<p class="white"> OPEN ALL YEAR ROUND EXCEPT DECEMBER 24 - JANUARY 4 </p>
</div>

<div id="leftnav">
<div class="navlinks">
<!--#include virtual="includes/navigation.html" -->
</div>
</div>

<div id="content">
<p>Parkcanada RV Park is located in Tsawwassen, seven minutes from the ferry terminal, which serves Victoria, Nanaimo and the beautiful Gulf Islands. Enjoy the park-like setting with the convenience of being minutes from waterslides, golf courses, beaches and shopping. Our Campground caters to a wide range of visitors. We can accommodate anywhere from a tent to a beautiful Class A Motorhome!</p>

<p>We have sites with full hook-ups, water and electricity, electrical only, as well as fully grassed tent sites. Most of our RV sites have picnic tables with a gravel pad and a grass lawn. We even have pull-thru sites which are limited so please phone for availability. Once you have had the chance to settle into your site and have taken a walk around the park to explore all the features we have to offer, you will find the following: shower houses, two payphones, and one with internet connection, a playground, propane filling station and an outdoor pool (seasonal). At the office you will find: Laundry facility, a sitting lounge with a television and pool table, a convenience store, and a WiFi Hotspot!</p>
</div>

<div id="footer">
<!--#include virtual="includes/footer.html" -->
</div>
</div>
</body>
</html>

Excavator
12-14-2009, 05:49 AM
Hello qhx398,
It seems to work in FF3.5, IE8 and IE7.

You do have your ul width set wider than it's containing div.
#leftnav is width:128px;
.navlinks ul is width:134px; plus the 1px border for a total width of 136px.
See how the box model works. (http://www.w3.org/TR/CSS2/box.html)


You could try this sort of layout (http://nopeople.com/CSS/equal_length_columns/index.html)where the content is margined over enough to give the left column room and has no float or width.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum