Ha ha.
Okay, so I’m getting more confused here, so let’s turn to a real example…
Thanks to Paul O’ - and others - I have my 3-column layout tweaked and understood again.
My layout has 3 columns which are floats and position: relative. The Left and Right Columns are 200px. The Middle column has width: 100% and uses a -400px right-margin.
In the Left and Right Columns I want to add “boxes” that contain various things. (In the simplest of terms, think of how your SitePoint profile looks with its “My Messages”, “My Subscriptions” and “My Settings”.)
So, when I looked at my old code, I realized there are several ways to get the end effect I want, but then I was unsure of the “correct” technical way to do things?!
As it stands now, I have…
.box{
margin: 20px 0;
padding: 0;
border: 1px solid #AAA;
background-color: #FFFFCC; /* Buff */
}
Which means that my “box” is slammed up against the edges of the Left Margin.
Then inside the “box” I have…
p{
margin: 0.7em 0 0 0;
padding: 0;
text-align: center;
font-family: Helvetica, Arial, Sans-Serif;
line-height: 1.4em;
font-size: 2em;
font-weight: bold;
color: #F00;
}
Anyways, my goal is to just create a CSS “box” with content inside that is written the most logical way and that scales the best as seen in my other thread: Seeking Polymorphic CSS Class?!
Because a “box” may not always be constrained by a fixed-width Left Margin, I am thinking I should add the Padding to the <p>'s and do whatever is needed to keep the <div class=box"> at a predictable fixed width.
Hope I am making some sense here?!
Thanks,
Debbie