CODEWITHSUNDEEP
htmlcss
Cam
Cam

Reputation: 970

5 columns - 3 fixed width columns & 2 fluid

I'm looking to create a fluid layout, with 3 fixed width columns & 2 fluid. 5 columns in total.

I've had a play with 'display: table-cell;', which worked in Chrome but Broke in FF.

enter image description here

section.how-to .steps { max-width:1400px; width:100%; padding:10px 3%; box-sizing: border-box; height:350px}
section.how-to .steps > div {  display: table-cell;}
section.how-to .steps .step {  min-width:262px} 
section.how-to .steps .filler {  height:200px; width:50%}



  <section class='how-to'> 
       <div class="steps">
           <div class="step one"></div>
           <div class="svg  filler"></div>
           <div class="step two"></div>
           <div class="svg  filler"></div>
           <div class="step three"></div>
       </div> 
 </section>

Could anyone suggest a cross browser approach. (Webkit, FF, IE8 +)

Thanks Cam

Upvotes: 0

Views: 493

Answers (1)

Pete
Pete

Reputation: 58412

Hi I have come up with a solution that seems to work in all major browsers:

jsFiddle

Html

<div class="container">
    <div id="LeftColumn" class="fixedWidth">
        col 1
    </div>
    <div id="CenterColumn">
        <div id="CenterLeft" class="centerColumn">
            <div class="padded">
                <div class="content">
                    col 2
                </div>
                <div class="fixedWidth">
                    col 3
                </div>
                 <div class="clearSpacer">&nbsp;</div>
            </div>
        </div>
        <div id="CenterRight" class="centerColumn">
            <div class="padded">
                <div class="content">col 4</div>
            </div>
        </div>
        <div class="clearSpacer">&nbsp;</div>
    </div>
    <div id="RightColumn" class="fixedWidth">
        col 5
    </div>
    <div class="clearSpacer">&nbsp;</div>
</div>

CSS

.container {padding:0 62px;} /*I have used 62px - just change to 262px (all 62s below too);*/
.fixedWidth {width:62px; height:200px; background-color:red;} /*height and bg-color just to show what's happening*/

#LeftColumn {float:left; margin-left:-62px;}
#RightColumn {float:right; margin-right:-62px;}
#CenterColumn {float:left; width:100%;}

.centerColumn {width:50%; float:left; background-color:blue; position:relative;} 
#CenterLeft {z-index:2;}
#CenterRight {z-index:1;}
#CenterLeft .padded {padding-right:31px;} /*padding should be half width of fixed column*/
#CenterLeft .content {float:left;}
#CenterLeft .fixedWidth {float:right; margin-right:-62px;}
#CenterRight .padded {padding-left:31px;} /*padding should be half width of fixed column*/
.content {width:100%;}

.clearSpacer {clear:both; height:0; overflow:hidden;}

Upvotes: 2

Related Questions