homepage Welcome to WebmasterWorld Guest from 54.226.213.228
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
div displaying questions
ghid




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

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




msg:4572016
 7:54 pm on May 8, 2013 (gmt 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.

Paul_o_b




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

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




msg:4573258
 10:55 am on May 12, 2013 (gmt 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.

ghid




msg:4584996
 4:56 pm on Jun 17, 2013 (gmt 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.

lucy24




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

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




msg:4585409
 5:01 pm on Jun 18, 2013 (gmt 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.

Fotiman




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

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved