Resizable divs

HTML & CSS
1

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

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

Hi, Welcome to Sitepoint :slight_smile:

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


<!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 :slight_smile:

4

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

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).