Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2

Thread: CSS floating

  1. #1
    New Coder
    Join Date
    Dec 2009
    Posts
    16
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Arrow CSS floating

    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.

    Code:
    #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*/
    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>
    <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>

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,666
    Thanks
    22
    Thanked 1,826 Times in 1,810 Posts
    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.


    You could try this sort of layout where the content is margined over enough to give the left column room and has no float or width.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •