1 Vote Vote

Margin And Padding, In Theory?

Posted by topdog 808 days ago Questions| div padding margin All
So, I'm relatively new to CSS, taught myself in a weekend a couple weeks ago, but am having some implementation problems...

Who isn't? wink.gif And can you help?

Here's the code I'm working with in one of the "Try It Now" boxes from the CSS tutorial:

QUOTE
<html>
<head>
<style type="text/css">

body {
margin:0px;
padding:10px;
}

div.container {
width:100%;
margin:0px;
padding:0px;
border:1px solid gray;
line-height:125%;
}

div.header,div.footer {
width:100%
padding:5px;
color:white;
background-color:gray;
clear:both;
text-align:center;
}

div.left {
float:left;
width:40%;
margin:0;
/*padding:5px;*/
}

div.content {
float:left;
width:60%;
/*border-left:1px solid gray;*/
/*padding:5px;*/
}

h1.header {
padding:5px;
margin:0px;
}
</style>
</head>
<body>

<div class="container">

<div class="header">
<h1 class="header">W3Schools.com</h1>
</div>

<div class="left"><p>"Never increase, beyond what is necessary, the number of entities required to explain anything." William of Ockham (1285-1349)</p>
</div>

<div class="content">
<h2>Free Web Building Tutorials</h2>
<p>At W3Schools you will find all the Web-building tutorials you need,
from basic HTML and XHTML to advanced XML, XSL, Multimedia and WAP.</p>
<p>W3Schools - The Largest Web Developers Site On The Net!</p></div>

<div class="footer">
Copyright 1999-2005 by Refsnes Data.
</div>

</div>

</body>
</html>


So, I'm noticing a frustrating trend when trying to use floated divs with percentage widths and things like borders, margins and padding. Trying to figure out if CSS is powerful; enough and flexible enough to do the relatively simple and stupid things I want it to do... So far I seem to keep hitting walls with the simplest things.

So, here's my quandary: it seems like adding margins, padding or borders messes with positioning of floated objects using widths set to percentages. It's quite frustrating.

The short and simple of it is that I'd LIKE to be able to have a container div with a specified width and then two or more child divs with widths that are a percentage of the parent div and all the child divs' total widths (including borders, margins and padding) would equal the width of the parent precisely.

So far, whenever I add padding or margin to one of the child divs it appears to expand the size of that child div, causing the TOTAL width of all child divs to exceed 100% of the width of the parent div and thus cause the floating to foul up with one or more of the divs wrapping to the bottom of the page below all the other sibling divs within the parent.

Is this typical? If so, how do I avoid it?

Ideally, what I'd LIKE to be able to do is to specify the percentage widths as ABSOLUTE MAXIMA for those objects and have all the other "stuff" fit inside that maximum. That is to say, border, margin and padding specifications would SUBTRACT pixels from the absolute maximum width, rather than adding pixels to an ABSOLUTE MINIMUM width.

If I specify one div at 40% and one div at 60%, those should be immutable quantities. MAXIMA for those objects, thus their total cannot exceed 100% of the parent object. So, if I have padding of 10px on the second child div, it SUBTRACTS those 10px on each side from the absolute maximum and then positions elements inside that div relative to the maximum minus the padding (for instance text-align:justify; would be justified within said padding 10px on each side from the absolute maximum of 60% of the parent div).

Or likewise, if I specify

border-style:solid;
border-width:1px;
border-color:black;
padding:10px;
margin:0px;

I'd want it to render from outer to inner with the results being akin to

outer div: 60% of parent div
no margin
border of 1px within that 60% maximum
padding of 10px withing the 60% minus 1px-on-all-sides
text positioned inside that div relative to the 1-pix-on-all-sides border and additional 10px-on-all-sides padding (so the text would effectively be 11-px on all sides from the 60% maximum)

Does that make sense, and is it possible within the scope of CSS? So far it seems like the padding, margin and border all add to the size of the div. So if I specify 40% / 60% it tends to add up more like 40% +1px +10px / 60% + 1 px + 10px, which obviously adds up to MORE THAN 100% of the container and leads to the aforementioned problems with wrapping.

Are there some attributes I'm missing or is there some workaround for this, or is this simply me living in fantasy land? Personally, I think it should be possible to specify something PRECISELY like this, if CSS is as powerful a display and formatting tool as everyone claims it is.

If at all possible, I'd prefer not to have to manually specify every pixel width for every element. I'd like the browser to do as much of the maths for me as possible using percentages.

So, can I tell it not to exceed 40% and 60% of a container tag? Or will things like borders, margins and padding always EXTEND the object you've specified a percentage width for, making percentages fairly USELESS and defeating the purpose of their use?

If this is something not currently within the standard, perhaps it's something that should be STRONGLY suggested for the next version?

Any coder gurus run across this issue before and figured out a simple solution? Having things like margins and padding SUBTRACT from the total maximum width rather than adding to it?

Hope that all made some kind of sense to someone out there.

I'm thinking that maybe I could put yet another div inside the child div and not specify a % width, just the margin and/or padding of that div and then put the text in there. But that seems like a kludge and div overkill. There's got to be a simpler way? Know what I mean?

Best,
~MG
Discuss Bury


Who Voted for this Question