CODEWITHSUNDEEP
css
user1202023
user1202023

Reputation: 1

Percentage is not properly working in css

when I use percentage value for width and height in css its not working properly... can some one explain me clearly how to give percentage values for css attributes and how does it works? thank u in advance

This is my css

    body 
{
    width:1440px;
    height:900px;

}
div.head
{
    background-image:url(Head.png);
    background-position:top center;
    width:100%;
    height:25%;
}
div.main
{
    background-color:White;
    width:100%;
    height:50%
}
div.foot
{
    background-color:White;
    width:100%;
    height:50%
}

HTML generated on browser:

<!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><title>
    Main
</title><link rel="Stylesheet" type="text/css" href="Css/StyleSheet1.css" />
    <script type="text/jscript" src="Js/JScript1.js"></script>


</head>
<body >
    <form method="post" action="WebForm1.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTY1NDU2MTA1MmRkKXI1tlT7ICPHcASdjP2BI5BEiw8ccKKJsW4NczkZMbs=" />

</div>

    <div id="header" class="head">
    Menu comes here
    </div>
    <div id="main" class="main">

Body comes here

    </div>
     <div id="footer" class="foot">
   footer comes here
    </div>

    </form>
</body>
</html>

Upvotes: 0

Views: 1084

Answers (2)

Anish Gupta
Anish Gupta

Reputation: 2226

Your CSS should be:

body 
{
    width:1440px;
    height:900px;

}
div.head
{
    background-image:url(Head.png);
    background-position:top center;
    width:100%;
    height:25%;
}
div.main
{
    background-color:white;
    width:100%;
    height:50%;
}
div.foot
{
    background-color:white;
    width:100%;
    height:50%;
}

I have added semicolons and changed White to white.

The percentages should be working but I don't think you know what it does.

From Borealid's answer:

What height: 50% means is that the element's height will be half the height of the box containing it. So, your problem is likely that the containing element is not tall enough (if your styled element is too short) or too tall (if your styled element is higher than expected).

Upvotes: 0

Borealid
Borealid

Reputation: 98469

I guarantee you the percentages are "working". They're just not doing what you expect.

What height: 50% means is that the element's height will be half the height of the box containing it. So, your problem is likely that the containing element is not tall enough (if your styled element is too short) or too tall (if your styled element is higher than expected).

You should use a tool like Chrome's Developer Tools to inspect the sizings of the elements on your page and see which one doesn't match your assumptions, then use CSS to correct the issue.

Upvotes: 5

Related Questions