Floating layout issues!

[Alex]

Hello everyone,

I'm working on a project that is classified, so I cannot show the actual results of my code to you. I can explain that the right column is simply dropping and the left content column is 100% of the viewing area.

I'm trying to implement a floated 2 column fluid layout into an existing site using tables for this. If someone could help me get this solution, which is mostly comprised through Paul O'Brien's ideas, working, then I could probably get my boss to use it a lot easier. :-P

Anyway, here is the current CSS I've written to make this work. I've left out the markup as it is self-explanatory.

/* @group Alex's Floating Layout Alternative */

html, body {
width: 100%;
}

#outer {
min-height: 100%;
margin-right: 180px;
}

* html  #outer {
height: 100%;
}

html>body #outer {
height: auto;
}

#left {
float: right;
position: relative;
width: 100%;
}

#right {
width: 180px;
float: right;
position: relative;
margin-right: 179px;
}

* html #right {
margin-left: -3px;
}

.outerwrap {
float: left;
width: 100%;
position: relative;
margin-right: -1px;
}

Edit: Actually, here is an example of the markup:

<div id="outer">
<div class="outerwrap">
<div id="left">
content
</div>
</div>
<div id="right">
sub-navigation
</div>
</div>

[Erik J]

If I get the picture right. Just to give the idea to start, the use of margins can be reconsidered for IE; The float need to come before in code to sit right of the #outer. If you move the div #right first in html both divs can have min-height 100%. The css accordingly adjusted:

html, body {
margin:0;
padding:0;
height: 100%;
}
#outer {
min-height: 100%;
margin-right: 180px;
}
* html  #outer {
height: 100%;
}
html>body #outer {
height: auto;
}
#left {
float: right;
position: relative;
width: 100%;
}
#right {
width: 180px;
min-height: 100%;
float: right;
position: relative;
}
* html #right {
margin-left: -3px;
}
.outerwrap {
float: left;
width: 100%;
position: relative;
margin-right: -1px;
}

<div id="right">
sub-navigation
</div>
<div id="outer">
<div class="outerwrap">
<div id="left">
content
</div>
</div>
</div>

[Alex]

If I get the picture right. Just to give the idea to start, the use of margins can be reconsidered for IE; The float need to come before in code to sit right of the #outer. If you move the div #right first in html both divs can have min-height 100%. The css accordingly adjusted:

html, body {
margin:0;
padding:0;
height: 100%;
}
#outer {
min-height: 100%;
margin-right: 180px;
}
* html  #outer {
height: 100%;
}
html>body #outer {
height: auto;
}
#left {
float: right;
position: relative;
width: 100%;
}
#right {
width: 180px;
min-height: 100%;
float: right;
position: relative;
}
* html #right {
margin-left: -3px;
}
.outerwrap {
float: left;
width: 100%;
position: relative;
margin-right: -1px;
}

<div id="right">
sub-navigation
</div>
<div id="outer">
<div class="outerwrap">
<div id="left">
content
</div>
</div>
</div>

Thank you Eric, I'll give that a try here in a little bit.

If you could, take a look at my other thread, where I could use your expertise: http://www.sitepoint.com/forums/show...43#post3836943