How HTML/CSS Borders Affect the Size and Layout of Your Webpage

How the CSS border attribute affects the layout of your website. It is not calculated in as part of your width, so adding it, can negatively effect your pixel perfect layout. This video shows a way around that issus however, so you can better protect layout.

Category:

Education

Tags:

• css
• borders
• layout
• 960 grid system

[waltdesignanddevelop]

The effect is the same. If you have an element, and set it's width to 400px, then add a 2px border, your element is actually 404px wide (2px on each side).

[div id="element "][div id="innerElement "]...[/div][/div]

#element { width: 400px; border: 2px solid #000; }

Solution: add the inner element. #element { width: 400px;} #innerElement {border: 2px solid #000; }

Hope that helps.

[shakaama]

aww I really want to know this specific information because it's happening to me right now. but you use dreamweaver and I'm doing ti by hand. :(