Solved

Floats not working the way I wanted

Posted on 2015-01-21
2
65 Views
Last Modified: 2015-02-06
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.
0
Comment
Question by:tonelm54
2 Comments
 
LVL 82

Accepted Solution

by:
Dave Baldwin earned 500 total points
ID: 40563144
'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
 
LVL 6

Expert Comment

by:Tony O'Byrne
ID: 40566728
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

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

758 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now