CODEWITHSUNDEEP
htmlcss
user4510167
user4510167

Reputation:

Width and height with divs (percantage)

I am trying to create simple web page using divs. I have read a lot of articles, but everythere width and height of divs is specified in px. Maybe I don't understand something, but maybe it is better to specify this attributes in percantage ?
I have tried, but received not what expected.
I need to get such result Desired

Here is my html 

<!DOCTYPE HTML>
<html>
<head>
  <title>Test page</title>
    <link rel="stylesheet" href="style/stylesheet.css" />
</head>
    <body>
    <div id="container">
<!-- HEADER -->
        <div id="header">
        <div id="logo">Logo</div>
        <div id="top_info">Top Info</div>
        <div id="navbar">
            <ul>
                <li><a href="404.html">First</a></li>
                <li><a href="404.html">Second</a></li>
                <li><a href="404.html">Third</a></li>
                <li><a href="404.html">Fourth</a></li>
                <li><a href="404.html">Fifth</a></li>
                <li><a href="404.html">Sixth</a></li>
            </ul>
            </div>
</div>
    <div id="content_data">
        <div id="banner">Banner</div>
        <div id="left_col">Left column</div>
        <div id="content">Contnent area</div>
        <div id="right_col">Right column</div>
    </div>
     <div id="footer">
        Footer
        </div>   

    </div>
    </body>
</html>

And here is css file 

#container {
 width: 90%;   
    margin: 0 auto;
    background: #fff;
}
#header {
 width: 100%;   
    height: 60px;
    border-bottom: 1px solid #c7c7c7;
    background: #333;
}
#logo {
 float:left;
    width: 40px;
    height: 40px;
    margin: 10px;
    background: #ccc;
}
#top_info {
 float: right;
    width: 100px;
    height: 40px;
    background: #666;
    border: 1px solid #c7c7c7;
    margin: 10px;
}
#navbar {
 height: 20px;
    clear: both;
}
#navbar ul {
 margin: 0;
    padding: 0;
    list-style: none;
}
#navbar ul li {
 clear: both;
}
#footer {
 padding: 20px;
    clear: both;
}
#navbar ul li a {
 font-size:12px; float: left;
    padding: 0 0 0 20px;
    display: block;
}
#banner {
 background: #666; 
    height: 120px;
    clear: both;
}
#content {
    width : 60%; 
}
#left_col {
 float: left;
    width: 20%;
    height: 200px;
    border: 1px solid #333;
    color: #FFF;
    background: #000;
}
#right_col {
    background: #000;
 float: right;
        width: 20%;
    height: 200px;
    border: 1px solid #333;
    color: #FFF;

}

But get next result. If set width of container id in pixels it works great. enter image description here Please help to solve the problem if its possible.
And give some advices how to build responsible pages, maybe some articles or books.
Thx.

UPDATE

I have changed width to 50% and it works. I guess this is because of parrent div has width 90%, so 20%(left) + 20%(right) + 50% (content) = 90%. Am I right ?

Upvotes: 0

Views: 79

Answers (4)

Robin V.
Robin V.

Reputation: 1542

The percentage is with respect to its direct parent. So it doesn't matter if parent is set to 90%. It's because of the 1px border on the side divs. which makes the divs a little bigger than 20%, going over 100% of parent.

You can solve this by make content little smaller to make space for the extra 4px due to the 1px borders on both side divs:

#content {
    width : 58%; 
    float: left;
}

It is cleaner to float all divs left. You'll get the same result.

Upvotes: -1

Anirudh Ajith
Anirudh Ajith

Reputation: 927

Yes, you are right. Your percentages should add up to 100%

20%(left) + 20%(right) + 50% (content) = 90% (not 100%)

You could make the left and right percentages 25% each to get 100%. That should work fine.

Upvotes: -1

Anirudh Ajith
Anirudh Ajith

Reputation: 927

Using percentages is one way to create a responsive web page but the better way is by using Media Queries.

Take a look at CSS3 media queries.

They are exactly what you need. All you need to do is specify some maximum or minimum screen dimensions in your case for each media-query. This way, you can design how your site looks on mobile devices, tablets, computers, etc. and they need not all be the same!

Something that looks good on a big screen like that of a computer need not necessarily look good on a mobile device but using media query, you can design separate versions for both devices!

For example, you execute some CSS only for desktop computers using min-width

@media screen and (min-width: 800px) { /*The following CSS runs only for displays with a width (in pixels) of more than 800px*/
    body {
        background-color: lightblue;
    }
}

@media screen and (max-width: 800px) { /*The following CSS runs only for displays with a width (in pixels) of less than 800px*/
    body {
        background-color: yellow;
    }
}

This way, your webpage looks different on desktop computers and looks different on mobile devices and tablets.

Also, see this great link.

Upvotes: 0

Aleš Lul&#225;k
Aleš Lul&#225;k

Reputation: 58

The problem is that left and right columns have set border 1px. It makes their width 20% + 2 px (left and right 1px border). Also content area should be floated too.

EDIT: if you want these borders, set width of columns as follows: 

width: calc(20% - 2px);

Upvotes: 3

Related Questions