Skip to main content

Posts

Showing posts with the label three column layout

CSS 3 Column Liquid Layout

When it comes to trying to use pure CSS to layout documents, it may seem daunting at first but is actually more straightforward than using table s. First off, define the columns in your HTML page: <div id ="leftColumn" > Content comes in here... </div> <div id ="middleColumn" >   <h1> Document Header </h1>   <p> Content comes in here...... </p> </div> <div id ="rightColumn" >Content comes in here....... </div> Now that is the structure put in place.  The wizardy is done using the id s of each div : #leftColumn {   position : absolute;   top : 140px;   left : 0;   width : 20%;   margin-top : 1%; } #middleColumn {   position : absolute;   top : 140px;   left : 20%;   min-width : 360px;   width : 58%;   margin : 1% 1% 0 1%; } #rightColumn {   position : absolute;   top : 140px;   left : 80%;   width : 20%;   margin-top : 1%...