Solved

Floats not working the way I wanted

Posted on 2015-01-21
2
70 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 83

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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…

710 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