Question

On my site, near the bottom there is a “FREE ACCESS” section. Ideally, I’d like to have the freedom image on the left, the signup form in the middle, and the success image on the right. The width of the 3 elements is right at 840px total in a 960px container, so I don’t think that’s an issue. For this, I’m using:

        .signup {
    border-top: 1px solid #333333;
    float:left;
    padding-bottom: 40px;
    padding-top: 40px;
    overflow: auto;
    width: 280px;
}

.signup p {
    padding-bottom: 20px;
}

.signup p span {
    font-family: nevis-webfont;
    font-size: 112.5%;
    font-weight: normal;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.signup #mc-embedded-subscribe {
    background: #0fddaf;
}

.signup .freedom {
    float: left;
    width: 280px;
}

.signup .success {
    float: right;
    width: 280px;
}

.clear {
    clear:both;
}

And the HTML.

As you can see, something isn’t working quite right and I’ve been looking at this for so long I’m afraid I’m missing something simple. Any ideas on what the issue might be?

Answer 1

Quick and dirty:

Take the width from .signup, float .form left, and give it 280px width;
or take the width from .signup, and give .form an extra class .freedom. (<div class=' freedom form'> – quite rebellious, eh?)

Ta-da!!

Advice

1. Learn CSS before you work with it, it will save you time and headaches in the future;
2. ???
3. Profit.