Learn CSS Positioning in Ten Steps: position static relative absolute float. 1. position:static The default positioning for all elements is position:static, which means the element is not positioned and occurs where it normally would in the document.
Normally you wouldn't specify this unless you needed to override a positioning that had been previously set. 2. position:relative If you specify position:relative, then you can use top or bottom, and left or right to move the element relative to where it would normally occur in the document. Let's move div-1 down 20 pixels, and to the left 40 pixels: Notice the space where div-1 normally would have been if we had not moved it: now it is an empty space. It appears that position:relative is not very useful, but it will perform an important task later in this tutorial. 3. position:absolute When you specify position:absolute, the element is removed from the document and placed exactly where you tell it to go.
Let's move div-1a to the top right of the page: What I really want is to position div-1a relative to div-1. Footnotes 10. Flexible height vertical centering with CSS, beyond IE7. One of the most common CSS questions is undoubtedly how to center an element vertically.
There are several techniques for doing that, but many, including one that I posted more than seven years ago in Centering with CSS, rely on specifying a height for the centered content. That obviously makes the technique somewhat inflexible. I recently needed to center something both horizontally and vertically and started thinking that there might be better ways of doing it if I could disregard IE7 and older. The technique I ended up with uses display:table to center the whole page and seems to work well, though there is one caveat. The HTML The vertical centering demo page I’ve made shows how display:table can be used to center the whole page vertically and horizontally. <body><div id="body"> Content goes here </div></body> The CSS The CSS isn’t very complicated either. And that’s all there is to it: Flexible height Browser support CSS tables are not HTML tables.
CSS Box Model. CSS2 - white-space. The white-space declaration allows you to tweak the wrapping of an element.
The tab-size declaration allows you to set the width of tabs. Test sheet: I add the relevant white-space value inline. nowrap This value suppresses all line breaks in the element, except where it contains <br>s or <wbr>s. This is the test paragraph. Pre This value makes the element behave as a <pre>: all line breaks, tabs and other oddities of the source code are literally followed. pre-wrap This value behaves as the pre value, except that it adds extra line breaks to prevent the text breaking out of the element's box. pre-line.