4 Replies Latest reply on Apr 18, 2010 11:31 AM by Nancy OShea

    CSS Help Needed

    Naughtytrini

      Hello,

      Can someone please help me with a  problem that's been trying to solve for the past 2 weeks.  I've building  a site that is suppose to span the entire width of a browser.  It  contains 2 main div's, a header div and content div.

      The header  div spans the entire width of the browser and contracts when the user  expands or contracts the browser.  That is working correctly.  Now the  content div is divided into 2 div's..a left navigation one and a main  content one.

      The left nav div has a width that is set in pixels  of 188.  The right content div currently has a width set in percentage.   My problem is that when I add content and set the width to be anything  greater than 82%, this div drops below the left nav div when the browser  is contracted.

      Both the left nav and main content div are  floated left.  Here is the basic outline of my html code and of my css.



      <!--header-->
      <div  id="header"><!--header content-->  </div>
      <!--end  header div-->

      <!--content div-->
      <div  id="content">
      <!--left nav-->
      <div  id="left"></div>
      <!--end left nav-->

      <!--right main content-->
      <div id="right"></div>
      <!--end right main content-->

      </div>
      <!--end  content div-->


      /* CSS */

      @charset "utf-8";
      /*  CSS Document */

      html, body {

      }

      body {
      font-family: Arial, Helvetica, Verdana, Sans-serif;
      font-size: 13px;
      color: #000000;
      background: #ffffff;
      }


      * {
      padding: 0;
      margin: 0;
      }

      #header {
      background-image:  url(../images/header/header_bg.gif);
      width: 100%;
      height: 61px;
      background-repeat: no-repeat;
      background-color: #88a7c9;
      }

      #content  {
      width: 100%;
      padding: 0px;
      margin: 0px;
      overflow:  hidden;
      text-align: left;
      }

      #left {
      width: 182px;
      float: left;
      display: inline;
      border-right-width: 2px;
      border-right-style: solid;
      border-right-color: #999;
      -webkit-box-shadow: 4px 0px 7px  #c0c0c0;
      -moz-box-shadow: 4px 0px  7px #c0c0c0;
      box-shadow: 4px 0px 7px #c0c0c0;

      }

      #right  {
      float: left;
      width: 81%;
      display: inline;
      padding-right: 10px;
      text-align: left;
      }


      Does anyone  have any ideas on how I can change the css so when the user expands or  contracts the browser size the content in the content div doesn't drop?


      Thanks