CODEWITHSUNDEEP
css
Moon
Moon

Reputation: 22565

Why use percentage value for div's width in CSS?

I am reading articles about css. I found out that many of writers suggest to use % value for div's width or height.

I am using pixels all the time.

Why should I use % value for div's width or height instead of pixels?

What are the advantages?

Upvotes: 17

Views: 54978

Answers (8)

Cool Hand Luke
Cool Hand Luke

Reputation: 2140

Because if it's percentage based content flows making it easier to implement a responsive site (easier = (less (time = money))).

Drop the relevant floats, sort out your menus and and anything else after dropping in some media queries and you've got a site working on different resolutions and devices.

I use a fluid grid system using percentages and a ems for text sizes. Pixels are easier to work with but not in responsive terms. I do wrap my size in max width container.

PS

Remember though everything boils down to pixels in the end.

Upvotes: 1

JNZ
JNZ

Reputation: 408

the benefit of using % is than you can use all 100% of user interface, and give best experience no mattet

Upvotes: 2

user2073035
user2073035

Reputation: 41

I find web sites that don't fit the screen, either leaving white space (which can be considerable) round the edge of the content, or falling off the side with a scrollbar (or, worse, falling off the side withOUT a scrollber!) intensely annoying.

I write my pages to fit the screen, regardless of how large that screen is.

Upvotes: 4

Abimbola
Abimbola

Reputation: 19

All in all, if you use images on your site, using percent for main contianer may not be the best approach. In that case, you'd want to use pixels.

Advice: Use Pixels for main contianer and percent for content.

Upvotes: 0

Shaz
Shaz

Reputation: 15867

Although certainly not the only reason, use percentage to take up a certain amount of space of something you don't initially know the container parents width of.

For example, let's say I want my div element to always occupy at least 50% of the viewers browser window, I could write that as:

<div style="width:50%">
    This will take up 50% of the width
</div>

Doing this the fixed way by using "px" will require you know the resolution of the browser if you want at least 50% width taken up. You could do this using JavaScript, but CSS is much more easier and faster.

Some other Examples using tables, divs, and animations: http://jsfiddle.net/BLQp7/1/

Upvotes: 4

Tobias
Tobias

Reputation: 4397

Save the following html to a file and open it with your web browser. Now change the size of the web browser window, notice the percent will expand and contract and the pixels don't.

<!DOCTYPE html>
<html>
<head>
<title>Pixels and Percents</title>
<style>
html,body {
    margin:0;
    width:100%;
    height:100%;
    background:blue;
}

.pixels {
width:100px;
height:20px;
background:green;
}

.percent {
width:50%;
height:50%;
background:red;
}

</style>
<head>
<body>
<div class="pixels">
PIXELS
</div>
<div class="percent">
PERCENT
</div>
</body>
</html>

Upvotes: 7

Matt Eskridge
Matt Eskridge

Reputation: 1030

I, personally, dislike websites which have a % width for the main content area because of the inconsistency. It's best to use a pixel width of about 1000 pixels, maybe a bit less, for the whole website so that it will work for all resolutions.

As for elements inside the main content area, I tend to use percent widths because I don't really want to both with calculating the exact pixel values. The result is set in stone anyway because the thing that it's a percentage of is constant, as opposed to the monitor's resolution, which varies between users.

To sum it up: only use percentages when every user is going to get the same result because of a parent element having a fixed (pixel) width. Otherwise there will be inconsistencies in your design, making it so that you can't use any flashy images and the website may look ugly to users with giant / tiny monitors. If you are going to use percentage widths you simply have to test the website with different resolutions!

Upvotes: 11

Jonathan Wood
Jonathan Wood

Reputation: 67193

It's not clear which context you are referring to (what type of elements). However, you need to be careful when using pixels for font sizes.

I generally use pixels for divs to keep my layout as expected. But I avoid pixels for fonts. Different users may want the font at different sizes. Why take that away.

Upvotes: 1

Related Questions