I need help with the css box models. I have a problem with my website ucare-ph.org . The logo (temporary) is covering the main copy. Now I know someone can tell me the code to fix this. But what I really need is a resource or resources in books or websites that can give me a better understanding of the box model. The syntax is very easy. But the relationship between the boxes is very difficult. And yes I have firebug and web dev for firefox. But its still trial and error.
+3
A:
As to your site's logo, try setting clear: both on the content.
John Millikin
2008-09-18 02:39:04
+1
A:
Something that helped me a lot is using Firebug
Right-click an element on the page and choose 'Inspect Element'. Then choose the 'Layout' tab in the panel on the right. You can see a graphical representation of the element along with the measurement of each component of the box model. My life would be miserable without Firebug.
neonski
2008-09-18 02:44:59
+1
A:
Note that Internet Explorer uses a broken box model unless you specify a doctype such as:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
In the broken box model, the height and width values refer to the size of the box excluding the margins.
For example, if you have this:
<div style="width:100px; height:100px; padding:10px; border:10px solid #000;"></div>
In the correct box model it will display a box that is 140x140 because the padding adds 10px to each side of the content area (which is 100x100) and then the border adds another 10px to each side.
However, in the broken IE box model it will display a box that is 100x100 and the border and padding will sit inside that space leaving you with a content area of only 60x60.
molasses
2008-09-18 03:01:26