dcsimg
www.webdeveloper.com
Results 1 to 5 of 5

Thread: Creating 2 blocks side by side

  1. #1
    Join Date
    Oct 2010
    Posts
    26

    Creating 2 blocks side by side

    I'm tryin gto go table-less on my next project and find myself wanting to use tables again (especially when it makes it so easy) when I know I shouldn't be!

    So I have a standard page and in the lower half, I'd like to have two columns, each starting with a graphic, followed by some text, like in a comparison. Anything I tried didn't work.

    I guess what I need would be something like a class that puts the container on the right half of the screen.

    Thanks for any help,
    stefangs

  2. #2
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,143
    Here's a basic example:
    http://jsfiddle.net/7VgXZ/

  3. #3
    Join Date
    Aug 2013
    Posts
    1

    The CSS way to table obsolence

    Quote Originally Posted by stefangs View Post
    I'm tryin gto go table-less on my next project and find myself wanting to use tables again (especially when it makes it so easy) when I know I shouldn't be!

    So I have a standard page and in the lower half, I'd like to have two columns, each starting with a graphic, followed by some text, like in a comparison. Anything I tried didn't work.

    I guess what I need would be something like a class that puts the container on the right half of the screen.

    Thanks for any help,
    stefangs
    Hi, Stefangs.

    I take it you're seeking to use CSS for the layout, replacing tables. So I assume you know at least the basics of how CSS works (if not, please let me know).

    The CSS (tableless) way to achieve what you want is as follows. Create a div with "overflow: hidden" and "height: 100%" as CSS parameters. This one will replace the <tr> field, AKA, it'll "contain" the two columns. Inside it, create two similar divs, one with "float: left" and the other with "float: right" as CSS parameters. These will act as <td>s, AKA, they will be the columns. It would end up something like this.

    <style type="text/css">
    .lower-section{
    overflow: hidden;
    height: 100%;
    width: 800px;
    }
    .lower-section .left{
    width: 400px;
    float: left;
    }
    .lower-section .right{
    width: 400px;
    float: right;
    }
    </style>

    <div class="lower-section">
    <div class="left">
    This text will go to the left.
    </div>
    <div class="right">
    This text will go to the right.
    </div>
    </div>

    Feel free to test the code I sent you, and work from there, as its presentation can be easily modified (the magic of CSS).

    Please let me know if it was useful, and whether you need further help.

    Regards

    Ken

  4. #4
    Join Date
    Oct 2010
    Posts
    26
    Quote Originally Posted by cbVision View Post
    Here's a basic example:
    http://jsfiddle.net/7VgXZ/
    That's great, thanks! I'll be sure to keep the background color in the 'cells' the same as the body, so I can save the famous CSS uniform column length problem for another time :-)

    stefangs

  5. #5
    Join Date
    Oct 2010
    Posts
    26
    Thanks Ken for the detailed explanation - very useful indeed. I'm still new to this type of advanced CSS (for me anyway), so examples like this are really helping me out!

    stefangs

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles