Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New Coder
    Join Date
    Nov 2008
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts

    CSS 3 Column Layout Help

    Having a little trouble with a 3 column layout i'm trying to create. Can be seen live by clicking here.

    I have also attached a screenshot to show what I am trying to do. I can't think of a reason why the boxes aren't spanning over 3 columns or why there is a massive gap where the arrow is, that box should be pushing up as far as I can see.

    Any help appreciated...
    Attached Thumbnails Attached Thumbnails CSS 3 Column Layout Help-help.jpg  

  • #2
    Regular Coder
    Join Date
    Apr 2008
    Posts
    685
    Thanks
    15
    Thanked 105 Times in 104 Posts
    Firstly you have commented out float:left; from .contentBox but I guess you've just done this whilst debugging or something..

    Anyhow when this is not commented out there is no room for the third column because you have miscalculated your widths..

    Your #wrapper is set to 920px width
    Then each .contentBox is set to 290px width plus 40px left and right padding = 330px total width for each box..

    So 3 content boxes would equal 330px x 3 = 990px (too large for #wrapper)

    So you either need to reduce the total width of each content box or widen the wrapper!

  • #3
    New Coder
    Join Date
    Nov 2008
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Yeh I worked that out now. Thanks for the help though!

    My other problem still exists though, I don't want rows... I want the divs to push up where possible. Any ideas?

  • #4
    New Coder
    Join Date
    Nov 2008
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I want it to look more like the screenshot than what it does now, I just do not know how to accomplish this style.
    Attached Thumbnails Attached Thumbnails CSS 3 Column Layout Help-image17.jpg  

  • #5
    Regular Coder
    Join Date
    Apr 2008
    Posts
    685
    Thanks
    15
    Thanked 105 Times in 104 Posts
    Hmm trying to think of a way that may be possible because since things are going from left to right it will only push up on the rightmost box as you can see...

    There might be a technique going but I can't think of one maybe somebody else can! The only way I can think is to go in columns but it wouldn't really apply here..

  • #6
    New Coder
    Join Date
    Nov 2008
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts
    There is this: http://snippettheme.tumblr.com/

    Which does the same in a 2 column layout but I can't figure out how they are doing it...

  • #7
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Last edited by effpeetee; 06-10-2010 at 08:14 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #8
    Regular Coder
    Join Date
    Apr 2008
    Posts
    685
    Thanks
    15
    Thanked 105 Times in 104 Posts
    They are positoning each DIV individually, e.g:

    Code:
    div style="position: absolute; left: 375px; top: 858px;" class="story col2" id="post-589435391"
    I think they are getting the height of each DIV via some sort of JS and then using it as the top value..which is a bit scruffy!

  • Users who have thanked Scriptet for this post:

    AaronH (06-10-2010)

  • #9
    New Coder
    Join Date
    Nov 2008
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Any article in particular? I don't want to spend the rest of my evening reading!

    // Edit: Oops, sorry you edited. But that really isn't much use in this instance.

    I don't think what I want to do is going to be possible, which is a shame. Suppose I better find a work around.

  • #10
    Regular Coder
    Join Date
    Apr 2008
    Posts
    685
    Thanks
    15
    Thanked 105 Times in 104 Posts
    It might be possible as i'm not the total expert so there might be a little trick...

    The only way I can think atm is if you put them in columns...

    then if you want to keep the post-ordering left to right, if it's wordpress you could develop a special loop so it outputs the 1st post then the 4th post then the 7th post in the loop for the first column then the 2ndpost 5thpost and 8th post in the 2nd column etc...

    Or the 2nd alternative is knowing the height of the boxes which would require JS I guess.

  • #11
    New Coder
    Join Date
    Nov 2008
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Yeh I'm using Tumblr which is the problem as it's not open source so I have no access to files to perform those kind of tasks. All I can use is HTML and CSS with some JavaScript thrown in.

    I can limit posts per page, so for instance I can have 12 posts per page. But that doesn't really help me much. It's weird CSS behaviour tbh, I don't really know why it's acting like this anyway. There is no margin getting in the way so it should just slot into that gap (I designed this page this way because I thought this is how it would act!).

  • #12
    New Coder
    Join Date
    Nov 2008
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts
    The only thing I can think of is to make the content boxes all the same hight and set the overflow to hidden, then make them clickable somehow to take the user to the full content. Shame.


  •  

    Posting Permissions

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