100% (Minus Some Padding)

Forum Moderators: not2easy

Message Too Old, No Replies

100% (Minus Some Padding)

Probably something simple, but...

ismith

10:23 pm on Apr 30, 2007 (gmt 0)

I'm trying to create a basic page layout but can't seem to wrap my head around the box model. I'm shooting for a 100% width/height div with a 15px margin, 1px border, and 15px padding. The problem is that it ends up 62 pixels too wide/tall (i.e., beyond the edges of the browser window) when I set the width/height to 100%.

Any recommendations on how to do this? I can't seem to think of any way of using a combination widths/heights specified in percentages and margins/paddings/borders specified in pixels...

Setek

3:49 am on May 1, 2007 (gmt 0)

Block-level elements by default take up available width. You could possibly remove the width and just have padding.

If you’ve set the element to float or position absolutely, however, it stops taking up available width and only takes up necessary width, in which case there’s a bit more of a problem.

One solution some have used is to add an extra containing element, so that the outer handles the width and positioning, and the inner handles the padding.

Or yes, use percentages :)

ismith

3:27 pm on May 1, 2007 (gmt 0)

Hmm, okay you're right I can remove the width and it seems to work fine horizontally. I still have the problem with height.

I've tried nesting DIV elements but I still need the innermost one to have a height of 100% and I can't do that if padding is applied.

I've also tried doing some absolute positioning with:


border: solid 1px red;
bottom: 15px;
left: 15px;
right: 15px;
padding: 15px;
position: absolute;
top: 15px;

That doesn't seem to work in IE6 (it seems to ignore the right and bottom attributes), nor does it work in FF2 if the content of the div is too big for the browser window (it just scrolls outside of the DIV element).

Xapti

12:39 am on May 2, 2007 (gmt 0)

If you nest two divs, the outer one with the border, both with 15px margins, 0px padding, that might work?

Or maybe I mean padding 15px, margin 0px, inner one with the border...
Try them out.

encyclo

1:29 am on May 2, 2007 (gmt 0)

Welcome to WebmasterWorld [webmasterworld.com] ismith. :)

For 100% height, you need to define the 100% on the

html

and

body

elements. You can use absolute positioning to place a footer at the bottom of the page, but you must leave enough padding to give it space as an absolutely-positioned div is taken out of the natural document flow.

Here's an example of what you can do, you'll probably need to adapt it a bit but you'll get the basic idea. :) Note that IE6 treats

height

as the same as

min-height

(for better browsers), hence the repetition in the wrapper's rules.

<!DOCTYPE html>
<html><head><title>100% height test</title>
<style type="text/css">
html,body {
[b]height:100%;[/b] /* absolutely vital! */
margin:0;
padding:0;
background:yellow;
}
#wrapper {
position:relative;
margin:0 15px; /* 15px left and right margin */
height:auto !important;
height:100%;
min-height:100%;
}
#header {
padding:15px;
background:blue;
border-bottom:4px solid red;
}
#main {
padding:15px 15px 50px; /* 15px padding plus some more for the footer */
}
#footer {
position:absolute;
width:100%;
bottom:0;
background:green;
border-top:4px solid red;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>100% height example</h1> 
<p>This is the #header div for page title etc.</p>
</div>
<div id="main">
<p>This is the #main div where all the content goes</p>
</div>
<div id="footer">
<p>footer div here</p>
</div>
</div>
</body>
</html>

Hope the above will give you some pointers. :)