div displaying questions - CSS forum at WebmasterWorld - WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

div displaying questions

ghid

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

10+ Year Member

Hi,

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:

<html>

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




<body>


<div class="big">


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



<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 

</p>

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




<div class="down">

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

</div>

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

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

.css file:

*{

 margin: 0px;
 padding: 0px;

}



html,body {

 height: 100%;
 background-color:rgb(238,233,233);

}


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

margin: 10% 20% 20% 20%;

min-height:70%;
height:auto;

background-color:rgb(185,194,177);
}

.top {

min-height:10%;
background-color:red;

}

.down {

position:relative;
bottom:0%;
min-height:5%;
background-color:red;

}

.content {

min-height:60%;
height:auto;
background-color:green;

}

Thank you very much.

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

DrDoc

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

WebmasterWorld Senior Member

10+ Year Member

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.

Paul_o_b

9:13 pm on May 8, 2013 (gmt 0)

10+ Year Member

Hi,

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.:)

ghid

10:55 am on May 12, 2013 (gmt 0)

10+ Year Member

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.

ghid

4:56 pm on Jun 17, 2013 (gmt 0)

10+ Year Member

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.

lucy24

9:02 pm on Jun 17, 2013 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

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".

ghid

5:01 pm on Jun 18, 2013 (gmt 0)

10+ Year Member

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.

Fotiman

5:21 pm on Jun 18, 2013 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

You are setting padding on an inline element.
[w3.org...]

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.