HTML5/CSS3 Layout Wrap Problem

tel2
tel2 used Ask the Experts™
on
Hi Web Design Experts,

Please have a look at this webpage I’ve been cutting down (simplfying) to demonstrate my problem:
    http://experts-exchange.co.nf/field_wrap_problem1.htm
Try zooming in and out, especially in Chrome.

In Chrome, with most zoom levels the fields start wrapping messily when we get to the dropdown fields (see attachment).
In Chrome with a few zoom levels, and in Firefox & IE with most zoom levels, the fields look tidy (see attached).

Any ideas what the cause of the wrapping problem is and how to fix it, please?

Note: The CSS I’ve included in the <head> is a cut down version of a 3 column responsive layout (3 fields (the label, input box & checkbox, per column)).

Here's the code if you prefer this to viewing the source at the above link:
<!DOCTYPE html>
<html lang=en-NZ>
<head>
        <style>
                body, textarea, select, input
                {
                        font-family: Helvetica, sans-serif, Arial, Tahoma;
                        font-size: small;
                        background: #EEE;
                }

                * { box-sizing: border-box }

                /* Create 3 equal columns that floats next to each other */
                .column {
                        float: left;
                        width: 33%;
                        padding: 0;
                }

                .label {
                        float: left;
                        text-align: right;
                        font-weight: bold;
                        width: 35%;
                        padding-right: .3em;
                        margin: 4px 0;
                }

                .field {
                        float: left;
                        width: 56%;
                        margin: 2px 0;
                }

                .box {
                        float: left;
                        width: 5%;
                }
        </style>
</head>

<body>

<div class=row>
        <div class=column>
                <span class=label>Field 1:</span>
                <input type=text class=field>
                <input type=checkbox class=box>

                <span class=label>Field 2:</span>
                <input type=text class=field>
                <input type=checkbox class=box>

                <span class=label>Field 3:</span>
                <input type=text class=field>
                <input type=checkbox class=box>

                <span class=label>Field 4:</span>
                <select class=field><option>Option 4.1</option></select>
                <input type=checkbox class=box>

                <span class=label>Field 5:</span>
                <select class=field><option>Option 5.1</option></select>
                <input type=checkbox class=box>

                <span class=label>Field 6:</span>
                <select class=field><option>Option 6.1</option></select>
                <input type=checkbox class=box>

        </div>
</div>

</body>
</html>

Open in new window


Thanks.
tel2
Chrome-wrap1.gif
Chrome-good1.gif
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Rikin ShahMicrosoft Dynamics CRM Consultant
Commented:
Hi,

label - margin: 4px is the culprit. Think of other CSS property to align labels. Also, try putting all elements within a container element like div and change your CSS accordingly.
Most Valuable Expert 2018
Distinguished Expert 2018
Commented:
Hi tel2,

You need to clear the floats for your labels. As you have it, you're floating everything left which is trying to put everything on one line. The column width is the only thing that's forcing each block onto a new line (wrapping it). By clearing the floats on the labels, this will push the label onto the next row without relying on the column width (effectively starting a new row for the label):

.label {
    ....
    clear:both;
}

Open in new window

Hi,

I would use Bootstrap (responsive) for this
https://getbootstrap.com/docs/4.3/components/forms/
Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

David S.Consultant & Challenge Subduer
Top Expert 2009
Commented:
This is easier when the appropriate markup is used. Using <label> elements is important for accessibility and usability.  (The checkboxes should have their own <label>s too, but I don't know what they're intended for, so didn't add them.)

<!DOCTYPE html>
<html lang="en-NZ">
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
        body, textarea, select, input
        {
                font-family: Helvetica, sans-serif, Arial, Tahoma;
                font-size: small;
                background: #EEE;
        }

        * { box-sizing: border-box }

        /* Create 3 equal columns that floats next to each other */
        .column {
                float: left;
                width: 33%;
                padding: 0;
        }

        .label {
                float: left;
                text-align: right;
                font-weight: bold;
                width: 35%;
                padding-right: .3em;
                margin: 4px 0;
        }

        .field {
                float: left;
                width: 56%;
                margin: 2px 0;
        }

        .box {
                float: left;
                width: 5%;
        }
        
        .fieldWrap {
                clear: left;
        }
</style>
</head>
<body>

<div class=row>
        <div class=column>
                <div class="fieldWrap">
                        <label class=label for="field1">Field 1:</label>
                        <input type=text class=field id="field1">
                        <input type=checkbox class=box>
                </div>

                <div class="fieldWrap">
                        <label class=label for="field2">Field 2:</label>
                        <input type=text class=field id="field2">
                        <input type=checkbox class=box>
                </div>

                <div class="fieldWrap">
                        <label class=label for="field3">Field 3:</label>
                        <input type=text class=field id="field3">
                        <input type=checkbox class=box>
                </div>

                <div class="fieldWrap">
                        <label class=label for="field4">Field 4:</label>
                        <select class=field id="field4"><option>Option 4.1</option></select>
                        <input type=checkbox class=box>
                </div>

                <div class="fieldWrap">
                        <label class=label for="field5">Field 5:</label>
                        <select class=field id="field5"><option>Option 5.1</option></select>
                        <input type=checkbox class=box>
                </div>

                <div class="fieldWrap">
                        <label class=label for="field6">Field 6:</label>
                        <select class=field id="field6"><option>Option 6.1</option></select>
                        <input type=checkbox class=box>
                </div>

        </div>
</div>

</body>
</html>

Open in new window

Author

Commented:
Thank you very much for all your answers!  I have some follow-up questions about them.

Hi Rikin,
> "label - margin: 4px is the culprit."
Well spotted!  I tried putting "4px 0" on the .field and .box aswell and that help to solve the problem.
But why does that cause the problem?
> "Think of other CSS property to align labels."
Do you mean border/padding?
 Code please?
> "Also, try putting all elements within a container element like div and change your CSS accordingly."
Could you please give me a few lines of code to demonstrate that also?

Hi Chris,
Good answer!  I see your point.
Your correction seems to work.

Hi lenamtl,
Thanks, I might try bootstrap someday, but I'm not ready for that at this stage.

Hi David,
Thanks for going beyond requirements with that <label> suggestion.  I have used <label> once before, but didn't see the point in this case, but having read up on it, it looks as if it could be beneficial, even when the associated control isn't a checkbox or radio box which would get selected when the label is tapped/clicked.  It seems the field could come into focus if the label itself is tapped/clicked.  Any other advantages?
And I see the <label> syntax can usually be simplified to:
<label>Field 1:
  <input type=text class=field>
</label>
Which doesn't require the "id=..." or the "for=...", so I'd probably do that.
Regarding your use of the the fieldWrap class, like this:
        .fieldWrap {
                clear: left;
        }
...etc...
        <div class="fieldWrap">
                <label class=label for="field1">Field 1:</label>
                <input type=text class=field id="field1">
                <input type=checkbox class=box>
        </div>
Is there any advantage of the above over using your <label> tags with Chris's style of CSS change, which doesn't require the extra <div>s, i.e.:
    .label {
      clear: both;   /* or just: clear: left; as you used for .fieldWrap in your code */
...etc...
        <label class=label for="field1">Field 1:</label>
        <input type=text class=field id="field1">
        <input type=checkbox class=box>
Most Valuable Expert 2018
Distinguished Expert 2018

Commented:
Hey tel2,

Couple of answers to your questions.

The 4px margin on the label effectively makes it a bit deeper than the other controls, so when it wraps to the next row, it can't be shifted all the way to left:

wrap.jpg
Using a <label> instead of a <span> is more semantically correct, and gives your page better accessibility (think screen-readers etc). It also adds the benefit of being able to click it to select the related input (textbox etc). When using a label, you can either wrap the input inside of it, or you can tag the label with a for attribute to link it to the input. Using the former is potentially easier to code, but using the latter is easier to style (you can set a width to the <label> to give some spacing for example). The difference in using a <label> over a <span> is purely semantic - there's no difference in styling them - they're both inline elements.

Wrapping each row in a container such as the fieldWrap in David's example will give you a bit more flexibility in styling. For example, it would be very simple to just add a margin-bottom to the .fieldWrap to space out your rows.

One other thing worth mentioning - all of your inputs (textbox / select / checkbox etc) must have a name attribute. Without it, you won't get any data sent to the server when you click on the Submit button (unless you manually handle it with Javascript).

Author

Commented:
That's a pretty impressive answer, Chris, especially considering I didn't actually ask you any questions!
Thank you so much for your time, expertise and thoroughness, complete with helpful picture!

> "One other thing worth mentioning - all of your inputs (textbox / select / checkbox etc) must have a name attribute."
True.  I removed a lot of the stuff which was not necessary to demonstrate my problem, in the hopes that it would make it simpler to read.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial