okay im trying to make a 3 column layout but i want all of the columns to be fluid with 33% width and 50% height. I also want padding on the 3 divs for the columns. but every time i add the padding it makes the last div goto the next line.

how can i fix this??

html

<div id="nav">
    <div class="block" id="left">开发者_开发问答
        <h1>blah blah</h1>
    </div>
    <div class="block" id="middle">
        <h1>blah blah</h1>
    </div>
    <div class="block" id="right">
        <h1>blah blah</h1>
    </div>
</div>

css

#nav {
    ??
}
.block {
    padding:20px;
    width:33%;
    height:50%;
    position:relative;
    float:left;
}

Unfortunately it's not going to work how you want it with that DOM structure. The W3 box model includes the padding and borders in the calculated width, so it adds 40px to each of those divs which puts it 120px too wide.

What you'd want to do is treat these three divs as wrappers, and then nest divs inside them which you can then assign a margin to replace the padding.

Example:

<div id="nav">
    <div class="block" id="left">
        <div>
            <h1>blah blah</h1>
        </div>
    </div>
    <div class="block" id="middle">
        <div>
            <h1>blah blah</h1>
        </div>
    </div>
    <div class="block" id="right">
        <div>
            <h1>blah blah</h1>
        </div>
    </div>
</div>

CSS:

.block {
    width:33%;
    height:50%;
    position:relative;
    float:left;
    background-color:#CCC;
}

.block>div {
    margin:20px;
}

Working demo: http://jsfiddle.net/AlienWebguy/Yf34X/