Fluid design is talked about so often. The ability for a site’s width to change depending on the user’s screen size. However, people newer to designing using CSS often become confused. This is a very brief introduction to it and there will be further posts on this.

Fluid Design is done by assigning the majority of width terms in CSS using % rather than px/em/etc. Take this example:

HTML
<div id=”div”>
this div is 75% of the page
</div>
<div id=”div2″>
this div is 25% of the page
</div>

 CSS
#div {
width: 75%;
height: 600px;
background-color: #FF0000;
float: left;
}

#div2 {
width: 25%;
height: 600px;
background-color: #000099;
float: left;
}

You can view the page here. Try it and you will see that no matter what the window size, the width is always 75% and 25%. You can do the same with the height as well, although in my example I only used width.

That’s just a very very brief introduction into the world of fluid design and layout, more coming soon!

Categorised under: CSS, Design & Layout by Jack F