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 8 of 8
  1. #1
    Senior Member
    Join Date
    Apr 2005
    Location
    Hatfield, England
    Posts
    855
    Member #
    9790
    I have 2 columns, a left and right. The right is floated along side the left. Is there a way i can make the right column float along side the left even if it is bigger than the left column. Currently the top of the right column is on the right, the bottom is under the left column.

    Apart from extending the padding of the left column is there another way to solve this problem?

  2.  

  3. #2
    Senior Member Karloff's Avatar
    Join Date
    Oct 2005
    Posts
    744
    Member #
    11702
    got a link for us to see?

  4. #3
    Senior Member
    Join Date
    Apr 2005
    Location
    Hatfield, England
    Posts
    855
    Member #
    9790
    Unfortunately not, i am at my gf's house and have it on my laptop.

    Basically the style goes something like this..

    leftcolumn {
    width:400px;
    float:left;
    padding:10px;
    }

    rightcolumn {
    width:300px;
    float:left;
    }

    leftcolumn is about 400px long
    rightcolumn is about 500px long and raps around the left column if i don't add 50 padding to the bottom of the left column.

    I'm just looking for a way to avoid use the padding-bottom on the left column.

  5. #4
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    Perad,

    This is really a problem with CSS (maybe they'll fix it in CSS2 or 3)?

    Don't everyone jump all over me on this, but do the simple thing ....
    use <tables>. If it's imperative that your page renders both columns
    the same without using faux columns, or padding, use tables. That will
    solve your problem and it will render the same in all browsers.

    It would help to see that page though. Sometimes faux columns
    (a fake backround with columns drawn-in) will work, but I still would rather
    use tables than faux columns.

    An alternative might be to have a PHP script that pre-defines your column
    heights. But if you pages are dynamic, or change frequently, that scripting
    would need to change too.


  6. #5
    Senior Member solidgold's Avatar
    Join Date
    Jun 2006
    Posts
    766
    Member #
    13373
    urrgh, tables *collapses into the fetal position*
    actually, i agree with you on this, sometimes tables are the best option

  7. #6
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Just make it so the box on the right has a [minicode]margin-right[/minicode] equivalent to the width of the box on the left. That'll keep it away.

    As for CSS3 -- CSS3 has a columns module (see the Mozilla Developer Center docs), which has already been partially implemented in Firefox 1.5+. SInce CSS3 is nowhere near final, however, this feature won't be coming anytime soon.

    As to tables being the simple solution -- as is often the case, tables are the quick-and-dirty solution now at the price of horrible maintainability and ghastly future problems. The reason we recommend CSS isn't necessarily because it's easier, but because it's better -- there is a great distinction. With CSS, a redesign doesn't require hacking tables out to organize the code differently, it requires changing your CSS file a little.

    Code modularity is one of those important design decisions that has been widely acknowledged as great in the programming industry for ages, but which is just now beginning to connect with web designers/developers. And it's about time. Ask anyone who has had to maintain someone else's table-based layout ;-)

  8. #7
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    "right has a margin-right equivalent to the width of the box on the left"

    I'm going to have to try that one .... could be an interesting trick.
    (this forum never ceases to amaze me).


  9. #8
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Wait... I meant so that the box on the right has an equivalent margin-*left* to the width of the box on the left. Sorry.


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 06:14 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com