SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Thread: Resizable divs

  1. #1
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Resizable divs

    How do I put two divs side by side and make them both resize together. I want the effect of a movable divider between two divs.

  2. #2
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Wrap both in a div with width 100% and overflow hidden. Float the 2 inner divs left, give them width 50%, and the first one border right 1px and margin left -1px.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi, Welcome to Sitepoint

    If you are just looking for an equalising divider you can do something like this:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    p {
        margin:0;
        padding:0;
    }
    .wrap {
        width:602px;
        border:1px solid #000;
        overflow:hidden;
        background:#fcf;
        margin:25px auto;
    }
    .col1, .col2 {
        float:left;
        width:280px;
        border-right:1px solid #000;
        padding:1px 10px;
    }
    .col2 {
        border:none;
        border-left:1px solid #000;
        margin-left:-1px;
    }
    </style>
    </head>
    <body>
    <div class="wrap">
        <div class="col1">
            <p>Col1 content </p>
            <p>Col1 content </p>
            <p>Col1 content </p>
            <p>Col1 content </p>
            <p>Col1 content </p>
            <p>Col1 content </p>
            <p>Col1 content </p>
            <p>Col1 content </p>
            <p>Col1 content </p>
        </div>
        <div class="col2">
            <p>Col2 content</p>
            <p>Col2 content</p>
            <p>Col2 content</p>
            <p>Col2 content</p>
            <p>Col2 content</p>
        </div>
    </div>
    <div class="wrap">
        <div class="col1">
            <p>Col1 content </p>
            <p>Col1 content </p>
        </div>
        <div class="col2">
            <p>Col2 content</p>
            <p>Col2 content</p>
            <p>Col2 content</p>
            <p>Col2 content</p>
            <p>Col2 content</p>
        </div>
    </div>
    </body>
    </html>
    If you are looking for equal column coilours as well then that's a little more complicated unless you want to use a faux column effect.

    Edit:


    The example code I posted is the same method that Eric mentioned above

  4. #4
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the info. What I didn't mention is that I want the divider to be movable by hand, not automatically resized with content. I don't want the two sides to be the same width.

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,096
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    What do you mean by "movable by hand"? Do you mean you (as the web designer) can modify the code, or do you want the users to be able to move the divider around through their browsers? If the latter, you'll need some scripting (such as JavaScript).
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."


Tags for this Thread

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
  •