CODEWITHSUNDEEP
jqueryhtmlcss
ONYX
ONYX

Reputation: 5859

Liquid layout with liquid left + fixed right column

The question is pretty self explanatory. All these div elements are 100% in height I need the left div to flex, but not have it set to overflow:hidden so that I can make it's children elements be elastic as well. Inside the left div is an Image slider which is responsive and I'm trying to make it responsive. can someone help me with my css for this please thanks in advance.

<div id="parent">
    <div id="left">
         Liquid layout
    </div>
    <div id="right">
         Fixed width 450px
    </div>
</div>

Upvotes: 2

Views: 686

Answers (5)

Salman Arshad
Salman Arshad

Reputation: 272376

If div elements are 100% of window height then your HTML+CSS markup is reduced to:

<div id="left">Liquid layout</div>
<div id="right">Fixed width 450px</div>

html   { height: 100%; }
body   { height: 100%; margin: 0; padding: 0; }
#left  { position: absolute; top: 0; bottom: 0; left: 0; right: 450px; }
#right { position: absolute; top: 0; bottom: 0; right: 0; width: 450px; }

Demo here

If div elements are equal height then here is an "old school" approach that (i) Preserves source order (ii) Uses floats (iii) Produces equal height faux columns (iv) Requires one clearing div

<div id="parent">
    <div id="left">Liquid layout</div>
    <div id="right">Fixed width 450px</div>
    <div class="clear"></div>
</div>

#parent { border-right: 450px solid orange /* right bg */; background-color: yellow /* left bg */; }
#left   { float: left;  width: 100%; }
#right  { float: right; width: 450px; margin-right: -450px; }
.clear  { clear: both; }

Demo here

Upvotes: 3

Anup
Anup

Reputation: 9746

DEMO

html, body {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
}

#left, #right {
    height: 100%;
    float: left;
}
#parent{
    width: 100%;
    height: 100%;    
}   

#left {
   width: calc(100% - 450px);;
   background-color: teal; 
}
#right {    
    width: 450px;
    background-color: olive; 
}

Upvotes: 0

Hashem Qolami
Hashem Qolami

Reputation: 99544

You could achieve this layout by setting a float property to one div and using margin for the other one:

HTML:

<div id="parent">
    <div id="right">
         Fixed width 450px
    </div>
    <div id="left">
         Liquid layout
    </div>
</div>

CSS:

#right {
  float: right;
  width: 450px;
}

#left {
  margin-right: 450px;
}

JSFiddle Demo

There's no need to use table displayed elements. In fact, I really recommend to avoid using that for layout purposes.

Note: Using table display types, may change behavior of web browser while rendering the page (browsers may consider the entire page as a table).

According to W3C spec:

table, inline-table, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, and table-caption

These values cause an element to behave like a table element (subject to restrictions described in the chapter on tables).

Upvotes: 1

Mr. Alien
Mr. Alien

Reputation: 157414

If you would like to go with the flex approach than here you go...

Demo

HTML

<div class="wrap">
    <div class="fluid"></div>
    <div class="fixed"></div>
</div>

CSS

html, body, .wrap, .wrap > div {
    height: 100%;
}

.wrap {
    display: flex;
    display: -webkit-flex;
}

.fluid {
    width: 100%;
    background: #eee;
    flex: 1;
}

.fixed {
    background: #aaa;
    width: 200px;
}

Upvotes: 1

NoobEditor
NoobEditor

Reputation: 15921

use table-cell for your purpose :)

EDIT after Hashem Qolami answer, since you have tagged question in css3 category, let me be clear that display:table is supported IE8 and onwards....and is useful if you don't wanna mess around with clearing the divs!!

fiddle here 

 html, body {
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}
#parent {
    display:table;
    width:100%;
    height:100%;
    word-break:break-all;
}
#left {
    display:table-cell;
    border:1px solid red;
}
#right {
    width:450px;
    display:table-cell;
    border:1px solid green;
}

Upvotes: 1

Related Questions