Can't get div to flush at the top of the page

HTML & CSS
1

I can’t seem to get the right side/column of the page to flush at the top. I’ve included a picture to show you guys what I mean.

JSFiddle

Picture

2

There is an error in your CSS.

There must be a space between “header” and the hash mark to target your HTML.


header #head {

The HTML is not exactly logical, though. The class/id names seem to indicate that you cannot differentiate between columns and rows. Kinda hard to follow how you want the layout to look.

3

Thanks for the error. I have included a picture to show you how I want the right column to look. It just needs to be flushed to the top.

4

Yes, I saw the image.

There is another error similar to the first in your CSS.

There must be a space between the tag “article” and the class symbol, dot, to target your HTML.


article .in-column {

Your HTML is still not logical. Columns and Rows are not clear. If you will do some work on the HTML, I’ll be glad to help you understand how HTML code is arranged. I’ll be around for about 9 more hours.

Think of every tag as a box. Inner tags are boxes within their parent box. The HTML needs to reflect such an order.

These are make-believe tags. Their purpose is to simulate a logical order. Give your code some more thought. Rewrite your fiddle to show the changes.


<header></header>
<div class="column-left">
    <div class="row"></div>
    <div class="row"></div>
    <div class="row"></div>
</column>
<div class="column-right">
    <div class="row"></div>
    etc.
</column>
<div class="content">
    <div class="column-left">
        <div class="row"></div>
        <div class="row"></div>
    </div>
    <div class="column-right">
        <div class="row"></div>
        <div class="row"></div>
    </div>
</div>
<footer></footer>

I suggest assigning outlines to all boxes to start with so you can see how they fit on the page. Such as:


header {outline:1px solid red;}
.column-left {outline:1px solid magenta;}
.column-right {outline:1px solid blue;}
.row {outline:1px solid lime;}
footer {outline:1px solid red;}

So far, I see no reason why some objects have been assigned {position:relative;}.

img tags should contain an “alt” attribute.


<img src="whatever" alt="description" width="120" height="79">

Unless you are using XHTML, img tags (empty tags) do not need the slash before the closing sign as shown in the example.

{height:100%} should be unnecessary. It will not work with the code on your page, anyway.

EDIT: almost forgot. List items need to be inside a <ul> or <ol> tag. They are “list” items, after all.