Jump to content

A simple 'Liquid Layout' for web design

Zonked
 Share
Posted

Hi guys,

 

I always see people asking or get asked how to do a liquid layout when designing a website. The tutorials online are so complicated and have so many lines of code and it is really not needed. So here is how to do it very easily.

 

Before I begin, here is what a liquid layout is:

 

A liquid layout is a page design that will decrease or increase in size depending on the resolution of your screen. So you will not have loads of white space on each side of your page when developing a web page.

 

Here it is:

 

HTML

<!DOCTYPE html><html><head>	<link rel="stylesheet" type="text/css" href="style.css"/></head><body>	<div id="header">Header</div>	<div id="sidebar">Sidebar</div>	<div id="main_content">Main Content</div>	<div id="footer">Footer</div></body></html>

CSS

#header{	background: silver;}#main_content{	border: 1px solid blue;}#sidebar{	border: 1px solid red;	width: 20%;	float: left;}#footer{	clear: both;	background: silver;}

 It is that simple. You can also add additional sidebars using the same method.

Case - Bitfenix Shinobi | CPU - i5 3570K @ 4.2Ghz | Motherboard -  Asus P8Z77 | GPU - 7870 | PSU - Corsair CXM 600w | 
Harddrive - Seagate Barracuda 1Tb x 2 | SSD - Samsung 840 256Gb | Cooling - Custom 2x Dual 120mm Radiator, Watercooling Loop |

Ultimate Programming Resources Thread ||| CompSci Masters Degree Student and Professional Java and C# Programmer

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

Lol, I don't understand why those sites don't just point out that if you set the size of objects as % rather than pixels, you're basically done.

15" MBP TB

AMD 5800X | Gigabyte Aorus Master | EVGA 2060 KO Ultra | Define 7 || Blade Server: Intel 3570k | GD65 | Corsair C70 | 13TB

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author

Lol, I don't understand why those sites just point out that if you set the size of objects as % rather than pixels, and you're basically done.

I know right! I see ones that have 100 lines of CSS and use some of the most convoluted, ridiculous techniques ever!

Case - Bitfenix Shinobi | CPU - i5 3570K @ 4.2Ghz | Motherboard -  Asus P8Z77 | GPU - 7870 | PSU - Corsair CXM 600w | 
Harddrive - Seagate Barracuda 1Tb x 2 | SSD - Samsung 840 256Gb | Cooling - Custom 2x Dual 120mm Radiator, Watercooling Loop |

Ultimate Programming Resources Thread ||| CompSci Masters Degree Student and Professional Java and C# Programmer

Link to comment
Share on other sites
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing Guides and Tutorials

×