articles » current » css » tutorial » page-10

Cascading Style Sheets: Tutorial - Page 10

Width and Height, Floating Elements.

Width and Height

The width is the sum of the properties of the width, border-left, border-right, margin-left, margin-right, padding-left and padding-right assuming that all of these values were set with pixel values.

The height of elements should, generally speaking, never be set because if they are too small to fit their content then they will overflow or, if the overflow property is set, some of the content will be hidden. The exception to the rule of setting height is when there is no content in the element, or when creating a menu or other element like a fixed or absolute position element.

The max-width property sets the maximum width for an element. The element can be less than the setting but it can not be more. This means that it will resize to fit smaller screens but will not grow larger than the value specified. This is means that on high resolution screens the document will not look odd. The max-height property works the same way as does the max-width one does except that it applies to the height.

The min-width property sets and element's minimum width. The element can be wider but never less than the value specified. This is useful when the document would be too deformed if it becomes too narrow. The min-height property works like the min-width except that it applies to the height.

Floating Elements

Typically, an HTML document flows from the top down, one block-level element on top of another. However, floating elements move to the left or right of their containing element. When needing to ignore a floated element by having an element wanting not to wrap around the floated element, specify the clear property.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec egestas imperdiet purus, sit amet aliquet sapien gravida quis. Curabitur sed velit eu est finibus malesuada et eu nisl. Curabitur vel sapien et massa suscipit rhoncus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque commodo, libero vitae tincidunt volutpat, felis elit lacinia nibh, id vehicula tellus erat ut ex. Vivamus vehicula arcu sit amet arcu tincidunt, nec ultricies arcu suscipit. Donec tempus metus nec faucibus gravida. Vivamus eu ligula feugiat, pharetra massa ac, efficitur tellus. Quisque faucibus nisi aliquet congue condimentum. Praesent tellus lectus, vestibulum sit amet lacus ac, sagittis rutrum velit. Morbi tempus accumsan cursus. Morbi egestas nisi quis neque lobortis interdum. Sed tristique augue nec dignissim condimentum.

<<<[Page 10 of 15]>>>

This site uses cookies. Cookies are simple text files stored on the user's computer. They are used for adding features and security to this site. Read the privacy policy.