Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

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

Posted on 2014-02-28
9
220 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
ID: 39894924
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
ID: 39894934
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
ID: 39895022
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
Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 

Author Comment

by:praz51
ID: 39895036
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
 
LVL 58

Accepted Solution

by:
Gary earned 250 total points
ID: 39895050
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
ID: 39895064
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
ID: 39895082
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
ID: 39895111
Is there a solution to make it work on older browsers?
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39895124
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

856 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