CODEWITHSUNDEEP
css
madprops
madprops

Reputation: 4033

3 columns, center column fixed, sides fill parents

How can I make B be a fixed 800px size while A and C fill the space, so they are all together touching? http://jsfiddle.net/8ufuV/

Upvotes: 3

Views: 4105

Answers (3)

Mahbub
Mahbub

Reputation: 124

HTML:

<div id="main">

<div id="leftblock">a</div>

<div id="contentblock">b</div>

<div id="rightblock">c</div>

</div>

CSS:

#main {
  display:table;
  width:100%
}

div {
  display: table-cell
}

#leftblock{
  top: 0px;
  left: 0px;
  margin: 0px;
  padding: 10px;
  border: 5px solid #ccc;
  voice-family: "\"}\"";
  voice-family:inherit;
}

#contentblock{
  padding: 10px;
  border: 5px solid #ccc;
  width: 100px;
}


#rightblock{
  top: 0px;
  right: 0px;
  margin: 0px;
  padding: 10px;
  border: 5px solid #ccc;
  voice-family: "\"}\"";
  voice-family:inherit;
}

Upvotes: 0

thirtydot
thirtydot

Reputation: 228302

The easiest method is to use display: table-cell.

See: http://jsfiddle.net/47d4f/

That solves your problem, and also gives you equal height columns when the content is different in each column - something that isn't otherwise simple to obtain.

Browser support: http://caniuse.com/css-table

Upvotes: 8

Steven
Steven

Reputation: 13995

Fixed it up for you http://jsfiddle.net/8ufuV/17/ You need to float all the elements left; and then specific a width (don't forget about padding/margins when doing so). On an element you want to appear below them add clear:left; to it.

Good luck

Upvotes: 0

Related Questions