3 types of ‘box model‘ based on 3 columns:
{ 0 comments }
From the category archives:
CSS Box Model
4 examples of ‘box model‘ based on 2 columns layout with 1 fixed column and 1 fluid column.
Using the position:absolute; :
- left column at fixed width / right column at fluid width
- left column at fluid width / right column at fluid width
Using the float:left; :
- left column at fixed width / right column at fluid width
- left column at fluid width / right column at fluid width
{ 0 comments }
6 examples of ‘box model‘ based on 2 columns:
- 2 columns fixed width aligned to the left
- 2 columns fluid width aligned to the left
- 2 columns fixed width centered aligned
- 2 columns fluid width centered aligned
- 2 columns fixed width aligned to the right
- 2 columns fluid width aligned to the right
{ 0 comments }
6 types of basic ‘box model‘ based on a single column:
- 1 column fixed width aligned to the left
- 1 column fluid width aligned to the left
- 1 column fixed width centered align
- 1 column fluid width centered align
- 1 column fixed width aligned to the right
- 1 column fluid width aligned to the right
{ 0 comments }
As from the name, the content of a page is positioned inside boxes which can, at their turn, contain other boxes of content such as inline and block element.
Those blocks, other then the content itself, can be made of margins, paddings and borders using the following css properties:
- margin: the transparent and empty space in between different boxes in units of measure or percent
- padding: the space in between the content and the border of the box in units of measure or percent
- border: the decorative border around the box in units of measure or percent
NB: margin, padding and border can be specified individually to the right, left, top, bottom, adding those terms to the property (ex: margin-top, padding-left, border-bottom…)
The content itself can have a specific width and/or height with the css properties:
- width: the width in units of measure (fixed width) or percent (fluid width)
- height: the height in units of measure (fixed height) or percent (fluid height)
The box can finally have a decorative background with the css property background.
All together, those css properties form the so-called box-model as represented in the following image:
{ 0 comments }
