CODEWITHSUNDEEP
htmlcsslayout
Wolfgang
Wolfgang

Reputation: 86

3 column layout with 100% width and variable centered div

I want to create a 3 column layout with one centered div, one left and one right div. The left and right divs should expand from the centered div to the left and right end of the page. The centered div contains elements with transparent regions and therefore the centered div should not overlap the left and right divs. I managed to create a solution if the centered div has a fixed width. The question is, is it possible to create a similar layout but with a cented div with dynamic width?

jsFiddle Link

Here is the code for fixed width.

CSS:

#divCenter{
  position:absolute;
  top:0%;
  left:0;
  right:0;
  height:50px;
  width:500px;
  margin:0 auto;
  border: 1px solid #aaaaff;
  background:#aaaaff;
  z-index:2;
}
#divLeft{
  position:absolute;
  top:0;
  left:0%;
  width:50%;
  border: 1px solid #aaffaa;
  z-index:1;
}
#divLeftInner{
  height:60px;
  margin-right:250px;
  background:#aaffaa;
}
#divRight{
  position:absolute;
  top:0;
  right:0%;
  width:50%;
  border: 1px solid #ffaaaa;
  z-index:1;
}
#divRightInner{
  height:60px;
  margin-left:250px;
  background:#ffaaaa;
}

HTML:

<div id="divCenter">
</div>
<div id="divLeft">
  <div id="divLeftInner">
  </div>
</div>
<div id="divRight">
  <div id="divRightInner">
  </div>
</div>

Upvotes: 1

Views: 2141

Answers (1)

Anders Arpi
Anders Arpi

Reputation: 8397

Float all columns left and set the left and right columns to have equal width - using JavaScript.

HTML

<div id="wrapper">
    <div id="left" class="col"></div>
    <div id="mid" class="col"></div>
    <div id="right" class="col"></div>
</div>​

CSS

.col {float:left;height:200px;}
#left, #right {width:30%;background:red;}
#mid {width:40%;background:blue;}

jQuery

//extra verbose for clarity's sake
var setWidths = function() {
    var wrapWidth = $("#wrapper").width();
    var midWidth = $("#mid").width();
    var leftOverWidth = wrapWidth - midWidth;
    var sideColWidth = leftOverWidth/2;
    $(".sidecol").width(sideColWidth);
}

//set new sizes whenever the window is resized
$(window).on("resize", setWidths);

$(function() {
    setWidths(); //set correct sizes when the DOM has loaded
});​

http://jsfiddle.net/GYGL3/37/

Upvotes: 1

Related Questions