CSS 2 columns, left fixed right fluid, with right col first in html

StackOverflow https://stackoverflow.com/questions/22449802

  •  15-06-2023
  •  | 
  •  

Question

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+

Was it helpful?

Solution 2

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

OTHER TIPS

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>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top