User Tools

Site Tools


the_box_model_-_managing_mantle_width_and_core_width

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

the_box_model_-_managing_mantle_width_and_core_width [2012/12/08 11:32]
admin
the_box_model_-_managing_mantle_width_and_core_width [2012/12/08 11:44] (current)
admin
Line 52: Line 52:
 ---- ----
  
 +Now let's set our Mantle width to "auto" and observe the result:
  
 +{{:wiki:box-model-settings-03.png?nolink|}}
 +
 +{{:wiki:box-model-example-03.jpg?nolink|}}
 +
 +As you can see, our Mantle now occupies the full with of our page. And because our Core is also set to "auto", it continues to occupy the full width of the Mantle. As a result, our text is now uncomfortably wide to read.
 +
 +We can remedy this situation by setting our Core width to a "fixed" value:
 +
 +{{:wiki:box-model-settings-03b.png?nolink|}}
 +
 +{{:wiki:box-model-example-03b.jpg?nolink|}}
 +
 +Our Mantle continues to occupy the full width of our page, but our Core and its content are now nicely constrained at a width that is much easier to read.
 +
 +----
 +
 +At this point you should have a good understanding of how the box model works. Our examples have used the block and textual content to illustrate our points, but the same principles apply to the masthead, navigation, the gallery thumbnail grid, etc.
 +
 +Thus armed with understanding, you should be able to manage page layouts with ease. If not, then just spend some hands-on time with the width, margin and padding sliders and you'll be at ease quickly enough.
the_box_model_-_managing_mantle_width_and_core_width.txt ยท Last modified: 2012/12/08 11:44 by admin