Skip to main content

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 tables.

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 ids 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%;
}


The top value can be set to any value depending on whether you are using headers and what the size is.  Margins were used so that the left and right columns can do a bit of resizing for smaller window spaces.

That's it.

Blogged with Flock

Comments

Popular posts from this blog

Get the most out of your browser

A whole year without a blog post! Now that I've changed job, I'm hoping that I can settle down and push more useful tips on my blog. So, to get back to form I have one about web browser productivity. Web browsers have come a long way since it's inception in the early days of the World Wide Web. But if you've just been using it to browse the Web, you are really missing out on a ton of stuff. Productivity is just the start of it. Let's take a look at some of the hidden gems that a browser has to offer. I will mostly be focusing on Chrome and Firefox, but a lot (if not all) the tips may apply to your favourite browser. Pin Tabs First up is the ability to pin a tab. You do this by right-clicking on a tab and selecting Pin Tab . Did you just see how it react? It resize and just shows the icon. If you have a lot of tabs this is a real space saver. Using Keywords Firefox has keyword bookmarking, which is an absolute essential for many. This allows you to call a

Open Source alternatives to Adobe Creative Suite

With the take over of Macromedia by Adobe, they have increased their arsenal of design packages, as well as the price. No-one can do pretty much without the popular package of Photoshop for their images, and Dreamweaver for websites, especially aspiring design students who do not have much money. Nevertheless, open source software has come to save the day. What is open source software? In a nutshell it is free software with its source-code freely available to those who would like to expand or improve on the software. To expand further, anyone who’s tinkered with the source code such as optimisation or additional functionality can resubmit it back to the holders and let others enjoy the fruits of your labour. I have trawled through the World Wide Web to find out how everyone can benefit from Open Source to build up their own studio and compete against Adobe Creative Suite. All this for free, apart from the cost of the Internet. I am planning to have a facility where you can purchase

More social networking concerns

Yeah. I'm not gonna leave you alone about this. I want to drive another point to you about social networking. After chatting to a few "savvy" Facebook users, I can't help but notice how much they don't realise that the social network has grown. Looking back in time, in 2012 Facebook announced they had a billion monthly active users. Fast forward to August 2015, they broke news that a billion people visited Facebook on a particular Monday. Then in September it was announced that the service averages over 1 billion users per day. While that paints a nice pretty picture there's more to it than posting onto your Facebook wall. They have made some pretty big and newsworthy acquisitions like WhatsApp , Oculus VR and Instagram . See where I'm going? It gets so addictive to make "friends" online. They may not be real friends you see and share life with everyday, but just someone you choose to bloat to about something. Sorry if I come across rud