WordPress School: HTML and CSS Positioning

In Lorelle’s WordPress School free online course we’ve been exploring HTML and CSS basics to help you prepare for working with WordPress Themes coming soon. The information in these tutorials is essential for the WordPress user to learn for the most simple of tasks, from controlling how content displays in your posts to adding HTML code to WordPress Widgets to tweaking your WordPress Theme, and someday maybe even making your own or at least creating a Child Theme, a design that modifies an existing WordPress Theme.

This tutorial explores CSS positioning, how to put things in their place on a web page, following up on the previous tutorial on the CSS Parent-Child Relationship.

There are many ways to position design elements on a web page. In the previous exercises, we moved the paragraph “down” within its container by adding padding to the inside “space” of the div. Margins and padding move things around and position them within the CSS Box Model, but you have other alternatives for more specific positioning.

Here is our test code for this tutorial:

<div class="position1">
<p>Hello world!</p>
</div>

Below is the CSS to add to the head in the styles. In this example, the position of the wrapping DIV around the paragraph is set to absolute 100 pixels from the top left corner down and 80 pixels in from the left edge of the parent container edge.

/* Testing Positions 1 */

div.position1 {
 background-color: green;
 width: 200px;
 height: 200px;
 position: absolute;
 top: 100px;
 left: 80px;
 }
.position1 p {
  font-weight: bold;
  margin: 20px;
  padding: 10px;
  border: 1px solid red;
  background-color: yellow;
 }

Note the position is set first to absolute and then the position set for top and left.

Save the file and reload in the browser. Where did our box go?

Look around the test web page. It should be at the top of the web page overlapping other content.

Why? We’ve defined the position of the <div> to be set absolutely from the top of the web page 100 pixels down, and from the left 80px horizontally over.

The absolute declaration value for a parent container in CSS places it within the web page itself as the main container.

Let’s change the value to relative, which means the position will be relative to the placement of the HTML code within the web page.

Note that the box is now back below the previous exercise, and down 100 pixels from the position of the HTML code, and over 80px from the left of the web page. The image is placed relative to the position of the code placement, as displayed in the graphic.

In a web page, the absolute and relative positions are critical to the placement of all of the design elements, especially the structural elements such as the header, sidebars, footer, and content areas.

For example, a web page may have a header that it 300px high. The content area must fit underneath the header. The absolute position of the content container needs to be a minimum of 300 pixels down on the web page to allow room for the header. It’s fairly simple math at this point.

If the sidebar is 200 pixels wide and the width of the web page is 800 pixels wide, to clear the header and be set to the right of the content area, the sidebar would be set to an absolute position of 300 pixels from the top and 400 pixels from the left. The width of the content area could be set by a percentage to fill in the space.

CSS position settings are absolute, relative, static, and fixed. Remember, child elements inherit positioning instructions from their parent elements, too.

Static is the default and rarely defined.
Absolute places the HTML element in an exact position relative to the web page or within the HTML parent container.
Relative moves the element from its normal position left, right, up, or down.
Fixed is another rare position and is relative to the viewport or the browser window rather than the actual web page. This is rarely used as it violates most accessibility and responsive standards, now replaced by absolute but still found in very old web page designs when they were designed for specific web browsers and browsers specific to the device such as computer terminals.

These are very simple and basic instructions for placing design elements, and sometimes the architectural elements need to be set relative to their position within the web page. This means the position is relative to the parent container and code placement.

Let’s experiment with the paragraph within our example container.

In the CSS above, the DIV is set to 200 pixels width. The paragraph inside has a margin of 20px and padding of 10px. Let’s look at those dimensions in this graphic.

This helps us to see the working space in and around the paragraph, and gives us a number, 140px width, that represents the content width inside of the paragraph.

Let’s move the paragraph in and around our 200px width DIV to experiment with the placement and alignment. Pay close attention to padding and margins and how they play with the alignment and positioning.

The CSS Float Positioning

One of the most popular positioning rule for the relative setting is float. The declaration influences the position to the left or right of the web page, or within a block-level element, setting the image to “float” within the parent container to the left or right, and other objects within the parent container to shift and move around the floating child container or design elements.

On most web pages, including WordPress sites, the float is most evident with images, moving them to the left or right (or center (not a float) within post content, allowing the text to wrap around the image. The image container sits on the left or right of the parent container, and the text, flows around the container, shifting as the page width increases or decreases with the screen width.

To the right in the above paragraphs I’ve placed an image of Japanese paper fans. It is set to float to the right. If your browser windows is full screen, resize it to a narrower width. Does the text flow around the image differently? Or are the exact same words next to the image at all time? Zoom in or out using the Ctrl (CMD) + and – keys (or Ctrl/CMD scroll in and out with the mouse) to change the size of the text. Notice how it continues to wrap around the image as the text size changes. This is an example of a float at work. The containers around it move around the position to adjust themselves to the changing environment.

Red Square Block. In this example, I’ve added a red graphic to our paragraph, along with some more text to flow around the graphic. To add your own red block, download the red block graphic floated to the left in this paragraph by right clicking and saving the image to your hard drive where you have your test file saved. It must be in the same folder for the following HTML to work.

<!-- This is experiment 2 in positioning -->

<div class="position1">
<p><img src="redblock.png" title="Red Block." />Hello world! We are now playing 
with a red square inside of our container box 
and the alignment features of a float.</p>
</div>

Since the red graphic isn’t styled yet, it just sits at the spot where it was added. Not very pretty. However, notice that the CSS class is still set as position1. It inherited the instructions for the styles from that class.

Let’s set the image to float to the right within the paragraph container. Add the following to float the image within the paragraph to the right below the other styles in the head section styles.

.position1 p img {
 float:right;
}

Pay close attention to the CSS instructions. Again, read them like a book.

In the paragraph of the DIV container identified with the position1 CSS class, set the image to float to the right.

In WordPress, image alignment floats are set by a class that floats any HTML inline design element to align left, right, and center with their appropriate class:

alignleft
alignright
aligncenter

Let’s change the image alignment style name to match those and add the class to the HTML and add the left float alignment as well.

.alignright {
 float:right;
}
.alignleft {
 float:left;
}

<!-- This is experiment 2 in positioning -->

<div class="position1">
<p><img class="alignright" src="redblock.png" title="Red Block." />Hello world! We are now playing 
with a red square inside of our container box 
and the alignment features of a float.</p>
</div>

Save the file and you will see that nothing should change within that block.

Edit the file to change the alignment to the class to align left, and the image will shift sides.

Notice that the red block is now crowded. We didn’t notice it when it was on the right as the jagged right margin appeared to give it some space. Using what you’ve learned so far, add some margins around the image to give it some space.

Let’s check what you did. Did you consider that the image would be pushed down from the top of the paragraph and away from the left margin? It looks odd, doesn’t it?

By only changing the margins appropriate to change, the right and bottom margins, the image aligns better with the top and left edges of the paragraph.

.alignleft {
 float:left;
 margin: 0px 5px 5px 0px;
}

Remember from a previous lesson on HTML shorthand, the measurements are clockwise, top, right, bottom, left.

Do the same with the right alignment called .alignright to add margins to the appropriate sides to allow breathing room around the image.

Testing Your HTML and CSS Positioning Abilities

HTML - CSS - BarelyFitz Designs - Learn CSS Positioning - DIV blocks representing Web Page Layout. So far we’ve played around a little with absolute and relative positioning and with floats to set the relative position. Let’s do a little more with absolute and relative positioning in our example.

Create a new test file. Go back to the first tutorial and copy the test file to a new file or clean up your current one to remove all the HTML and CSS and save it with a new name.
Replace the HTML with the copy below.
Go to “Learn CSS Positioning in Ten Steps” by BarelyFiltz Designs and go through each of the ten steps. Apply the lessons to the previous experiments we’ve done or create a new code block based upon the example on his site featured below.
After each modification to the styles in the head in the inline stylesheet, save the file and look at your test file in the browser so you may see the changes as they happen, one by one. Pay close attention to how each element positions itself on the page.

Here is the HTML:

<div id="example">

<div id="div-before">
<p>id = div-before</p>
</div><!-- closing div-before-->

<div id="div-1">
<div id="div-1-padding">

<p>id = div-1</p>

<div id="div-1a">
<p>id = div-1a</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</p>
</div><!-- closing div-1a -->

<div id="div-1b">
<p>id = div-1b</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem.</p>
</div><!-- closing div-1b -->

<div id="div-1c">
<p>id = div-1c</p>
</div><!-- closing div-1c -->

</div><!-- closing div-1 -->

<div id="div-after">
<p>id = div-after</p>
</div><!--  closing id-after -->

</div><!--  closing id=example -->

This is the CSS instructions to start with. Add the positioning elements as you move through the tutorial.

#example div {
}

#div-before, #div-after {
 background-color:#88d;
 color:#000;
}
#div-1 {
 width:400px;
 background-color:#000;
 color:#fff;
}
#div-1-padding {
 padding:10px;
}
#div-1a {
 background-color:#d33;
 color:#fff;
}
#div-1b {
 background-color:#3d3;
 color:#fff;
}
#div-1c {
 background-color:#33d;
 color:#fff;
}
#example div p {
 margin:0 .25em;
 padding:.25em 0;
}

Add each style in the example to your test, changing each one per the instructions, and see how your test file changes to accommodate the styles.

As you go through this tutorial, remember that you will be applying these techniques to a WordPress Child Theme in a future tutorial, so take it slowly, explore all the possibilities, take notes, and remember to make plenty of mistakes. The best way to learn HTML and CSS is to make mistakes. The more mistakes you make, the more you learn about how to fix them, and how HTML and CSS work.

In the next section, we will explore CSS classes and IDs, the CSS style identifiers you will use to customize a WordPress Theme with a Child Theme or to create your own custom WordPress Theme.

Resources on CSS Positioning

For more help on CSS positioning, see:

Join us in our discussions on this assignment in our WordPress School Google+ Community to talk about HTML and CSS positioning.

This is a tutorial from Lorelle’s WordPress School. For more information, and to join this free, year-long, online WordPress School, see:

One Comment

talesfromtheconspiratum

Posted May 20, 2015 at 4:25 pm | Permalink

I am not learning anything until WP fixes the Beep Beep Boop nonsense new platform that nobody likes or wants…