Apply borders to some cells

Question

I'm going crazy trying to choose the following layout correctly:

• fixed width left div (maybe multiple divs one next to the other)
• central div with automatic width (takes up the remaining space)
• fixed width right div (maybe multiple divs one next to the other)
• there must be a border between the center div and the first neighbor, whether it is left or right

HTML

<div class="container"> <div class="all left"> Left1 </div> <div class="all left"> Left2 </div> <div class="all center"> Center </div> <div class="all right"> Right1 </div> <div class="all right"> Right2 </div> </div> 

CSS

 .container { display: table; position: relative; width: 100%; height: 100px; border-spacing: 5px; } .all { display: table-cell; border: 1px solid #333; margin: 5px; } .left { width: 45px; } .right { width: 45px; } .center { width: auto; } 

Fiddle

http://jsfiddle.net/ozrentk/VdryG/3/

However, no matter what I try (for example, putting border-spacing: 0px in the left or right div, margin: 0 , dropping borders), all my fields end up the same.

To simplify this, I want:

 +--------------------------------------------------------------+ |+-----++-----+ +------------------------------++-----++-----+| || || | | || || || || || | | || || || || || | | || || || || || | | || || || || || | | || || || || || | | || || || || || | | || || || || || | | || || || |+-----++-----+ +------------------------------++-----++-----+| +--------------------------------------------------------------+ 

But currently I have this:

 +--------------------------------------------------------------+ | | | +----+ +----+ +--------------------------+ +----+ +----+ | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | +----+ +----+ +--------------------------+ +----+ +----+ | | | +--------------------------------------------------------------+ 

How can I manage individual fields in this layout?

PS

• I don't want a solution with mixing floats with non-floats because it ends up with layout problems, see this
• I don't want a solution using css calc because it is experimental
• I do not want a JS solution because I think CSS should be used for such a layout and can lead to flickering; In addition, the user can disable JS

Answer 1

CSS only solution using original label

table-cell display types do not recognize fields, so setting fields on the left and right does not give you the desired result.

One job is to specify display: block in a .center element:

 .container { display: table; width: 100%; height: 100px; border-spacing: 5px; } .all { display: table-cell; border: 1px solid #333; } .left { width: 45px; } .right { width: 45px; } .center { width: auto; display: block; margin: 0 10px 0 10px; border: 1px solid red; height: inherit; } 

Fiddle: http://jsfiddle.net/audetwebdesign/GNVfG/

The only limitation is that the parent .container block needs an explicit height so that all .container can inherit or calculate the same height.

Thanks to Ilya Streltsin for the display: block suggestion, which solved the field problem.

Answer 2

As a quick solution that does not need to change the entire layout model, you can simply add an invisible separator to your table structure, as in this edited fiddle :

 hr { display: table-cell; width: 10px; visibility: hidden; } 

Answer 3

Is that what you mean?

 .center{ margin-left: 10px; } 

By adding a left or right margin to the center, you get the unique space you want