Results for box model

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

Continue to read >>

box model, css 2 columns, css layout, fixed width, fluid width

{ 0 comments }

0 comments

Stay updated with our RSS Feed

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

Continue to read >>

1 column layout, box model, css fixed width, css fluid width, css layout

{ 0 comments }

0 comments

Stay updated with our RSS Feed

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:

Continue to read >>

box model, css border, CSS Box Model, css float, css margin. css padding, css position

{ 0 comments }

0 comments

Stay updated with our RSS Feed