SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Nov 2013
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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

    http://jsfiddle.net/vDUE7/2/

    Picture

    http://oi57.tinypic.com/3128hew.jpg

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,598
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    There is an error in your CSS.

    There must be a space between "header" and the hash mark to target your HTML.
    Code:
    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. #3
    SitePoint Member
    Join Date
    Nov 2013
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ronpat View Post
    There is an error in your CSS.

    There must be a space between "header" and the hash mark to target your HTML.
    Code:
    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.
    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. #4
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,598
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    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.
    Code:
    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.

    Code:
    <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:
    Code:
    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.
    Code:
    <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.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •