Geekmas #7: No it its not gonna get any bigger
Today Im gonna look on how to control the width of an element and how you dont get confused (and angry) over the padding + border + foo + margin + width + foo + whatever ... aaargh giiive me a break goddammit i command you div be 300px wide no more no less!
The basic idea is really simple: if you need to create a "box" use 2 divs the outer div would define the with the innde div would get the padding etc, then you will never ever again be hating on stylesheets, and bitching over the width of an element.
So something like this
<div class="my_width_class">
<div class="padding_n_stuff">
box
</div>
</div>
.my_width_class{width:231px; overflow:hidden}
.padding_n_stuff{margin:0 4px 2px 3px}Thats it - now how easy were that - no more probs with different browsers, and different ways of calculating the with of an element
So with that on its place this would be a simple wireframe for thou mighty drupal:
page.tpl.php:
- the comments referes to a region.
#000000">#0000BB"><?php
#007700"><#0000BB">div id#007700">=#DD0000">"pageHeader" #007700">class=#DD0000">"pageWidth"#007700">>
<#0000BB">div id#007700">=#DD0000">"pageHeaderInner"#007700">>
<!--#0000BB">header#007700">-->
</#0000BB">div#007700">>
</#0000BB">div#007700">>
<#0000BB">div id#007700">=#DD0000">"page" #007700">class=#DD0000">"pageWidth"#007700">>
<#0000BB">div id#007700">=#DD0000">"pageBody" #007700">class=#DD0000">"pageWidth clearfix"#007700">>
<#0000BB">div id#007700">=#DD0000">"pageBodyInner"#007700">>
<#0000BB">div id#007700">=#DD0000">"pageBlock_1" #007700">class=#DD0000">"pageBlock_1_Width"#007700">>
<#0000BB">div id#007700">=#DD0000">"pageBlock_1_inner"#007700">>
<!-- #0000BB">sidebar_left#007700">-->
</#0000BB">div#007700">>
</#0000BB">div#007700">>
<#0000BB">div id#007700">=#DD0000">"pageBlock_2" #007700">class=#DD0000">"pageBlock_2_Width"#007700">>
<#0000BB">div id#007700">=#DD0000">"pageBlock_2_inner"#007700">>
<!-- #0000BB">header#007700">, #0000BB">tabs#007700">, #0000BB">content #007700">-->
</#0000BB">div#007700">>
</#0000BB">div#007700">>
<#0000BB">div id#007700">=#DD0000">"pageBlock_3" #007700">class=#DD0000">"pageBlock_3_Width"#007700">>
<#0000BB">div id#007700">=#DD0000">"pageBlock_3_inner"#007700">>
<!-- #0000BB">sidebar_right#007700">-->
</#0000BB">div#007700">>
</#0000BB">div#007700">>
</#0000BB">div#007700">>
</#0000BB">div#007700">>
</#0000BB">div#007700">>
<#0000BB">div id#007700">=#DD0000">"pageFooter" #007700">class=#DD0000">"pageWidth"#007700">>
<#0000BB">div id#007700">=#DD0000">"pageFooterInner"#007700">>
<!-- #0000BB">footer#007700">-->
</#0000BB">div#007700">>
</#0000BB">div#007700">>
#0000BB">?>style.css:
#page{margin: 0 auto;}
.pageWidth{width:768px;}
.pageBlock_1_Width{width:180px; overflow:hidden}
.pageBlock_2_Width{width:468px; overflow:hidden}
.pageBlock_3_Width{width:120px; overflow:hidden}
#pageBlock_1_inner{margin:0 10px;}
#pageBlock_2_inner{margin:0 10px;}
#pageBlock_2_inner{margin:0 10px;}
offcourse there would be more style definitions, but that my friends im gonna go through the next couple of days - when im gonna smack together a brand new theme for the Danish Drupal Usergroup.
2 days to go and my youth is maybe over when im 34...
