Positioning Starter

The box model:

This paragraph is in a DIV (div = division, or, area). In the attached CSS file, style this box and the elements within it. Edit the corresponding CSS properties like the width of the div (use flexible sizing), the color property (which will change the color of text within it), its background-color, the padding and margin settings, and border values (border-width, border-style, and border-color). Preview in the browser before and after each change to observe how the changes affect the display of the html. You can also use the hinting in the CSS to make other, related changes (margin-left, padding-top, border-left, etc.).

This paragraph is the first element in a div with the id/name, "main." This div is a parent container of a series of sections with differently positioned elements, below. Follow the prompts in each section to try out the effects of different ways to position things.

Normal flow example:

This div does not have any position properties/values applied. It only has size, spacing, and background-color values applied.

Same here. This div does not have any position properties/values applied. It only has size, spacing, and background-color values applied.

Again, this div does not have any position properties/values applied. It only has size, spacing, and background-color values applied. These 3 containers show you that if there are no positioning settings designated, then content will just flow vertically from top to bottom.

Absolute positioning:

Pixel-based positioning is absolute. The position of absolutely positioned items is in relation to the top left corner of their *parent* container. Move around the position of the little black box in this section, directly below, from the top and left edges of its parent (the div called "absolute_example") by adjusting its css in increments of 25px to see this at work. Preview after each CSS change.

move me

Sticky positioning:

This div is scripted to stick at the top of the browser when scrolling takes it to the top. Sticky means it won’t scroll out of view until _________. It’s a great setting to use for nav elements that you don’t want to scroll away when they reach the top of the page until another element reaches the threshold.

Relative positioning:

The parent DIV for this element has relative positioning in the CSS. 'Position: relative:' moves an element from its position in normal flow and offests it relative to where it would have been in normal flow, rather than the upper-left corner of the parent container. Surrounding elements stay in their normal flow. Child elements of relatively positioned elements can be positioned with float and clear properties. This means that for floats to work, their parent has to be set to position: relative;.

Float example:

I am floating

This paragraph is preceded by an h3 that has a float setting in the CSS, which allows text to wrap around its edges on one side. Change the alignment of the float from left to right in the CSS to see it move to the other side… In use, all kinds of things can be set to float: images, captions, etc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam egestas tincidunt odio, at commodo dui pretium et. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla molestie est sit amet est posuere, eu semper purus pulvinar. Cras sodales turpis nec dictum eleifend. Vivamus finibus hendrerit neque porta aliquet. Maecenas pretium tortor at massa efficitur ullamcorper. Vestibulum aliquam feugiat varius. In ullamcorper eu tortor id iaculis.

Multi-floating example:

This div starts a row of divs one next to the other.
This div is in the middle of a row of divs one next to the other.
This div ends a row of divs one next to the other.
Replace this text with a short, sweet quote.

Change two property values for the quote selector in the css: 1) change its width percentage, and 2) change it to float right instead of float: left;. Preview before and after each change.

You are powerful. Do you feel it?

Fixed position example:

Change the location values of this div in the CSS. Change it from 'right: 0px' to 'left: 0px;'. Also change the distance that it appears from the bottom (and/or top)  of the browser edge, as well as how wide it is. Colors can be changed, too. This technique can be used to hold navigation and other things you want available while a page scrolls.