Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS: Special Fluid Layout Problems

Tags:

html

css

alt text

See attached image. How is this accomplished? Gosh, I've been going CSS for 8 years but somehow never had to do this!

Thanks!

like image 573
Allen Gingrich Avatar asked Dec 14 '10 23:12

Allen Gingrich


2 Answers

This is how I do it:

<style> 
  #container { margin-left: 250px; }
  #sidebar {
    display: inline; /* Fixes IE double-margin bug. */
    float: left;
    margin-left: -250px;
    width: 250px;
  }

  /* Definitions for example only: */
  #sidebar { background: #FF0000; }
  #content { background: #EEEEEE; }
  #sidebar, #content { height: 300px; }
</style>

<div id="container">
  <div id="sidebar"></div>
  <div id="content"></div>
</div>

Example here

like image 170
simshaun Avatar answered Sep 28 '22 05:09

simshaun


I had this implemented on my site a while back, but I lost the code. Here's a quick CSS mockup:

The HTML:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title>Test</title>
    </head>

    <body>
        <div id="left">
            Mr. Fixed-width left
        </div>

        <div id="right">
            Mr. Dynamic right. Scroll me!
        </div>
    </body>
</html>

And here's the CSS:

body
{
    padding-left: 230px;
}

#left
{
    position: fixed;
    height: 100%;
    left: 0px;
    top: 0px;
    width: 200px;

    background-color: rgb(150, 150, 150);
    border-right: 5px solid rgb(50, 50, 50);

    padding: 10px;
}

#right
{    
    width: 100%;
    height: 10000px;
}

This should work, and here's a live copy: http://jsfiddle.net/dDZvR/12/.

Note that whenever you add padding, borders, margins, etc. to the left bar, you have to increase the padding on the body. It'll save you a ton of debugging ;)

Good luck!

like image 37
Blender Avatar answered Sep 28 '22 05:09

Blender