Three Column Design, dynamic width left + right side and static witdh in the middle

问题

I want to have a dynamic three column design, where the center has a static width(for instance 250px) and the left + right columns dynamic width's. So every user can use it even they don't have the same browser width. It's also important that the 2nd div is really in the center of the window.

HTML

<div id="header">
    <div id="navigation_left">left</div>
    <div id="navigation_center">center</div>
    <div id="navigation_right">right</div>
</div>

CSS

#header {
    height: 200px;
    text-align: center;
}
#navigation_left {
    float: left;
    background: rgba(128, 255, 128, 1);
    width: 80px; /* should be dynamic */
    height: inherit;
}
#navigation_right {
    float: right;
    background: rgba(255, 128, 128, 1);
    width: 80px; /* should be dynamic */
    height: inherit;
}
#navigation_center {
    position: relative;
    display: inline-block;
    width: 250px;
    height: inherit;
    background: rgba(128, 128, 255, 1);
}

The problem so far is sometimes the left + right div's are too small or too big, because I said them hardcoded to 80px. Is there a way to fix this problem?

JS Fiddle Demo

回答1:

Try this:

First, move your #navigation_center below #navigation_right so it doesn't get overlapped by the latest.

<div id="header">
    <div id="navigation_left">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </div>
    <div id="navigation_right">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </div>
    <div id="navigation_center">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates consectetur veritatis fugit aspernatur quo repellendus corrupti perferendis inventore dignissimos sapiente ea ullam libero consequatur voluptatibus quam sint deleniti dolor illo molestias numquam ex iusto incidunt quidem.
    </div>
</div>

Then, this CSS:

#header {
    height: 200px;
    background: #f80;
    position: relative; /* we will absolute-position children columns */

    /* text-align: center;  /* Remove this*/
}
#navigation_left {
    position: absolute;
    left: 0;
    top: 0;
    background: #0f0;
    height: 100%;

    /* Here comes the magic: */
    width: 50%;
    padding-right: 125px; /* substract 250/2 from the content area */

    -webkit-box-sizing: border-box; /* So that padding is substracted instead of added */
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
#navigation_right {
   position: absolute;
   right: 0; /* change left to right */
   top: 0;
   background: #00f;
   height: 100%;

   width: 50%;
   padding-left: 125px; /* change left to right */

   -webkit-box-sizing: border-box; /* So that padding is substracted instead of added */
   -moz-box-sizing: border-box;
    box-sizing: border-box;
}
#navigation_center {
    position: relative;

    /* center the element */
    display: block;
    margin: 0 auto;

    width: 250px;
    background: rgba(128, 128, 255, 1);

    height: 100%;
}

Live example http://codepen.io/anon/pen/hzrdG

回答2:

This can be done with CSS3. Set the width of your left & right columns. Let's say 50px each. then set the width of the middle column with calculations.

-webkit-calc(width: 100% - 100px) /* -50px per column equals 100px */
-moz-calc(width: 100% - 100px) /* -50px per column equals 100px */
-o-calc(width: 100% - 100px) /* -50px per column equals 100px */
-ms-calc(width: 100% - 100px) /* -50px per column equals 100px */
calc(width: 100% - 100px) /* -50px per column equals 100px */

However, this doesn't work in older browsers, but you can get close by setting a width percentage for each column as a fallback.

来源：https://stackoverflow.com/questions/18775612/three-column-design-dynamic-width-left-right-side-and-static-witdh-in-the-mid

标签

css

html

width