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

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

  •  15-06-2023
  •  | 
  •  

문제

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+

도움이 되었습니까?

해결책 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

다른 팁

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>
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top