Two floated columns - one fixed, one loose width

前端未结

关注

 8  1129

I\'ve looked around SO, but I cannot find one that matches my occurrence, I basically have two columns one fixed width (185px) and the other column has no fixed wid

相关标签:

8条回答

梦毁少年i

2021-02-02 06:55

If you don't want to use neither floats nor absolute positioning, the easiest I could come up with was

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      body {
        white-space: nowrap;
      }
      div.left {
        display: inline-block;
        width: 200px;
        white-space: normal;
        background-color: red;
        vertical-align: top;
      }
      div.right {
        display: inline-block;
        white-space: normal;
        background-color: green;
      }
    </style>
    <title></title>
  </head>
  <body>
    <div class="left">
      left
    </div>
    <div class="right">
      right
    </div>
  </body>
</html>

0 讨论(0)

忘了有多久

2021-02-02 06:57

Well, approved answer ia a good one, but for those that are searching for more here is a link. Hope you find this useful. ;)

http://www.dynamicdrive.com/style/layouts/category/C13/

0 讨论(0)
发布评论:

提交评论
- 加载中...
心在旅途

2021-02-02 06:57

I had tried almost all of the above solution until i stumbled upon this, and it works wonderfully for me. How to make a div to fill a remaining horizontal space (a very simple but annoying problem for CSS experts)

Not sure why, it seems you only need to float the column that has fixed width. The rest just fall in to place.

0 讨论(0)
发布评论:

提交评论
- 加载中...
野性不改

2021-02-02 07:06
The "position: absolute;" answer is pretty good, but it has cross-browser implications, especially if you're developing for IE. The best way to accomplish this is the following:
```
<html>
<head>
<style>
    div.right {
        float: right;
        width: 200px;
    }
    div.left {
        margin-right: 200px;
    }
    div.clear {
        clear: both;
    }
</style>
</head>
<body>
    <div class="right"></div>
    <div class="left"></div>
    <div class="clear"></div>
</body>
</html>
```
Please note that the div you require on the right side is called first in the HTML. Also, note the clearing of the float after the columns, which will come in handy if you have content below, or if there is a parent container.
0 讨论(0)
发布评论:

提交评论
- 加载中...

孤城傲影

2021-02-02 07:07

By using negative margins from this tutorial the CSS can look as follows

html, body, .container {
    height:100%;
    padding:0;
    margin:0;
}
.container {
    min-width: 300px;
}
.left {
    float:left;
    width: 185px;
    margin-right: -185px;
    height:100%;
}
.right {
    margin-left:185px;
}

http://jsfiddle.net/Y5FAT/1/

http://jsfiddle.net/Y5FAT/

0 讨论(0)

深忆病人

2021-02-02 07:07

Edited the solution, this time using flexbox, made the left column fixed using flex: 185px 0 0; then made the right column auto grow using flex-grow:1

*{
  box-sizing: border-box;
}

body{
  padding:0;
  margin:0;
}

#container{
  display:flex;
}

#left{
  height: 100vh;
  flex: 185px 0 0;
  background-color:tomato;
}

#right{
  flex-grow: 1;
}

#right > div{
  background:pink;
}

  <body>
    <div id="container">
      <div id="left"> Left </div>
      <div id="right">
        <div>
        Right <br/>
        dsafasfadf dsafdsfasdf asfasdf adfasdf dsafasfadf dsafasfadf dsafdsfasdf asfasdf adfasdf dsafasfadf  dsafasfadf dsafdsfasdf asfasdf adfasdf dsafasfadf dsafdsfasdf asfasdf adfasdf   dsafasfadf dsafdsfasdf asfasdf adfasdf dsafasfadf dsafdsfasdf asfasdf adfasdf   dsafasfadf dsafdsfasdf asfasdf adfasdf dsafasfadf dsafdsfasdf asfasdf adfasdf   dsafasfadf dsafdsfasdf asfasdf adfasdf dsafasfadf dsafdsfasdf asfasdf adfasdf   dsafasfadf dsafdsfasdf asfasdf adfasdf dsafasfadf dsafdsfasdf asfasdf adfasdf 
        </div>
      </div>
    </div>
  </body>

0 讨论(0)

1 2 下一页