Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 6 of 6
  1. #1
    Junior Member
    Join Date
    May 2007
    Posts
    5
    Member #
    15273
    Greetings web geniuses! I am here to beg some help for what I'm guessing is a hopeless endeavor. This is my first post - I have created this account specifically to ask this question.

    The question is: is it possible to create a xhtml+css layout, without using tables, that provides two fluid, scaling two-column content areas while maintaining fixed spacing between the columns, and between the sections within the columns?

    Also, let me mention that by two-column layout I do not mean "content and sidebar" - I mean "content and content." I'd like the two areas to be equal regardless of the size of the window. To further clarify what I'm looking for, I've attached an image that shows the layout I'm going for.

    I'll be the first to admit that I'm fairly inadept at CSS manipulation, but the initial impression I've gotten has been that this is just not possible. I would love to be proven wrong, though, so if you know of a way (or even a place to start), I offer my profound thanks in advance.
    Attached Images Attached Images

  2.  

  3. #2
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    How are you going to indicate the columns? Will there be a different background color behind each of the full columns, or just in the content boxes?

  4. #3
    Junior Member
    Join Date
    May 2007
    Posts
    5
    Member #
    15273
    Shadowfiend ~
    The columns themselves won't have a unique background, only the content boxes. If you're getting at what I think you're getting at - no, I don't even really need a <div> for each column at all, if there is a way to constrain just the content boxes as I'd like. My guess is, if there's a way to do that, it's probably a lot more efficient than the process I've been grinding on.

    I should also mention that I made a small breakthrough last night when I remembered width:auto. I was able to get the column spacing right, but I used a ridiculous number of divs doing so. Basically my setup was:
    - pair of divs at 50% each with floats to split the page in half
    - a div in each with the margins I want (14px outer, 20px inner) and width:auto.
    - sequential divs within these for my content boxes - no side margins, only top & bottom.

    I'll post my code once I've got it cleaned up, if I don't find some new huge problem with it. It's far from elegant,though, and there's no way it's truly semantic.

    - Doskei

  5. #4
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    That sounds about right in terms of what I was thinking of. If you don't need a solid background on each column, then all the problems with multicolumn layouts basically go away, because there is no problem of `equalizing heights', since there are no heights to equalize (i.e., no backgrounds delimit the columns).

    What I had in mind would rely on the inline-block display property, property which Gecko unfortunately does not support. Chalk another one up for Presto and KHTML... This is like the third time in a week that the lack of support for inline-block has bitten me :-P

  6. #5
    Junior Member
    Join Date
    May 2007
    Posts
    5
    Member #
    15273
    So, here's the code that does what I was trying to do. It might as well be called a hack - as I mentioned, it's pretty bulky for what it does and is far from semantic (there are div layers whose only purpose is to contain another div). Still though, there are cases where layout IS content, and until W3 provides a better way to meet both ideals (the W3 draft box-sizing model comes to mind), I have a feeling I'll be using a lot of hacks like this.

    Anyway, this is probably pretty simple code relative to most of the rest of this site. Still, in case anyone who's wrestling with the same issue I was runs across the site, here it is:

    CSS

    Code:
    div.half_left
        {
        width:50%;
        float:left;
        }
    
    
    div.half_right
        {
        width:50%;
        float:right;
        }
    
    
    div. left_column
        {
        width:auto;
        margin:0px 20px 0px 14px;
        }
    
    
    div.right_column
        {
        width:auto;
        margin:0px 14px 0px 20px;
        position:relative;
        left:2px;
        }
    
    
    div.content_box
        {
        width:100%;
        margin-top:8px;
        border:1px solid #606060;
        background:#E8E8E8;
        }
    HTML
    HTML Code:
    <div class="half_left">
        <div class="left_column">
            <div class="content_box">
                ContentA-1
            </div>
            <div class="content_box">
                ContentA-2
            </div>
        </div>
    </div>
    <div class="half_right">
        <div class="right_column">
            <div class="content_box">
                ContentB-1
            </div>
            <div class="content_box">
                ContentB-2
            </div>
        </div>
    </div>
    --Note-- the position:relative; and left:2px; attributes that are applied to the right_column style are required by the 1-pixel border. These borders will push your right column further to the right, by 2 times whatever the border width is on your content boxes. If you're using 3-pixel borders, then use left:6px;.

    Over the course of fixing this problem, I have (of course) run into another. It's totally unrelated, though, so I'll post it as a new topic if I can't figure it out on my own.

    Thanks for your help Shadowfiend!

    - Doskei

  7. #6
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Well, again, this is practically a textbook example of where display: inline-block would have been golden (just display: inline-block the two elements and set some margins on them, and they should probably have behaved just about the perfect way). But yeah, sometimes, you just have no choice. I'm about to make a JS tabpane widget generate a bunch of extraneous divs for purposes of rounded corners :-(


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 02:59 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com