Using overflow:hidden to avoid extra markup

Hi once again, have been busy this month on my freelance works. Today I have something to share for you guys that you think its very easy to implement and also a very powerful work around on building or constructing CSS layout on your web pages. These are my terms because on my point of view, building web pages is like constructing a house which needs its foundation the XHTML/CSS.

Going back to the topic, I have read this on some books and researched on the net how to use overflow:hidden and it gives me a better understanding for how can it be applied. Before when I build CSS layout I used to have an extra markup on my pages, having here a sample markup of a page layout in XHTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<div id="wrapper">
            <div id="header"><p></this is your header</p></div><!--end header-->
            <div id="maincontent">
                <div id="content">
                <p></this is your content</p>                
                </div>
                <div id="sidebar">
                <p></this is your sidebar</p>
                </div>
                </div>
            <div class="clear"></div><!--extra markup-->
            </div><!--end maincontent-->
        <div id="footer">
        <p>this is your footer</p>
	</div><!--end footer-->
</div><!--end wrapper-->
</body>
</html>

The CSS for the markup above.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

body { 
	margin:0; 
	font-family:Arial, Helvetica, sans-serif; 
	font-size:12px; 
	}
#wrapper { 
	width:900px; 
	margin:0 auto; 
	background-color:#fff;}
#header {}
#maincontent { 
	margin:0 0 0 0; 
	border:#eeeeee solid 1px; 
	background-color:#eeeeee;
	}
#content { 
	float:left; 
	padding:40px 0 0 18px; 
	width:560px;
	}
#sidebar { 
	float:right; 
	width:286px; 
	margin:8px 14px 0 0;
	}
#footer { 
	border-top:#232323 solid 1px; 
	background-color:#161616; 
	height:40px; padding:12px 0 0 0;
	}
.clear {
       clear:both;
       }

I used to usually add an extra markup <div class=”clear”></div> so the <div id=”maincontent”> at the end, so it will stretch out the background when i have containers like <div id=”content”> and <div id=”sidebar”>. Problem occurs when you add a background property on #maincontent, and the selectors #content and #sidebar are floated.

Usually the background will not stretch out unless you add an extra markup which is <div class=”clear”></div>. A quick fix to this one is using overflow:hidden so the background stretches out without having the extra <div class=”clear”></div> markup.

This will be our new XHTML markup removing the extra <div class=”clear”></div> markup and CSS applying the overflow:hidden property to #maincontent.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<div id="wrapper">
            <div id="header"><p></this is your header</p></div><!--end header-->
            <div id="maincontent">
                <div id="content">
                <p></this is your content</p>                
                </div>
                <div id="sidebar">
                <p></this is your sidebar</p>
                </div>
                </div>
            </div><!--end maincontent-->
        <div id="footer">
        <p>this is your footer</p>
	</div><!--end footer-->
</div><!--end wrapper-->
</body>
</html>

CSS with overflow property applied to #maincontent

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

body { 
	margin:0; 
	font-family:Arial, Helvetica, sans-serif; 
	font-size:12px; 
	}
#wrapper { 
	width:900px; 
	margin:0 auto; 
	background-color:#fff;}
#header {}
#maincontent { 
	margin:0 0 0 0; 
	border:#eeeeee solid 1px; 
	background-color:#eeeeee;
        overflow:hidden; /*add this property to stretch out the conatiner element*/
	}
#content { 
	float:left; 
	padding:40px 0 0 18px; 
	width:560px;
	}
#sidebar { 
	float:right; 
	width:286px; 
	margin:8px 14px 0 0;
	}
#footer { 
	border-top:#232323 solid 1px; 
	background-color:#161616; 
	height:40px; padding:12px 0 0 0;
	}
.clear {
       clear:both;
       }

This is what I am using now in building pages having no extra markups. You can try to experiment with it on your XHTML/CSS layout too. If you find it confusing just post a comment for clarification.
I hope you find it useful. :)

category: XHTML/CSS

This entry was posted on Friday, May 15th, 2009 at 12:48 pm and is filed under XHTML/CSS. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

13 Responses to “Using overflow:hidden to avoid extra markup”

  1. Ronald says:
    February 26, 2010 at 6:33 pm

    @MEDY Let me know if I can help you, figure out your problem.

  2. MEDY says:
    February 25, 2010 at 10:25 pm

    I found out that the “stretch out” is not visible on IE7.

    On IE8 it seems to make things work by adding overflow:hidden but it does not remove the gap between header and content :(

    Still cant find a solution that suits well on IE7 and IE8.

    :(

  3. GarykPatton says:
    June 16, 2009 at 10:31 am

    You know so many interesting infomation. You might be very wise. I like such people. Don’t top writing.

  4. KattyBlackyard says:
    June 15, 2009 at 11:45 am

    Hi, gr8 post thanks for posting. Information is useful!

  5. JaneRadriges says:
    June 14, 2009 at 10:34 am

    The article is usefull for me. I’ll be coming back to your blog.

  6. Kelly Brown says:
    June 13, 2009 at 8:01 am

    I really like your post. Does it copyright protected?

  7. admin says:
    May 25, 2009 at 8:26 pm

    You are really too stupid, that your comment is deleted ,as I say before I set commenting on this site to be approve by me first. And what are you doing ma’am?link building?

  8. admin says:
    May 25, 2009 at 8:24 pm

    I think I don’t see anything wrong posting for information to readers, you don’t know what are you saying. I don’t care if Google ban me on their search engines. I just want to share information to readers if you think I am wrong on posting it go ahead. First and foremost eventhough i am not really good in English I do create my own sentences and do not copy paste other works.

  9. Carla says:
    May 25, 2009 at 5:11 pm

    you better delete this, but not my comment, what i mean is your tutorial. ok? got me?

  10. Carla says:
    May 25, 2009 at 5:10 pm

    Hey you,
    what you say? bully? you got me wrong. this tutorial is really from other site and i do report already this to the google…stupid crazy man you..

  11. admin says:
    May 22, 2009 at 9:32 am

    Hi Carla,

    I do appreciate your comment but I don’t think I copy paste my tutorial. You westerners are really bully on your way of talking. I set comments to be approve by me first even good or bad you say, it is not deleted.

  12. Carla Peter says:
    May 19, 2009 at 4:36 pm

    Hey!

    why are you deleting my comment? you dont like that the other will know about the copy and paste style of your tutorial?

    stupid….

  13. Carla Peter says:
    May 19, 2009 at 4:26 pm

    Hey!

    I really dont like your tutorial. I think you just copy and paste the old tutorial from other website. please make your own so that the viewer will see a difference between you and other. please, again, dont be stupid.

    regards,
    Carla

Leave a Reply