CODEWITHSUNDEEP
htmlcsscss-float
Rey
Rey

Reputation: 3767

Creating a 2 column layout where the right column is fluid, and the left column is fluid but it's left position is somewhat fixed?

https://jsfiddle.net/nynd8b4b/

There are purple blocks at the top and bottom of this example, representing a centered site.

I have a module I want to include on the page that spans full width, that are 60% / 40% (seen in the red and blue blocks).

So here is the question:

I want the red block to stay lined up with the purple blocks on the left side as the viewport expands and contracts. I do not know the height of the red & blue blocks, so please don't put any height on them. I can use any number of divs to achieve this.

Ideas? Ideally this works on modern browsers and IE10 and up.

Edit: I'll even take an absolute position answer now... I'd obviously prefer it if I didn't have to do that. Also here is a wireframe of a design that I need this implementation for: https://wireframe.cc/TkX5QF

Html:

<div class="container">
   <div class="content">centered content</div>
</div>
<div class="full-width">
   <div class="sixty"></div>
   <div class="forty"></div>
</div>
<div class="container">
   <div class="content">centered content</div>
</div>

Css:

.container {
   width: 1000px;
   margin: 0 auto;
}

.content {
   height: 100px;
   background-color: purple;
   color: white;
}

.full-width {
overflow: hidden;
}

.sixty{
   width: 60%;
   height: 100px;
   background-color: red;
   float: left;
}

.forty {
   width: 40%;
   height: 100px;
   background-color: blue;
float: left;
}

Upvotes: 0

Views: 174

Answers (2)

Mark
Mark

Reputation: 1872

Why not just set an absolute position to the left column?

Upvotes: 0

Adam Buchanan Smith
Adam Buchanan Smith

Reputation: 9439

I think this is what you are looking for https://jsfiddle.net/nynd8b4b/4/

<body onresize="marg()" onload="marg()">
  <div class="container" id="container">
    <div class="content">centered content</div>
  </div>
  <div class="full-width">
    <div class="sixty" id="sixty"></div>
    <div class="forty"></div>
  </div>
  <div class="container">
    <div class="content">centered content</div>
  </div>
</body>
<script>
  function marg() {
    var p = document.getElementById("container");
    var style1 = p.currentStyle || window.getComputedStyle(p);
    var p2 = document.getElementById("sixty").offsetWidth;

    var margin = style1.marginLeft;
    document.getElementById("sixty").style.marginLeft = style1.marginLeft;
    document.getElementById("sixty").style.width = "calc(60% - " + style1.marginLeft + ")";
  }

</script>

Upvotes: 1

Related Questions