CODEWITHSUNDEEP
cssresponsive-designfluid-layout
Paweł Skaba
Paweł Skaba

Reputation: 681

3 columns/divs - two fluid, middle fixed and centered

i am trying to make a kind of responsive header for my website. it should work in this way: fluid div - fixed and centered - fluid. All three cols are filled with content. The problem is that middle column is not always centered and fluid are not equal width.

jsfiddle: http://jsfiddle.net/6f87f/

    <div class="header">
    <div class="fluid-col">
        1234
    </div>
    <div class="fixed-col">
        <h1><a href="#" title="">Orfin Studio</a></h1> 
    </div>
    <div class="fluid-col">        
123
    </div>
</div>

CSS

.header {
    display: table;
    width: 100%;
    height:120px;
    text-align:center;
}
.header > div {
    display: table-cell;
    vertical-align:middle;
}
.fixed-col {
    width:200px;
    color: white;
}
.fluid-col {
background:pink; 
}

why is that?;/ thanks!

Upvotes: 0

Views: 4988

Answers (2)

AliAwwad
AliAwwad

Reputation: 379

http://jsfiddle.net/RzhDD/

html

<div id="header">
<div class="fluid-col twintypercent">
    Left Col
</div>

<div class="fluid-col sixtypercent">
    <div class="fixed-col">
        Centered Column
    </div>
</div>
<div class="fluid-col twintypercent">
    Right Col
</div>

css

#header {
width:100%;
}
.fluid-col {
    float:left;
}
.Tpercent {
    width:20%;
}
.sixtypercent {
    width:60%;
    text-align:center
}
.fixed-col {
    margin:auto;
    width:200px;
    text-align:left;
}

Upvotes: -1

pirs
pirs

Reputation: 2463

Im not sure that exactly you want but try this : FIDDLE

<div class="header container">

    <div class="col col-1">
       COL 1
    </div>
    <div class="col col-2 custom-width">
      COL 2
    </div>
    <div class="col col-3">
      COL 3
    </div>

</div>

css :

.header {
    display: table;
    width: 100%;
    height:120px;
    text-align:center;
}
.header > div {
    display: table-cell;
    vertical-align:middle;
}
.col {
    width:20%;
}

.custom-width {
    min-width:300px; // change the value as you want with width and min-width
    background:pink; 
}

Upvotes: 2

Related Questions