Archive

Posts Tagged ‘div’

Internal div padding…

March 12th, 2009 ben No comments

So today I was playing around with -moz-border-radius and I was having problems with text touching the border of my div, ideally I wanted some sort of internal margin… ok so, padding I thought… 5px or so should do it.

I would have been right as well, except I had defined a width for the div and when used in combination with the padding property it was causing the div to expand beyond the width I had specified, ugh!

To get around this I had to take the border size into consideration:


border:                      4px #BB834B solid;
padding:                     10px;
width:                       180px;

would become:


border:                      4px #BB834B solid;
padding:                     10px;
width:                       170px;

8px have been deducted for the left (4px) and right (4px). This makes sense, but it would make more sense for the borders to be deducted from the width, not added. If anyone can suggest a better method, I would be very interested!

UPDATE:

As it happens, I have found a better solution, rather than deducting the borders from the width… simply don’t determine a width, but wrap the div around an outer div (which has its width set). That way the inner div will not expand when you add the padding:


<div class='outer_div' style='width: 200px'>
<div class='inner_div' style='border: solid 4px #000000; padding: 10px;'>
</div>

</div>

Categories: CSS2, CSS3, Web Standards, images Tags: , , , , ,

Simple error messages using divs and css

February 27th, 2009 ben No comments

I know this is common sense, but I something to share and this was the most relevant thing I could come up with. More and more I find myself using these simple divs to display error messages to the user.

<div class='error'>Blah Blah Unsuccessful</div>
<div class='success'>Blah Blah Successful</div>

And then the usual little bit of CSS to format the text (in relevant colours).

.error { color: red; margin: 10px; }
.success { color: green; margin: 10px; }

Simple but highly effective :)

Categories: CSS2, Web Standards Tags: , ,

Centering Divs

February 26th, 2009 ben No comments

One thing I often find myself having to look up on the web is how to center block content, without using tables or ‘text-align’ and using CSS (I believe that tables should only be used for displaying tabular data, not formatting entire sites).

To do this, we simply, create a main div to wrap everything else in, set a width and then set the margin-left and margin-right properties…

#content {
width: 700px ;
margin-left: auto ;
margin-right: auto ;
}
<body>
<div id='content'>
<div id='foo'>Some content</div>
<div id='foo_2'>Other content</div>
</div>
</body>

Its important the width property is set, but it needn’t be ‘px’, ‘em’ or ‘%’ will also work. If you want to center text (non block content), then use:
text-align: center;

Categories: Uncategorized Tags: , , , ,