Floats not working the way I wanted

Im trying to get my CSS to float correctly. What Im trying to do is float my spacers to the remaining space after the label and textbox so I can add in error and warnings if required by jQuery later.

CSS:
#divBody {
    width:80%;
}
#divLeft, #divRight {
    float:left;
    width:45%;
    border:solid black 1px;
}
.spacer {
    float:left;
    background-color:red;
    width:100%;
}
input {
    width:50px;
}

Open in new window

HTML:
<div id="divBody">
    <div id="divLeft">
        <label>Field 1:</label>
        <input type="text"></input>
        <div class="spacer">Poss</div>
        
        <label>Field 2:</label>
        <input type="text"></input>
        <div class="spacer">Invalid</div>
    </div>
    <div id="divRight">
        <label>Field 1:</label>
        <input type="text"></input>
        <div class="spacer"></div>
        
        <label>Field 2:</label>
        <input type="text"></input>
        <div class="spacer"></div>
    </div>
</div>

Open in new window

Result:

Open in new window


What Im getting is:-
Current Result
What it should be is like:-
Should be
Ive stuck it on jsfiddle at http://jsfiddle.net/vnb06zou/1/ in the hope someone can help me :-S

What I dont understand is why the div is floating at the bottom of the area and not next to the text boxes as needed.
tonelm54Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

 
Dave BaldwinFixer of ProblemsCommented:
'floats' need to have a specified width and that width must be less than or equal to the element that contains them.  This basically works, you can finish the details.  Note the inline 'style' and the <br clear="all"> to return to the left.
<div id="divBody">
    <div id="divLeft">
        <div style="float:left;"><label>Field 1:</label>
        <input type="text"></input>&nbsp;</div>
        <div class="spacer">Poss</div><br clear="all">
        
        <div style="float:left;"><label>Field 2:</label>
        <input type="text"></input>&nbsp;</div>
        <div class="spacer">Invalid</div>
    </div>
    <div id="divRight">
        <div style="float:left;"><label>Field 1:</label>
        <input type="text"></input>&nbsp;</div>
        <div class="spacer"></div><br clear="all">
        
        <div style="float:left;"><label>Field 2:</label>
        <input type="text"></input>&nbsp;</div>
        <div class="spacer"></div>
    </div>
</div>

Open in new window

0

Experts Exchange Solution brought to you by ConnectWise

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
 
Tony O'ByrneSenior Web DeveloperCommented:
First thing worth noting is that floats are difficult to work with - even when I've been doing this professionally for 5 years.

Where possible, I prefer to not use floats.

I started from scratch and used your image as a prototype to match.  Though I didn't worry about getting it "pixel-perfect", it gets pretty darn close:
http://jsfiddle.net/vnb06zou/4/
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.