2 Column Div Layout: Right Column With Fixed Width, Left Fluid

2 column div layout: right column with fixed width, left fluid

Remove the float on the left column.

At the HTML code, the right column needs to come before the left one.

If the right has a float (and a width), and if the left column doesn't have a width and no float, it will be flexible :)

Also apply an overflow: hidden and some height (can be auto) to the outer div, so that it surrounds both inner divs.

Finally, at the left column, add a width: auto and overflow: hidden, this makes the left column independent from the right one (for example, if you resized the browser window, and the right column touched the left one, without these properties, the left column would run arround the right one, with this properties it remains in its space).

Example HTML:

<div class="container">
    <div class="right">
        right content fixed width
    </div>
    <div class="left">
        left content flexible width
    </div>
</div>

CSS:

.container {
   height: auto;
   overflow: hidden;
}

.right {
    width: 180px;
    float: right;
    background: #aafed6;
}

.left {
    float: none; /* not needed, just for clarification */
    background: #e8f6fe;
    /* the next props are meant to keep this block independent from the other floated one */
    width: auto;
    overflow: hidden;
}​​

Example here: http://jsfiddle.net/jackJoe/fxWg7/

CSS Left Column fluid & Right Column fixed width

As your second div is absolutely positioned, right:0 needs to be added to make it stick to the right, instead of float:right. I edited your fiddle, take a look:

http://jsfiddle.net/oLuzay16/

We can also use css width:calc(100% - 200px); to make the width of the first div 100% of the container minus 200px to account for the absolutely positioned div. Calc will work in most newer browsers, check here for a complete list: http://caniuse.com/#feat=calc

Two column layout with left fluid and right fill the rest width

http://jsfiddle.net/A8zLY/2333/
Fiddle from link I posted.
right does not need fixed width. See link above

width:auto

Is this what you're looking for?

2 column layout (Left column fixed width, right fluid + clear:both)

Here's your altered CSS:

html, body {
    background: #ccc;
}

.wrap {
    margin: 20px;
    padding: 20px;
    padding-right:240px;
    background: #fff;
    overflow:hidden;
}

.main {
    margin: 0 -220px 0 auto;
    width: 100%;
    float:right;
}

.sidebar {
    width: 200px;
    float: left;
    height: 200px;
}

.main, .sidebar {
    background: #eee; min-height: 100px;
}

.clear { clear:both; }
span { background: yellow }

Basically what I've done is change the way your layout is done, so that .main div is floated on the right. To do this, we had to add 2 things:

1. A padding of 240px on the .wrap div, and
2. A right margin on the .main div of -220px to properly align the fluid part of the page.

Because we've floated the .main div on the right, the clear: both; now only affects content inside the .main div, as you want.

You can see a demonstration here: http://jsfiddle.net/6d2qF/1/

2 column div layout: right column fixed width, left fluid, height relative to eachother

So, I got an answer to my question from @thirtydot (see comment above):

Do you need to support IE7? If not, you can use display: table-cell

CSS layout with left column fixed and right column fluid?

.promoBlock { width:90%; margin:auto; } 
.promoImg { width:300px; float:left; background-color:red; }
.promoContent { margin-left:300px; background-color:green; }

Code: http://jsfiddle.net/P4RBj/

P.S: Didn't get promoblock needs to fix at 120px. If so, your inner div is wider (300px).

Two Column Div Layout: Left = Fluid, Right = Fixed and Scrollable

Try this - jsFiddle

body {
    margin: 0 0 0 0;
    background-color: #797979;
    /*overflow: hidden;*/
}
#page-wrap {
    background: white;
    max-width: 100%;
}
#main-content {
    position:absolute;
    right:200px;
    left:0px;
    padding:20px;
}
#right-sidebar {
    background-color: #cacaca;
    position:fixed;
    overflow-y:scroll;
    right:0px;
    width:200px;
    height:100%;
}

2 columns, one side fluid , one side fixed

Turn your classes into ids or they will both inherit a width of 100%; then set the width.

.column-ab {background-color: black; width: 100%;}#col-aside,  #col-content {float: left;}#col-content {background-color: cyan; width: calc(100% - 300px);}#col-aside {background-color: yellow; width: 300px;}.column-ab:after {display: table; content: ""; clear: both;} /* clear */

<div class="column-ab"> <div id="col-content">content section</div> <div id="col-aside">side section</div></div>