Scribd
Upload
17 views

El (Display: Block Text-Align: Center ) : ST ND

This document provides tips for CSS layouts including: 1) Centering elements of unknown width using display: block and text-align: center. 2) Adding gutters between columns by applying padding to column children instead of complex percentage math. 3) Using the box-sizing property to include padding and margins in element widths. 4) Wrapping layouts in a #wrapper div to center content and add background images.

Uploaded by

Anonymous XSNBQQ4y
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
17 views

El (Display: Block Text-Align: Center ) : ST ND

This document provides tips for CSS layouts including: 1) Centering elements of unknown width using display: block and text-align: center. 2) Adding gutters between columns by applying padding to column children instead of complex percentage math. 3) Using the box-sizing property to include padding and margins in element widths. 4) Wrapping layouts in a #wrapper div to center content and add background images.

Uploaded by

Anonymous XSNBQQ4y
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 1

CSS Layouts *Easiest way to Centre Text Els of Unkown Width => el { display: block; text-align: center; } *Easiest

way to add Gutters eg. 1st Col = 66.66% 2nd Col = 33.33%

=>Add Padding to Children of these Cols (then you dont have to do difficult Maths on the Cols (w/ %s) - ALSO = New Box Model (approx 1yr from Full Implementation) => box-sizing Prop (w/ border-box, etc) MINUSES P/M from the Width (instead of Current Method of Adding M/P to Width) *Adding a #Wrapper to the L/O apart from its worth 4 Centring a L/O = Also handy for Adding a BG-Img 4 L/O *Min-Width => div { width: 90%; min-width: 400px; max-width: 800px;}

= Div will be 90% - as long as Div is between above measurements *If you have Width: 100% - on a Div Padding/Margin = will be Added to 100% & NO Width on Div Padding/Margin = will be Subtracted from 100% *When using <li> - to Layout = NO Need to Position Child Els - ALL of them Get their Own Line <li> <h3>Styx</h3> <img src="images/adopt1.jpg" alt=""> <p>Shorthair, black</p> <p>Male, 2 years</p> </li> ALL Els = just Containers thats Size (by Default) = Determined by its Content A lot (if not most) L/O probs (Els Dissapearing, etc) = Caused by = 1. Width (El too Wide) or 2. Height probs as well as 3. Syntax Errors & 4. B Bugs

You might also like