• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 227
  • Last Modified:

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

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
0
praz51
Asked:
praz51
  • 5
  • 2
  • 2
2 Solutions
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
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

0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
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

0
 
GaryCommented:
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/
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
praz51Author 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?
0
 
GaryCommented:
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

0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
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

0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
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.
0
 
praz51Author Commented:
Is there a solution to make it work on older browsers?
0

Featured Post

[Webinar On Demand] Database Backup and Recovery

Does your company store data on premises, off site, in the cloud, or a combination of these? If you answered “yes”, you need a data backup recovery plan that fits each and every platform. Watch now as as Percona teaches us how to build agile data backup recovery plan.

  • 5
  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now