Question 211890 in Html Question posted in
Some basic documentation can be found here.

Html – Two columns, fixed width and fluid, using negative margins

I need to create a 2 columns layout side by side, one fixed width and one fluid.

The columns must fill 100% of the container width and with 2 versions: fixed on left and fixed on right.

I am using negative margin to accomplish that but I have two problems:

  1. When using right column with fixed width there is a gap on the right;

  2. The version using left column with fixed width is not working at all.

Could someone help me out fixing this?

* {
  -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
} 

div.container {
  clear: both;
  overflow: hidden;
}


div.container.right-fixed {
  border: 1px solid red;
}

div.container.right-fixed div.fixed {
  background-color: lightblue;
  float: left;
  margin-right: 80px;
  padding: 10px;
  width: 160px;
}

div.container.right-fixed div.fluid {
  background-color: lightgreen;
  float: left;
  margin-left: -240px;
  padding: 10px;
  width: 100%;
}

div.container.right-fixed div.fluid div.content {
  margin-left: 240px;
}


div.container.left-fixed {
  border: 1px solid red;
}

div.container.left-fixed div.fixed {
  background-color: lightblue;
  float: left;
  margin-left: 80px;
  padding: 10px;
  width: 160px;
}

div.container.left-fixed div.fluid {
  background-color: lightgreen;
  float: left;
  margin-left: -240px;
  padding: 10px;
  width: 100%;
}

div.container.left-fixed div.fluid div.content {
  margin-left: 240px;
}
<h1>Rigth column fixed width</h1>

<div class="container right-fixed">
  <div class="fluid">
    <div class="content">
      Fluid
    </div>
  </div>
  <div class="fixed">  
     Fixed
  </div>
</div>

<h1>Left column fixed width</h1>

<div class="container left-fixed">
  <div class="fixed">  
     Fixed
  </div>
  <div class="fluid">
    <div class="content">
      Fluid
    </div>
  </div>
</div>
Tags:

2

Answers


  1. 0

    Time for you to study up on flexbox. Here all I’ve done is remove your negative margins and floats, and add display: flex; to your container.

    * {
  -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
} 

div.container {
  clear: both;
  overflow: hidden;
  display: flex;
}


div.container.right-fixed {
  border: 1px solid red;
}

div.container.right-fixed div.fixed {
  background-color: lightblue;
  padding: 10px;
  width: 160px;
}

div.container.right-fixed div.fluid {
  background-color: lightgreen;
  padding: 10px;
  width: 100%;
}

div.container.right-fixed div.fluid div.content {
  margin-left: 240px;
}


div.container.left-fixed {
  border: 1px solid red;
}

div.container.left-fixed div.fixed {
  background-color: lightblue;
  padding: 10px;
  width: 160px;
}

div.container.left-fixed div.fluid {
  background-color: lightgreen;
  padding: 10px;
  width: 100%;
}

div.container.left-fixed div.fluid div.content {
  margin-left: 240px;
}
    <h1>Rigth column fixed width</h1>

<div class="container right-fixed">
  <div class="fluid">
    <div class="content">
      Fluid
    </div>
  </div>
  <div class="fixed">  
     Fixed
  </div>
</div>

<h1>Left column fixed width</h1>

<div class="container left-fixed">
  <div class="fixed">  
     Fixed
  </div>
  <div class="fluid">
    <div class="content">
      Fluid
    </div>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    Please use flexbox for this kind of layout, every modern browser supports it

    * {
  box-sizing: border-box;
}

.container {
  border: 1px solid red;
  display: flex;
}

.container .fixed {
  background-color: lightblue;
  padding: 10px;
  width: 160px;
}

.container .fluid {
  background-color: lightgreen;
  padding: 10px;
  flex: 1;
}
    <h1>Rigth column fixed width</h1>

<div class="container right-fixed">
  <div class="fluid">
    Fluid
  </div>
  <div class="fixed">
    Fixed
  </div>
</div>

<h1>Left column fixed width</h1>

<div class="container left-fixed">
  <div class="fixed">
    Fixed
  </div>
  <div class="fluid">
    Fluid
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search