SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2003
    Location
    greenwood
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS-P side-by-side 50% boxes

    I'm wanting to achieve side-by side boxes. They should both be approximately 50% of the viewable area, and have a space of .5em between them. Is this possible?

    I've tried several methods like floating one box right and making its margin-left 50% and so forth, but nothing I try seems to work. I would appreciate it if someone would explain how to think about this.

  2. #2
    Rabble Rouser bronze trophy
    Join Date
    Jan 2003
    Location
    Mountain View, CA
    Posts
    427
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Float one element to the side you want and give the other element the margin-blah.

    Edit:


    Also helpful would be do set a width on the floating element.

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2003
    Location
    greenwood
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the quick reply. But when I try stuff like

    <div style="float:right; width:50%; padding:1em; border:1px solid black">
    blah blah blah
    </div>

    <div style="margin-right:.5em; padding:1em; border:1px solid black">
    blah blah blah
    </div>

    it can be seen that the left box extends all the way across the viewable area, sort of behind the right box, and has a .5em margin from the right side of the viewable area, not from the left side of the righthand box. Pretty frustrating. Thanks though.

  4. #4
    ********* Wizard silver trophy Cam's Avatar
    Join Date
    Aug 2002
    Location
    Burpengary, Australia
    Posts
    4,495
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    What about
    HTML Code:
    <div style="width: 50%; float: left; margin-right: .25em;">
        Blah
    </div>
    <div style="width: 50%; float: right; margin-left: .25em;">
        Blah blah
    </div>
    Would that work? I'm not real great with CSS but it's worth a shot

  5. #5
    SitePoint Addict
    Join Date
    Sep 2003
    Location
    Europe
    Posts
    222
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No that wouldn't work, because you add a margin to the 50% width, so the second float doesn't have enough space for its own 50%+margin and will be pushed down beneath the first float.
    You could do something like:
    Code:
    <div style="float:left; width:50%;">
       <div style="margin:.25em; padding:1em; border:1px solid #000;">
          blah blah blah
       </div>
    </div>
    <div style="float:right; width:50%;">
       <div style="margin:.25em; padding:1em; border:1px solid #000;">
          blah blah blah
       </div>
    </div>

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,347
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,
    Would that work? I'm not real great with CSS but it's worth a shot
    The problem with that example is that the page will be 100% wide +.50em + existing page margins. This will make the page larger than 100% and produce a horizontal scrollbar.

    If you float one left and then right at 49% width this will leave you a 2% margin in the middle automatically. You will of course have to get rid of the page margins first.

    e.g.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style>
    body {margin:0px;padding:0px;}
    .right {
    float:right;
    width:49%;
    height: 100px;
    background-color: #FFFFCC;
    }
    .left {
    float:left;
    width:49%;
    height: 100px;
    background-color: #CCCCCC;
    }
    </style>
    </head>
    <body>
    <div class="right"> 
    text text Text Text Text Text Text Text Text Text Text Text 
    </div>
    <div class="left"> 
    Text Text Text Text Text Text Text Text Text Text Text Text 
    </div>
    </body>
    </html>
    Obviously the method used depends on the situation and this method may not always be suitable. With CSS there are many other ways to achieve similar effects. (You could place one column absolutely to the left and then set a 50% margin on the next element to clear (similar as recommended by Paul_c above).

    Paul


Bookmarks

Posting Permissions

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