Page 1 of 1

Creating A Fluid Layout with CSS Rate Topic: ***** 1 Votes

#1 xxxjj18  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 53
  • View blog
  • Posts: 167
  • Joined: 30-November 11

Posted 18 February 2012 - 09:38 AM

*
POPULAR

Hey :)

I've seen a lot of questions concerning how to create a web layout that will fill the whole screen of any computer; no matter what resolution. So, I've decided to contribute a tutorial on the matter.

Firstly, to create a fluid layout, one must know what a fluid layout is;

A fluid layout is a web layout that uses percentages to size its' elements; so no matter what size the window is, the layouts' elements will always be a certain percentage of that window.

So, that being said, let's take the average web page; a header, nav bar, content, side bar, and footer. Let's say that a client would like for you to create a web page using these guidelines that will always fill the whole screen of the browser, no matter the resolution. Using percentages, this can be achieved:


<html>

<head>

<style type="text/css">

body, html {
    height: 100%; /* Sets the body to fill the whole screen */
}

p,h1,body,html {
    /* Normalize the elements */
    margin: 0;
    padding: 0;
}

#top {
    height: 20%;
    width: 100%;
    background: #666;
}

#nav {
    width: 100%;
    height: 10%;
    background: #eee;
}

#middle {
    height: 60%;
    width: 100%;
    clear: both;
}

#right {
    height: 100%;
    width: 20%;
    float: right;
    background: #c0c0c0;
}

#left {
    height: 100%;
    width: 80%;
    background: #999;
    float: left;
}

#bottom {
    height: 10%;
    width: 100%;
    background: #666;
}

</style>

</head>

<body>

<div id="top"><h1>This is the header</h1></div>

<div id="nav"><p>Nav Bar</p></div>

<div id="middle">

<div id="left"><p>This is content</p></div>

<div id="right"><p>This is a sidebar</p></div>

</div>

<div id="bottom"><p>Footer</p></div>

</body>

</html>





This layout appears as:

Attached Image

And when the window is resized:

Attached Image

Also, this layout successfully worked in Internet Explorer 9, Firefox 3.6, and Google Chrome 17.0.963.56.m

This is achieved by, as stated earlier, setting the <div> elements' width and height values to percentages. When the values are set to pixels, they are fixed and will always appear to be, let's say 100px.

What the code

p,h1,body,html {
    /* Normalize the elements */
    margin: 0;
    padding: 0;
}



did was normalize the p, h1, body, and html elements; this removes all extra padding from the element, to ensure that the layout appears as planned. If we had not normalized these elements, then the layout would have appeared obscured.

**Note: The only reason that I chose for the p, h1, body, and html elements to be normalized, is because these are the only elements used that required so. You can normalize any element.

The last, "weird" thing that we did (or rather, the first xD), was the code:


body, html {
    height: 100%; /* Sets the body to fill the whole screen */
}




This is done to set the page to be 100% of the screen. By default, the web page only expands to be as tall and wide as the content that it contains; so therefore if the content does not fill the screen, neither does the body or html element. This occurs because all HTML elements are containers; even the <html> tag is a container which contains the <body>, which contains your layout. Each sub-container, when set to 100% height and width, will only expand to be 100% of the container in which it is contained. So, if the <html> element is not 100% of the screen, then neither is the body, nor your layout.

So, now you have your layout :)

Please note, however, that if your web page will harbor a lot of content, that you may have to apply changes to the CSS, such as adding
overflow: auto;
to your <div> elements, so that the user may scroll your content.

Well, this tutorial is finished; good luck with your web designing :)

Is This A Good Question/Topic? 6
  • +

Replies To: Creating A Fluid Layout with CSS

#2 Darkvortex  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 12
  • Joined: 19-February 13

Posted 25 February 2013 - 02:35 AM

Its really good work css.thank you so much for this tutorial.
Was This Post Helpful? 1
  • +
  • -

Page 1 of 1