Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

div displaying questions

6:11 pm on May 8, 2013 (gmt 0)

New User

5+ Year Member

joined:Apr 30, 2013
votes: 0


I want to use a div container for content displaying of my webpages.

I use this setting:

margin: 10% 20% 20% 20%;

But when I add text content on this principal div, or when I set min-height for it, the bottom margin isn't respected. The div is going until to the bottom of the webpage.

This is happening in google chrome and in internet explorer 8,
but in mozilla this bottom margin is respected.

Please help me to control a div in a web page.

Here is a link: < sorry, no personal links >

I will put and the code:

php file:



<link rel="stylesheet" type="text/css" href="clothes.css"/>


<div class="big">

<div class="top">
<p> MENU </p>

<div class="content">
<p> CLOTHES [32] But I must explain to you how all this mistaken idea of denouncing of a pleasure and praising pain was


</div> <!--END CONTENT -->

<div class="down">

<p> cucu </p> <!-- END DOWN -->


<div style="clear:both;"></div>

</div> <!-- END BIG -->

.css file:


margin: 0px;
padding: 0px;


html,body {

height: 100%;


.big { /* div wich contains top, content and down divs */

margin: 10% 20% 20% 20%;



.top {



.down {



.content {



Thank you very much.

[edited by: tedster at 9:25 pm (utc) on May 8, 2013]

7:54 pm on May 8, 2013 (gmt 0)

Senior Member

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Mar 15, 2002
votes: 0

Welcome to WebmasterWorld!

Is the absence of a proper DOCTYPE in your example accurately reflecting your HTML output, or simply an omission when pasting relevant code in your post?

If you don't have a DOCTYPE, first add that and test again. You will likely start experiencing other problems, but whatever they may be, having a DOCTYPE is better than not having one, as far as consistent rendering goes. Without a DOCTYPE (and a full and correct one, at that) there's no point in even beginning to "fix" issues.
9:13 pm on May 8, 2013 (gmt 0)

Junior Member

10+ Year Member

joined:May 28, 2003
votes: 4


The div is greater than the 100% that you have set for the body so the margin-bottom is ignored as you have already overflowed out of the viewport.

Using height:100% on html and body is a common technique for gaining an initial 100% so that the main wrapper element can base it's percentage height on the viewport window but few people understand the implications. In essence the main-wrapper then just overflows the body when the 100% height of the viewport is exceeded and in most cases this does not really matter but as you have seen there are browsers differences on what happens next.

You should also be aware that percentage margins are based on the width of the element (even for vertical margins) so the amount of vertical margin will depend on how wide the window is open.

If you want space at the bottom then remove the height:100% from the html and body elements and the margin should apply but you will then most likely lose the percentage heights you have set.

You should really just let the content dictate the height and let things flow naturally and life becomes so much easier.:)
10:55 am on May 12, 2013 (gmt 0)

New User

5+ Year Member

joined:Apr 30, 2013
votes: 0

Thank you for your responses.

I had added the DOCTYPE in my .php file.

Thank you Paul for your indications, the correction indicated by you has worked. So I understand that the 100 percent for the body and html is used in the cases when the main wrapper elemend has small content.

I understend that adding text in wrapper element increases the content percentage.

Thank you for indications guys.
4:56 pm on June 17, 2013 (gmt 0)

New User

5+ Year Member

joined:Apr 30, 2013
votes: 0

I have another problem with this layout. I want to say first that I have modified the height:100% setting for the html and body and every thing was ok.

Now. When I add an element in the top div.
For example <a style="padding:10px"> MENU </a>, the padding overflows the top containing div. The padding style is the problem, but why?

Thank you.
9:02 pm on June 17, 2013 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
votes: 889

Is the <a> flopping around loose in the div, or is it inside some other element?

Try very hard to avoid inline styles. Put it in the CSS even if it only occurs once on each page. Things will load faster and display more cleanly.

You also need to be careful when mixing different units of measurement-- ems, pixels, percentages-- especially horizontally. I think the validator's stock response is "mmmwell, OK, but it's not a robust stylesheet".
5:01 pm on June 18, 2013 (gmt 0)

New User

5+ Year Member

joined:Apr 30, 2013
votes: 0

I belive you about the inline styles. But even if I put the padding setting in the .css file I don't think it will resolve the problem. My problem is, why the padding exceeds my top div? And how do I fix that?

Thank you.
5:21 pm on June 18, 2013 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 5021
votes: 26

You are setting padding on an inline element.

The vertical padding, border and margin of an inline, non-replaced box start at the top and bottom of the content area, and has nothing to do with the 'line-height'. But only the 'line-height' is used when calculating the height of the line box.

In other words, your vertical padding is ignored because it's an inline element.