#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    2
    Rep Power
    0

    Help with three column CSS layout Chrome/Firefox support


    Hello,

    I don't pretend to be a expert web designer, did a few websites 7 or 8 years ago and haven't done much since, recently a friend asked me to help her setup a website for her new business. I've done a tableless fixed width layout in CSS with three columns, the website looks perfect in internet explorer, but for some reason in Chrome/Firefox the right nav bar doesn't stay within the main container DIV. Does in IE. You can see what I mean below,

    http://www.relaxhouse.co.uk/index_4.php

    Here's my CSS code,
    Code:
    #mainblock {
      float: top;
      height: 900px;
      margin: 0 auto;
      width: 1024px;
      background-color: #EDE3D9;
      border: 1px solid black;
      overflow: hidden;
      }
    
    #leftnav {
    	float: left;
    	width: 200px;
    	height: 900px;
    	padding: 0px 0;
    	margin: 0 0px;
    	display: inline;
    	background-color: #B5A190;
    	border-right: 1px solid black;
    	overflow: hidden;
      }
     
    #rightnav {
    	position: absolute;
    	right: 0;
    	top: 0;
    	float: right;
    	width: 170px;
    	height: 900px;
    	padding: 20px 10;
    	margin: 0 0px;
    	display: inline;
    	background-color: #B5A190;
    	border-left: 1px solid black;
    	text-align: right;
    	overflow: hidden;
    	}
    
    #content {
      margin: 0px 10em;
      padding-left: 80px;
      padding-right: 80px;
     }
    and here's the actual page,

    Code:
    <div id="mainblock">
    <div id="leftnav">
    	<img src="./img/bookcaselong_2.png" height="100%" width="100%">
    	</div>
    
    <div id="rightnav">
    	<img src="./img/relaxhouse_sm.png">
    	<br><br>
    	<a href="index_3.php?page=content/main.htm">Home</a> -<br>
    	<a href="./content/Relax House Pricelist.pdf">Pricelist</a> -<br>
    	<a href="index_3.php?page=content/main.htm">Photo Gallery</a> -<br>
    	<a href="index_3.php?page=content/main.htm">Enquiries</a> -<br>
    	<a href="index_3.php?page=content/main.htm">How to find us</a> -<br>
    	<a href="index_3.php?page=content/main.htm">About</a> -<br>
    	<br>
    	<br>
    	<br><p class="rightnavextras">
    	Relax House<br>
    	Salon 62<br>
    	62a West Street<br>
    	Harrietsham<br>
    	ME17 1HU<br>
    	01622 858276
    	<br>
    	<br>
    	<br>
    	Follow us on <a href="https://www.facebook.com/RelaxHouseatSalon62">Facebook!</a></p>
    	<br><br>
    		<img src="./img/rightnavtop.png">
    
    </div>	
    
    <div id="content">
    	<?php include $page?>
    </div>
    	
    </div>
    Does anyone have any ideas how to get Chrome/Firefox to keep that right nav inside the content container?
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Posts
    16
    Rep Power
    0
    I rewrote the code, let me know what you think. Also you can't float elements to the 'Top' only to the left or right.
    PHP Code:
    <!doctype html>
    <
    html lang="en">
    <
    meta charset="utf-8">
    <
    head>
    <
    link rel="stylesheet" href="styles.css" />
    <
    title>Testing</title>
    </
    head>
    <
    body>

    <
    div id="mainblock">
    <
    div id="leftnav">
        
    Content for left nav
    </div>

    <
    div id="rightnav">
        <
    ul>
        <
    li><a href="index_3.php?page=content/main.htm">Home</a></li
        <
    li><a href="./content/Relax House Pricelist.pdf">Pricelist</a></li
        <
    li><a href="index_3.php?page=content/main.htm">Photo Gallery</a></li
        <
    li><a href="index_3.php?page=content/main.htm">Enquiries</a></li
        <
    li><a href="index_3.php?page=content/main.htm">How to find us</a></li
        <
    li><a href="index_3.php?page=content/main.htm">About</a></li>
        <
    span class="clearfix"></span>
    </
    div>    

    <
    div id="content">
        <
    p>Page content will go here<p>
        <
    span class="clearfix"></span>
    </
    div>
        
    <
    div id="footer">
        <
    p>This is the area for the footer</p>
        <
    class="company">Relax House<br>
        
    Salon 62 62a West Street<br
        
    Harrietsham ME17 1HU<br>
        
    01622 858276 </p>
    <
    span class="clearfix"></span>
    </
    div>
    </
    div>
    </
    body>

    </
    html>

    <
    style>
    .
    clearfix{
        
    clear:both;
    }

    #mainblock{
        
    width900px;
        
    margin0 auto;
    }

    #leftnav{
        
    floatleft;
        
    border1px solid #ccc;
        
    width200px;
        
    height500px;
    }

    #rightnav{
        
    floatright;
        
    border1px solid #ccc;
        
    width200px;
        
    height500px;
    }

    #content{
        
    floatleft;
        
    text-aligncenter;
        
    width480px;
        
    border1px solid #ccc;
    }

    #footer{
        
    positionfixed;
        
    bottom5px;
        
    height200px;
        
    border-top1px solid #ccc;
        
    width800px;  
    }

    .
    company{
        
    float:right;
    }
    ul{    
        
        list-
    stylenone;
        
    displayinline;
    }

    li{
        
    margin-top4px
    }

    a{
        
    text-decorationnone;

  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    2
    Rep Power
    0
    Thank's that did the trick!

IMN logo majestic logo threadwatch logo seochat tools logo