How to create a simple two column flexible (liquid) layout ?

praz51
praz51 used Ask the Experts™
on
Hey

Whats the best way to create a simple two column html/css flexible layout using percentages for the attached brochure pages? I have tried to use the faux column technique to create the columns but cant seem to get it to work Thanks
Intro2.jpg
Intro.jpg
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Scott FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013

Commented:
You can start with this and build out.
<style>
.container{width:80%;}
.col1{width:80%;}
.col2{width:20%;}
</style>
<div class="container">
   <div class="col1">stuff</div>
  <div class="col1">stuff</div>
</div>

Open in new window

Scott FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013

Commented:
Corrected ---
http://jsbin.com/lezuvoci/1/edit?html,output
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
.container{width:80%;}
.col1{width:80%;float:left;}
.col2{width:20%;float:left;}
</style>
</head>
<body>
<div class="container">
   <div class="col1">stuff</div>
  <div class="col2">stuff</div>
</div>
</body>
</html>

Open in new window

Expert of the Year 2014
Top Expert 2014

Commented:
Your talking about faux columns - so you want equal height columns?
You may want to follow this
http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_28176027.html

http://jsfiddle.net/Y59C7/6/
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Author

Commented:
For Intro2 - The column on the right has an image which smaller in size therefore I will have to use background colour property but the  content area extends further down on the right than the one on the left,  I want them both columns to appear to be the same equal length - how can i achieve this?
Expert of the Year 2014
Top Expert 2014
Commented:
http://jsfiddle.net/Y59C7/23/

HTML
<div class="container">
    <div class="div1">
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        
    </div>
    <div class="div2">
        content<br>
        content<br>
        content<br>
    </div>
    
</div>

Open in new window


CSS
.div1  {
    background:blue;
}
.div2  {
        background:orange;
}
div.container {
    display:table
}
div div {
    display:table-cell;
    width:100px;
    height:100%
}

Open in new window

Scott FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013
Commented:
A modern spin on the old holygrail layout https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes

http://jsbin.com/hepoyipu/1/

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>

  body {
   font: 24px Helvetica;
   background: #999999;
  }

  #main {
   min-height: 800px;
   margin: 0px;
   padding: 0px;
   display: -webkit-flex;
   display:         flex;
   -webkit-flex-flow: row;
           flex-flow: row;
   }
 
  #main > article {
   margin: 4px;
   padding: 5px;
   border: 1px solid #cccc33;
   border-radius: 7pt;
   background: #dddd88;
   -webkit-flex: 3 1 60%;
           flex: 3 1 60%;
   -webkit-order: 2;
           order: 2;
   }
  
  #main > nav {
   margin: 4px;
   padding: 5px;
   border: 1px solid #8888bb;
   border-radius: 7pt;
   background: #ccccff;
   -webkit-flex: 1 6 20%;
           flex: 1 6 20%;
   -webkit-order: 1;
           order: 1;
   }
  
  #main > aside {
   margin: 4px;
   padding: 5px;
   border: 1px solid #8888bb;
   border-radius: 7pt;
   background: #ccccff;
   -webkit-flex: 1 6 20%;
           flex: 1 6 20%;
   -webkit-order: 3;
           order: 3;
   }
 
  header, footer {
   display: block;
   margin: 4px;
   padding: 5px;
   min-height: 100px;
   border: 1px solid #eebb55;
   border-radius: 7pt;
   background: #ffeebb;
   }
 
  /* Too narrow to support three columns */
  @media all and (max-width: 640px) {
  
   #main, #page {
    -webkit-flex-flow: column;
            flex-flow: column;
            flex-direction: column;
   }

   #main > article, #main > nav, #main > aside {
    /* Return them to document order */
    -webkit-order: 0;
            order: 0;
   }
  
   #main > nav, #main > aside, header, footer {
    min-height: 50px;
    max-height: 50px;
   }
  }

 </style>
  </head>
  <body>
 <header>header</header>
 <div id='main'>
    <article>article</article>
    <nav>nav</nav>
    <aside>aside</aside>
 </div>
 <footer>footer</footer>
  </body>
</html>

Open in new window

Scott FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013

Commented:
The two equal column thing is very old http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-pixels.htm and gets asked about a lot and I have seen people go nuts trying to make it work.  Never could see a real practical use for it.  I just recently came across this solution.   It will not work on onlder ie browsers.

Author

Commented:
Is there a solution to make it work on older browsers?
Scott FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013

Commented:

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial