Solved

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

Posted on 2014-02-28
9
216 Views
Last Modified: 2014-03-03
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
Comment
Question by:praz51
  • 5
  • 2
  • 2
9 Comments
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
Comment Utility
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
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
Comment Utility
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
 
LVL 58

Expert Comment

by:Gary
Comment Utility
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
 

Author Comment

by:praz51
Comment Utility
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
6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

 
LVL 58

Accepted Solution

by:
Gary earned 250 total points
Comment Utility
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
 
LVL 52

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 250 total points
Comment Utility
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
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
Comment Utility
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
 

Author Comment

by:praz51
Comment Utility
Is there a solution to make it work on older browsers?
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
Comment Utility
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

771 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now