CODEWITHSUNDEEP
csshtmlmargin
Hugo
Hugo

Reputation: 170

Put a space between floated divs and bottom div

I'm trying to create a div on the bottom of two floated divs, but with a margin between the bottom div and the others.

Here's the Fiddle

html:

<html><head></head>
<body>
    <div class="left">Hello</div>
    <div class="right">Hello</div>
    <div class="bottom">Hello</div>

</body>
</html>

CSS:

.left {
    width: 150px;
    height: 100px;
    float: left;
    border: 1px solid #000;
}

.right {
    width: 150px;
    height: 100px;
    float: left;
    border: 1px solid #000;
}

.bottom {
    clear: both;
    margin-top: 20px;
}

Upvotes: 1

Views: 1545

Answers (2)

Max Truxa
Max Truxa

Reputation: 3478

Using a clear class it works for me (Fiddle):

<html><head></head>
<body>
    <div class="left">Hello</div>
    <div class="right">Hello</div>
    <div class="clear"></div>
    <div class="bottom">Hello</div>
</body>
</html>​

.left {
    width: 150px;
    height: 100px;
    float: left;
    border: 1px solid #000;
}

.right {
    width: 150px;
    height: 100px;
    float: left;
    border: 1px solid #000;
}

.bottom {
    margin-top: 20px;
}

.clear {
    clear: both;
}

​

Upvotes: 1

Nikos Tsirakis
Nikos Tsirakis

Reputation: 739

Even though you are clearing those floats (with clear: both), the margin of the final div doesn't position it away from them. In fact, that margin is effectively hidden behind the floats.

It's tempting to get around this by introducing an extra element — either an empty clearing element just after the floats, or a wrapper around them.

However, in the interests of keeping markup as clean as possible, it's often appropriate to just add bottom margin to the floats.

So you must define this margin to the first div. So it will work like this:

CSS:

.left {
    width: 150px;
    height: 100px;
    float: left;
    border: 1px solid #000;
    margin-bottom: 20px;
}

.right {
    width: 150px;
    height: 100px;
    float: left;
    border: 1px solid #000;
}

.bottom {
    clear: both;
}

Upvotes: 0

Related Questions