Two columns inside container

Question

What I want to do is have a <div> with a container class and a fixed width, holding a <div> with the block class to prevent other content encroaching on any uneven blank space, then two columns (<div>'s) side-by-side inside the block, and to be 50% of the width of the block.

When I create this, I get what appears to be a margin after the first block, which I do not want. I want the block to pack up tight, no margins.

I have an example here of what I have so far, and here if the code:

<html>
<head>
<title>Columns</title>
<style>
    div {
        margin: 0;
        padding: 0;
}
    .container {
        background: #DDD;
        width: 1200px;
        margin: 0 auto;
        padding: 2% 0;
}
    .block {
        background: #555;
        width: 100%;
        display: block;
}
    .col {
        width: 49%;
        display: inline-block;
        background: #333;
}
</style>
</head>
<body>
<div class="container">
<div class="block">

    <div class="col left">
        <h1>Left</h1>
    </div>

    <div class="col right">
        <h1>Right</h1>
    </div>

</div>
</div>
</body>
</html>

Daniel Imms · Answer 1 · 2013-03-07T00:01:44.267

5

Your problem is being causes by inline-block, using this makes a space appear inbetween.

Try using float:left to get around this:

See on jsFiddle

.col {
    width: 50%;
    float: left;
    box-sizing: border-box;
    background: #333;
}

Note that I added, box-sizing:border-box; this means when you use padding it will be included in the width, not on top of it. Effectively enabling the use of it without an extra inner div.

Remember to include a clear fix afterwards also to "clear" the floats.

CSS

.clear {
    clear:both;
}

HTML

<div class="block">
    <div class="col left">
         <h1>Left</h1>

    </div>
    <div class="col right">
         <h1>Right</h1>

    </div>
    <div class="clear"></div>
</div>

edited Mar 07 '13 at 00:01

answered Mar 06 '13 at 23:38

Daniel Imms

47,944
19
150
166

That eliminates the gap between them, but I forgot to mention that I need the `block` to stretch in height along with the columns. When I try floating them, the `block` shrinks :( – Fifer Sheep Mar 06 '13 at 23:42
1

you need to clear the float. The simple solution is to add `
` after your `.col` divs. See http://stackoverflow.com/questions/8554043/what-is-clearfix for a better solution – JoeyP Mar 06 '13 at 23:46
`box-sizing: border-box` is a useful tip, thanks! Should save me a lot of maths ^_^ – Fifer Sheep Mar 06 '13 at 23:58
`clearfix` solves the height problem here, thank you JoeyP :) – Fifer Sheep Mar 07 '13 at 00:00

score 2 · Accepted Answer · answered Mar 06 '13 at 23:42

2

Try replacing these classes:

.block {
    background: none repeat scroll 0 0 #555555;
    display: block;
    overflow: auto;
    width: 100%;
}

.col {
    width: 49%;
    float: left;
    background: #333;
}

answered Mar 06 '13 at 23:42

Jack Pettinger

2,715
1
23
37

Beautiful! Works like a charm :D – Fifer Sheep Mar 06 '13 at 23:44

score 0 · Answer 3 · answered Nov 03 '22 at 20:34

0

.container {
    background: #DDD;
    width: 900px;
    margin: 0 auto;
    padding: 30px 30px 30px 30px;
}
.block {
    background: #555;
    width: 100%;
    display: block;
}

.block:after {
    content: "";
    display: table;
    clear: both;
  }
  
.col {
    width: 50%;
    float: left;
    background: #333;

}

answered Nov 03 '22 at 20:34

Michael Mor

1

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Nov 07 '22 at 05:51

Two columns inside container

3 Answers3