Results 1 to 3 of 3

Thread: 3 columns layout - fixed fluid fixed

  1. #1
    Join Date
    Jul 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default 3 columns layout - fixed fluid fixed

    Hi,

    I have a problem to create the layout like this http://www.dynamicdrive.com/style/la...d-fluid-fluid/ but with few differences. The content column should have static width, for example 800px and left and right column should have the same width and should fit to the size of the browser window.

    Is it possible to obtain such effect using css ?

    Best regards

  2. #2
    Join Date
    Feb 2007
    Posts
    293
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    It can be tricky. You might try something like this.

    In the style:
    Code:
      body { margin-left:0px; 
             margin-top:0px; 
             margin-right:0px; 
    }
    	#top {
    	        width: 100%;
              height: 90px;
              background: #FDE95E;
      }
    	#content {
    	        position: absolute;
    	        left: 50%;
    	        margin-left: -200px;
    	        width: 400px;
              background: #FF9966;
    	}
    	#wrapside1 {
    	        float: left;
    	        width: 50%;
    	}
    	#wrapside2 {
    	        float: right;
    	        width: 50%;
    	}
    	#side1 {
    	        margin-right: 200px;
              background: #EAEAEA;
    	}
    	#side2 {
    	        margin-left: 200px;
              background: #C8FC98;
    	}
    	#bottom {
    	        width: 100%;
              height: 90px;
              background: #FDE95E;
      }

    In the body
    Code:
    <div id="top"></div>
    <div id="container">
    <div id="content">Center column with fixed width</div>
    <div id="wrapside1">
        <div id="side1">Side column with fluid size, but equal to that of other side</div>
    </div>
    <div id="wrapside2">
        <div id="side2">Side column</div>
    </div>
    <div id="bottom"></div>

  3. #3
    Join Date
    Jul 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    It's working in FF but there is a problem with IE because right div sometimes goes lower than should be Can anyone fix it?

Bookmarks

Posting Permissions

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