1

I am working on a layout where there are 2 columns. What I am trying to achieve is this: left column fixed, right column fluid but with the right column first in the html.

So far I have this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">

    <title>2 cols: left fixed right fluid with right first in html</title>
    <style type="text/css">

    *,
    *:before,
    *:after {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    body{
        margin:0 20px;
        padding 0;
    }

    .main {
        position: relative;
        background-color:red;
        float:left;
        width:auto; 
        margin-left:240px;
        display:inline;
    }

    .main aside {
        float:left;
        width:240px;
        padding-right: 60px;
        margin-left:-240px;
        position:relative;
        text-align: right;
        background-color: aqua;
    }
    .right {
        float:left;
        width:100%;
        margin-right:-2140%;
    }
    </style>
</head>

<body>
    <div class="main">
        <section class="right">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</section>

        <aside>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</aside>
    </div>
</body>
</html>

which is working fine everywhere EXCEPT in IE9.

Any ideas how I can fix this for IE9 without using a conditional stylesheet for IE?

p.s. I'm only interested in IE9+

dmid
  • 483
  • 4
  • 18
  • 1
    http://stackoverflow.com/questions/22428261/combinating-fixed-and-fluid-elements-tableless/22428293#22428293 – Nico O Mar 17 '14 at 08:42
  • 1
    @NicoO Good suggestion, I'm [not a fan](http://stackoverflow.com/a/21378465/1725764) of using table display types for layout purposes. – Hashem Qolami Mar 17 '14 at 08:48
  • @NicoO this suggestion is not what I am trying to do. I want the right column to be before the left column in the html – dmid Mar 17 '14 at 08:57
  • @HashemQolami why not use `display:table` for layout purposes? it is the point of css to use things like this for layout so you don't need to use actual html tables for layout – Pete Mar 17 '14 at 09:32
  • @Pete As per the [Spec](http://www.w3.org/TR/CSS2/visuren.html#display-prop): `These values cause an element to behave like a element` and it may cause [change behavior of web browser](http://phrogz.net/css/WhyTablesAreBadForLayout.html) while rendering the page. Regardless of that, Table layouts may [make it impossible](http://stackoverflow.com/a/18516881/1725764) to [achieve the desired result](http://stackoverflow.com/a/18422880/1725764).
     – Hashem Qolami Mar 17 '14 at 09:46
  • @HashemQolami, I don't think you understand the difference between css tables and html tables – Pete Mar 17 '14 at 09:55
  • @Pete Well, that's a pure speculation. – Hashem Qolami Mar 17 '14 at 10:08

2 Answers2

2

I feel a bit bad about having to use calc for this. Maybe i should be have a look at old projects ;) If someone know a more elegant way, please feel free to edit or post a new answer.

Since you want the left columns to be fixed, i'd go for this: http://jsfiddle.net/umv78/1/

 * {
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
 }
 .left, .right {
     border: 1px solid red;
 }
 .right {
     float: right;
     width: calc(100% - 200px);
 }
 .left {
     width: 200px;
 }

HTML:

<section class="right">I'am on the Right ...</section>

<aside class="left">Lorem ipsum dolor ...</aside>
Nico O
  • 13,762
  • 9
  • 54
  • 69
  • 1
    +1 I don't feel writing an answer at the moment, but as an alternative this method would work **since IE4**: **http://jsfiddle.net/hashem/Tam7z/3/** – Hashem Qolami Mar 17 '14 at 09:25
  • IE4 could do that? amazing. I thought I had it bad with IE 5.5 for MAC ;) Nice one Hashem! – Nico O Mar 17 '14 at 09:29
  • Just figured it out that `transparent` border color value is supported in **IE6+**, As a fallback you could try `white` value instead. – Hashem Qolami Mar 17 '14 at 09:30
  • I won't go back there. I try to denie the existing of IE8 atm – Nico O Mar 17 '14 at 09:32
  • 1
    Seems @pete has done something similar by using `padding` property. – Hashem Qolami Mar 17 '14 at 09:34
  • I selected the example by @pete as it doesn't use calc() and so has better overall browser support, but this is also an option going forward. – dmid Mar 17 '14 at 11:09
1

try these styles:

.main:after {content:' '; display:block; height:0px; overflow:hidden; clear:both;}
.main {
    background-color:red;
    width:auto; 
    padding-left:300px;
}

.main aside {
    float:left;
    width:240px;
    margin-left:-300px;
    background-color: aqua;
}

.right {
    float:right;
    width:100%;
}

Example

Pete
  • 57,112
  • 28
  • 117
  • 166
  • nice, but you should change the width of the main aside to 300px as well. – Nico O Mar 17 '14 at 09:33
  • 1
    @NicoO, in the original, there is 60px between aside and section – Pete Mar 17 '14 at 09:46
  • 1
    @Pete - thanks, this seems to me to be the best solution - turns out it was a lot simpler to achieve than I thought! I've only tested it in IE9 but as I stated in the question that's all I required. – dmid Mar 17 '14 at 09:46