• Resolved stereozeitgeist

    (@stereozeitgeist)


    I’m working on breaking my posts into two columns – I’ve searched for about an hour, but I mostly get results about putting full posts into columns. I know it should be very difficult, but I’m having trouble understanding where I put the new div tags in The Loop to break the post up.

    I made a mockup of what I’m going for in photoshop so it’d be easier for the nice people here.

    https://d.imagehost.org/0168/howdoiloopthis.jpg

    Please let me know if you have any questions and help me help you… um, help me. :3

    PS – I’m not asking for help with any sort of images or anything, that’s just for mockup purposes, I’m just trying to get the structure down.

Viewing 2 replies - 1 through 2 (of 2 total)
  • Michael

    (@alchymyth)

    actually quite straight forward:
    the very basic structure:

    <div class="post">
    
     <div class="post_title">
     title, date, etc.
     </div>
    
     <div class="post_image">
     img
     </div>
    
     <div class="post_meta">
     tags, author, meta.
     </div>
    
     <div class="post_content">
     content
     </div>
    
    </div> <!-- end .post -->

    rough css basics:

    .post {width:100%; float:left; margin;padding;... }
    .post_title {width: 30%; float:left; ... }
    .post_image {width: 60%; float:right; ... }
    .post_meta {width: 30%; float:left; ... }
    .post_content {width: 30%; float:right; ... }

    (what you were referring to,

    I know it should be very difficult

    is a kind of newspaper layout where the content flows into two columns – quite difficult, and debatable useful on the web.)

    ps: just imagine you would try to explain to someone with word and a scetchbook, how this post shold be displayed:

    you would intuitively draw boxes atound these different areas and say something like: ‘this area should be on the left, and the image on the right; and below, there is this other block on the left for the meta data, and then on the right in a box there is the content, which could stretch all the way down.
    – html divs are boxes, and you can have a box in a box with other boxes, and more boxes some of these boxes … ‘russian doll principle’.

    if you are planning to do more web/wordpress stuff – get youself the firefox add-on ‘web developer’ – a great tool that gives you an extra toolbar for the firefox browser, where you can make a lot of these html structures visible for any webpage that you view.

    Thread Starter stereozeitgeist

    (@stereozeitgeist)

    Hey, thanks alchymyth. I’ll effort it and let you know what results I get. ??

    Edit: I’ve got some formatting to do, but that IS the structure I need. I was originally thinking of some really complicated coding, so thanks a lot for pointing out a simpler way to do it!

    Edit Two: I’ve got web developer AND firebug! I usually use Chrome though, and the thought of getting in firefox didn’t occur to me. Brain damage. I’ll keep working on it though.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘splitting single post loop into two columns (ex. included)’ is closed to new replies.