WordPress.org

Ready to get started?Download WordPress

Forums

Adding an extra column for posts? (5 posts)

  1. annajane89
    Member
    Posted 4 years ago #

    Hello,

    Firstly, I'm blonde and fairly new to CSS so forgive me for my ignorance!

    Basically, I want my layout to feature two columns for every post - with the left column featuring the date, author image and category, and the right featuring the actual post itself.

    Now, how would I go about doing this using div elements? I know how to do this using tables, but I would prefer to use solely div elements if that's possible...? Also, using divs, how would the left column stay aligned with the right for every post?

    I hope that makes sense, and I'm hoping someone will be kind enough to show me how to do this!

    Thank youuuuuuuuu, Anna xxx

  2. equaldesign
    Member
    Posted 4 years ago #

    Something like this for your coding your php file:

    <div id="post-info">
      Date, Authour image etc goes in here
    </div>
    <div id="post-content">
      Put your post content here
    </div>
    <div style="clear: both;"></div>

    and the CSS for this would be (assuming your page is 800px wide):

    #post-info {
      width: 280px;
      float: left;
      margin-right: 20px;
    }
    #post-content {
      width: 500px;
      float: left;
    }
  3. annajane89
    Member
    Posted 4 years ago #

    thank you, equaldesign :) xxx

  4. Sheryl
    Member
    Posted 4 years ago #

    How do you go about taking a single page and making it a 2 column page......

    http://fashiondevelopmentgroup.com

    I would like to make the page called SERVICES into 2 columns--- HELP!

    Thanks

    Sheryl

  5. fkaf
    Member
    Posted 4 years ago #

    This is the closest to a decent result i can get.
    I wanted to have 2 column in a pageofpost template but it was impossible.

    Then I tried the index

    Can I add img max witdt inside this

    #post-info {
      width: 300px;
      float: left;
    
    }
    #post-content {
      width: 300px;
    
      float: left;
    
    }

    and how can I make space between the columns?

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags