Columns With Relative Width

Problem:

Suppose we need to display a datalist in two columns, each column fills one half of the width, with a fixed pixels of margin between the two columns though.

Because it is a datalist, we would not choose table to display them.

Solution:

1. We display the datalist with two columns.

        .container dl {
            float: left;
            width: 50%;
        }

 2. Because we use float, we want the contaner to self clear.

         .self_clear:after {
            clear: both;
            content: ".";
            display: block;
            height: 0;
            visibility: hidden;
        }

 3. We set the margins between.

        .container dl.left dt {
            margin-right: 5px;
        }
        .container dl.left dd {
            margin-right: 5px;
        }
        
        .container dl.right dt {
            margin-left: 5px;
        }

        .container dl.right dd {
            margin-left: 5px;
        }

 We can not set margins directly on dl because otherwise its width will exceed 50%.

4. Then the dd is a container which you can use as blocked wrapper .

 

Try it with jsfiddle

 

Related Patterns

Blocked wrapper