# Using percents as measurement units

Page 1 of 1

## 3 Replies - 482 Views - Last Post: 08 July 2009 - 02:06 PM

### #1 drewhannay

Reputation: 0
• Posts: 15
• Joined: 07-July 09

# Using percents as measurement units

Posted 07 July 2009 - 10:00 PM

Ok, so I recently finished my first website: http://www.kvpchoir.com

My uncle, who is a web designer, looked at it and the main thing he told me was that I need to use percents to set my widths and heights so that the site will expand to fill any size monitor. But he was not very clear in explaining how to actually do this....

Can anyone give me some tips on this? I think I understand the basics, but then again, I'm not sure. I learned everything I know from random free tutorials I found online, but I couldn't find anything on this. Thanks!

Is This A Good Question/Topic? 0

## Replies To: Using percents as measurement units

### #2 newt

Reputation: 4
• Posts: 25
• Joined: 06-July 09

## Re: Using percents as measurement units

Posted 07 July 2009 - 10:27 PM

I think that you should first think about which one would suit your needs;
take a look at this http://www.smashingm...ht-one-for-you/

### #3 drewhannay

Reputation: 0
• Posts: 15
• Joined: 07-July 09

## Re: Using percents as measurement units

Posted 08 July 2009 - 11:08 AM

Ok, I understand that article and I'm not necessarily going to completely redo my site to make it fluid, but it IS something I'd like to know how to do. Anyone feel up to trying to explain? Or pointing me towards a good tutorial?

### #4 BetaWar

• #include "soul.h"

Reputation: 1285
• Posts: 7,566
• Joined: 07-September 06

## Re: Using percents as measurement units

Posted 08 July 2009 - 02:06 PM

Okay, this will take a bit of text to explain.

Fluid websites are not completely done with percentages for widths. You need to have some that are set in stone to give it (the skin) some form of stability. Not stability like working in multiple browsers or not, but stability as in static portions.

This means you could have a site look like so on a small monitor:
```+--+-------+
|__|______|
|__|______|
+--+-------+

```

And then on a larger monitor:
```+--+-----------------+
|__|_____________|
|__|_____________|
+--+-----------------+

```

Now, you will notice that the left menu column is the same width between the two.

This is where the hard part begins. If you start off and want to use the current web standards you will run into issues with the divs and sizing (though it is far easier to work with tables as you can tell one column to be a fixed size and then tell the table t take up 100% of the width and the other column(s) will resize accordingly).

One of the easiest ways to go about getting divs and spans to work is using CSS and float.

Here is a quick example:
```<style>
.l{
float: left;
width: 200px;
border: 1px solid #0f0;
}
.r{
border: 1px solid #f00;
}
</style>

<span class="l">
</span>
<div class="r">
This is expanding content section
</div>

```

Now, I have only tested that in IE 7, but it may work in other browsers as well.

Hopefully that makes some sense.