26 replies [Last post]
HomerSimpson
Offline
Regular
Last seen: 10 years 8 weeks ago
Timezone: GMT-4
Joined: 2008-05-06
Posts: 40
Points: 0

In order to satisfy large and small resoultions, I should go with float or liquid design. So in this example I want two rows of a label and textbox side by side but I end up with 3 on first row and one on the 2nd. Any ideas?

should look like:

LABEL LABEL
TXTBOX TXTBOX

LABEL LABEL
TXTBOX TXTBOX

my code:













My CSS:
#wrapper1{
float: left;
top: 25px;
left: 2%;
width: 27%;
height: 50px
}
#wrapper2{
float: left;
top: 25px;
left: 22%;
width: 27%;
height: 50px
}
#wrapper3{
float: left;
top: 15px;
left: 2%;
width: 27%;
height: 50px
}

#wrapper4{
float: left;
top: 15px;
left: 2%;
width: 27%;
height: 50px
}

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 8 years 7 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Hmmm...I'd dodiv div

Hmmm...

I'd do

div div { float: left; marign-top: 15px; margin-left: 2%; width: 27%; height: 50px }

#wrapper3 {
clear: left;
}

Or something similar. If the third box clears the floats above, then it is forced to make a new line. I heard from Paul O'B that IE doesn't let floated things clear other floats. What would be better is to set your markup as such:

Yeah, there should really be a fieldset in place of the div class="wrapper" so sue me...

form div.wrapper { overflow: hidden; (wrap floats) set a width here that makes enough room for two floats margin-top: 15px; } form div.wrapper div { float: left; margin-left: 2%; width: 27%; (should likely be made px or ems or something cause now this is depending on the width of the new parent which might be smaller than the form) height: 50px; } or something like that.

I'm no expert, but I fake one on teh Internets

HomerSimpson
Offline
Regular
Last seen: 10 years 8 weeks ago
Timezone: GMT-4
Joined: 2008-05-06
Posts: 40
Points: 0

What do you mean by "clear

I'm a bit confused as to which scenario I should try.
Actually, what I just did was put a

between the divs to create a new row. Is this the way to do it or should the use of CSS do the trick?
Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 8 years 7 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Sorry, can't see what you

Sorry, can't see what you put between the two divs (anything with < and > tags disappears without <code> tags).

Probably a <br> ?

Of the two ideas I posted, the first was meant to work with your current code, while the second is I think a leaner version. Notice you are almost word-for-word repeating everything for each #wrapper, which is a sign that you can consolidate.

If you don't clear the floats after the two are alongside each other, then they will always continue to stack up alongside in a long line as the browser window grows-- you could also change the widths of the floats to something a bit more stable than % (em would be a good one) and set a width on their container to something smaller than the breowser window (in any unit, px or em...) because floats don't keep stacking if there isn't enough room in the parent.

So if you have a box that's 400px wide with 4 floats inside of 150px width each and 5px side margin and 10px padding on each float, then you'd have 1 float per line because there's only room for one float on each row.
Float1 - total width 180px
Float2 "
Float3 "
Float4 "

Remove the margind and padding and you'll get two floats per line:
Float1 and Float2 - total width 300 (150px x 2)
Float3 and Float4 - "

Make the container wider (460px) and now you'll get three floats in a row (total width floats is 150 x 3 = 450px)
Float1 and Float2 and Float3
Float 4

So, there are lots of ways to control floats, you don't HAVE to clear them, it's just usually the easiest way. You can try simply setting clear: left on #wrapper3 and then check in IE6 and 7 to see if they are letting the floated element clear the other floats. If they are, that's it, you're done. But I don't think you can (I've seen Paul's explanation in a demo but haven't run into it myself).

Of course, I forgot to ask, do you have a doctype? I don't see one on your posted code, but I assumed that was because it was an example. Without a doctype, IE will act like IE5.5 and lower, and I dunno what it does with floats, but I hope you are looking at this page in every browser you can download (Opera, Safari-for-Win, FF, IE7 on WinXP and Tredosoft Multiple IEs 3-6, Lynx text browser and JAWS for the hell of it are my starting point on the Windows machine). So, if no doctype, get that in there too. Also, the asp stuff should be hidden from any displayed HTML (I don't know if it goes away when someone actually visits the page-- it should).

Ah, to answer your question, one generally wants to use CSS for setting how things look, and HTML for the info itself. A br is appropriate in a few settings, like an address or poetry where a newline is really part of the content and not just part of the page design. Using it to "clear" floats is bad form but the web design nazis aren't going to hunt you down and force you to sit through a reading of W3C specs : )

Does that make sense?

I'm no expert, but I fake one on teh Internets

HomerSimpson
Offline
Regular
Last seen: 10 years 8 weeks ago
Timezone: GMT-4
Joined: 2008-05-06
Posts: 40
Points: 0

I am new to css and confused

I am new to css and confused a bit, not sure now I was asking the question in the right way.
It's a form for a user to fill out 6 textboxes with labels to the left of them. I want 3 rows of 2 textboxes.
I want the textbox aligned with each other in colums. How would I do that. My current code is using Div's, is that the right way to go about it? here's my css

#block1{
color:blue;
width: 90%;
height: 45px
}

#block2{
color:green;
width: 90%;
height: 45px
}

#block3{
color:orange;
width: 90%;
height: 45px
}












Caposoft
Caposoft's picture
Offline
Enthusiast
Last seen: 4 years 44 weeks ago
Timezone: GMT+1
Joined: 2008-03-16
Posts: 330
Points: 118

Can you somehow upload an

Can you somehow upload an example, maybe in form of a table or a sketch jpg? Because the initial posting indicates that you would want to create a form like this:

LABEL LABEL
TEXT TEXT

LABEL LABEL
TEXT TEXT

The last posting understands it like this:

LABEL TEXT LABEL TEXT
LABEL TEXT LABEL TEXT
LABEL TEXT LABEL TEXT

HomerSimpson
Offline
Regular
Last seen: 10 years 8 weeks ago
Timezone: GMT-4
Joined: 2008-05-06
Posts: 40
Points: 0

You're right, I changed my

You're right, I changed my mind, I want the labels to the left. Here is how I want it to look, notice the misalignment? Hope the attachment comes thru.

AttachmentSize
form1.JPG 12.01 KB
Caposoft
Caposoft's picture
Offline
Enthusiast
Last seen: 4 years 44 weeks ago
Timezone: GMT+1
Joined: 2008-03-16
Posts: 330
Points: 118

Nice you changed your mind

Nice you changed your mind while Stomme Poes was dedicating her time. Why don't you define a width to the labels? It should be at least as long as the longest label

label { width: 6em; }

HomerSimpson
Offline
Regular
Last seen: 10 years 8 weeks ago
Timezone: GMT-4
Joined: 2008-05-06
Posts: 40
Points: 0

My fault, it was never

My fault, it was never supposed to be on top, but rather to the left. However, I invoked your code but it didn't make any diff. I inserted

cssclass ="txtb"


on the html label line.

Caposoft
Caposoft's picture
Offline
Enthusiast
Last seen: 4 years 44 weeks ago
Timezone: GMT+1
Joined: 2008-03-16
Posts: 330
Points: 118

Why would you define a class

Why would you define a class when you can give the label a width? Of course you have to adjust the value of the width to the longest label. The 6em was an example.

Can you post your current markup and CSS, or upload it?

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 8 years 7 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

hmmm

Setting a width on the label... isn't a label inline? So they'd have to be made blocks, but then they're not sideways, so instead they'd be floated... Since I usually have a div wrapping each of my label-input pairs (got that idea from Tyssen), if this were my form each of those wrapping divs would have the set width. The textbox is required to get a width (well, rows and columns) in the HTML anyway, so I'd make the div wide enough that the label can still fit even when wrapping (the text would have to wrap).

I agree, post some code and we can show you a few ways to do it. But in general, think of floats as soap bubbles who not only try to stick to the top of their container but also in the direction they're floated. You can only fit so many bubbles at the top.

Another tip is, stick ugly background colours on your floats. This helps you see what they're doing and also shows you why they're acting weird a lot of the time. Take the backgrounds off when you don't need them anymore.

I'm no expert, but I fake one on teh Internets

HomerSimpson
Offline
Regular
Last seen: 10 years 8 weeks ago
Timezone: GMT-4
Joined: 2008-05-06
Posts: 40
Points: 0

I guess the floating throws

I guess the floating throws me off with all the options available in css, I've got too much rope. But here's what I have so far after tinkering all day. The image I posted is still about the same. thanks for your consideration.

body { background-color: white;
text-align:center;
min-width: 600px;
}

#mainwrapper{
width:95%;
margin:0px;
border:1px solid white;
line-height:150%;
}

#block1{
color:blue;
width: 90%;
height: 45px
}

#block2{
color:green;
width: 90%;
height: 45px
}

#block3{
color:orange;
width: 90%;
height: 45px
}
.TxtB{
height: 26px;
width: 100px;
left: 300px;
top: 30px;
}

#tlab{
width: 6em;
}















Caposoft
Caposoft's picture
Offline
Enthusiast
Last seen: 4 years 44 weeks ago
Timezone: GMT+1
Joined: 2008-03-16
Posts: 330
Points: 118

your tlab is an id in CSS,

your tlab is an id in CSS, and a class in markup

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 8 years 7 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

.TxtB{ height: 26px; width:

.TxtB{
height: 26px;
width: 100px;
left: 300px; <-- wha
top: 30px;<--huh
}

If you are going to position stuff with coordinates, you have to tell the browser that you are positioning the element. Like, you have to say either position: relative or position: absolute (but, don't).

Hmmm, I'm going to take this code and write up a visual on it. Though I won't be able to check in IE7 and IE is wiggy on floats. I'll post back.

I'm no expert, but I fake one on teh Internets

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 8 years 7 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

okay

I can't do ASP so I made this a normal form, but the principles still stand. Here's the html:





Floats as example 1

Customer Name:



Noun:



PO nbr:



Job nbr:



CostCtr:



BPAC:




Yeah doctype and all are there (html4.01 strict) but anyway, you see I have a form (and a fieldset, bleh) and inside are divs wrapped around every label-input pair. I gave them classes so I could add different colours to them so you could see them.

CSS

* {
margin: 0;
padding: 0;
}

img {
border: 0;
}

Always do my resets first...

form { background-color: #c7c7c7; width: 900px; /*<--CHANGE TO 700px---------------------- ****************/ margin: 30px auto; overflow: hidden; } Set a width... now, there are two rows of three boxes, but if you change form's width to only 700px there's not enough room. So then they wrap and you get 3 rows of 2. last two declarations there are to move the form to the center of the page and the second to enclose the floats (nobody is clearing anyone). form div { width: 280px; float: left; padding: 2px; height: 38px; margin: 15px 4px 0; overflow: hidden; /*wrap the floating labels*/ } Since the divs have floats in them we've got overflow: hidden again. If these were normal boxes and not boxes with floats it might be easier to explain but that's how you'll get labels next to inputs like that. See, I said form div-- that's all divs inside the form. They all get the same width, are floated left, same padding and margin. form div label { float: left; width: 90px; } And, just to get the label to the side instead of on top of the input...

so,
http://stommepoes.nl/Tests/doh.html
Copy it and play with the widths. the idea of this is to use widths of containers to control floats.

The other solution would be to give div class="d" a special instruction to clear: left;

form div.d {
clear: left;
}

Which would have forced a new line anyway, even if the form was 100% wide.

What you did with the p tags was stick a non-floated block among the floats. This forced a newline as the unfloated p could not also stack up with the other floats, so broke the flow. But, it's bad form, like using a Macintosh Lisa as a doorstop.

I'm no expert, but I fake one on teh Internets

Caposoft
Caposoft's picture
Offline
Enthusiast
Last seen: 4 years 44 weeks ago
Timezone: GMT+1
Joined: 2008-03-16
Posts: 330
Points: 118

Stomme poes wrote:Setting a

Stomme poes wrote:
Setting a width on the label...

Sorry, I am not getting it. Why can't I set a width on a label? I saw your solution below, but I find it rather huge on a simple task like this.

Can anyone explain me for my understanding what is wrong with this solution:

CSS (just the basics to get it into the desired shape, without margins and styling details)

form
{
width: 400px;
}

label
{
width: 50px;
}

HTML

Example
Item 1:

Item 2:

Item 3:

Item 4:

Item 5:

Item 6:

HomerSimpson
Offline
Regular
Last seen: 10 years 8 weeks ago
Timezone: GMT-4
Joined: 2008-05-06
Posts: 40
Points: 0

code

That did it, but wow is that alot of code. It seems so much engineering to accomplish what I was using before, drag and drop in a designer. I do not know much html since the designer handled it for me, but now I want to solve the prob of the textboxes jumping around when the screen resolution changes. thank you for your input.

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 8 years 7 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Caposoft

I could be wrong, but since a form requires a block element as a direct child, that tells me Label is not a block. If it's not a block, then I assume it's inline (though actually it could be like li and be a "flow" element... not sure what the hell those really are) so if I'm going to set a width on them, I'm not supposed to be able to set widths on inline things... "flow" things, I'm not sure, and definitely not sure how all browsers deals with a width on "flow" elements. If a width can be set on a label without explicitely making a block, then all is good with the world, and the overflow: hidden on the divs and the floating of the labels within can be discarded.

Also, if a label and a text input are inline, they also should not be able to accept margins, which I would think you'd need to keep some gutter space between each group.

Homer: it might have been that the drag-n-drop you were using simply built everything into tables, which in many circumstances are more stable than loose div-based HTML forms. I have never built forms in tables so it is my habit not to. There are many designers who still do, and that may be easier to do. However tables would set up the positions of everyone, meaning you'd have to change the HTML to change someone's position. For me, it's easier to do that with CSS. However, that's because I'm fairly comfortable with it. If I weren't, then hell no : )

I'm no expert, but I fake one on teh Internets

Caposoft
Caposoft's picture
Offline
Enthusiast
Last seen: 4 years 44 weeks ago
Timezone: GMT+1
Joined: 2008-03-16
Posts: 330
Points: 118

WHERE IS MY POSTING?

Someone deleted Stomme Poes' double and triple posting and included mine in the process. :jawdrop:

Caposoft
Caposoft's picture
Offline
Enthusiast
Last seen: 4 years 44 weeks ago
Timezone: GMT+1
Joined: 2008-03-16
Posts: 330
Points: 118

Stomme poes wrote:I could be

Stomme poes wrote:
I could be wrong, but since a form requires a block element as a direct child, that tells me Label is not a block. If it's not a block, then I assume it's inline (though actually it could be like li and be a "flow" element... not sure what the hell those really are) so if I'm going to set a width on them, I'm not supposed to be able to set widths on inline things... "flow" things, I'm not sure, and definitely not sure how all browsers deals with a width on "flow" elements. If a width can be set on a label without explicitely making a block, then all is good with the world, and the overflow: hidden on the divs and the floating of the labels within can be discarded.

Also, if a label and a text input are inline, they also should not be able to accept margins, which I would think you'd need to keep some gutter space between each group.

Well, let's see if I get it together again.

I can't and don't want to doubt anything. I am just dealing with this stuff for 4 months now. That's why I posted the form as I understand how to create a form. And that's why I was actually hoping to get some opinion of the gurus in here, too. Especially since I am currently creating a form that is giving me big headaches.

Your words made me curious and I read up on it. You are right, label is an inline element. A form is a block element that permits only child block elements in strict DTD, but in transitional it can be block and inline element. My form also uses the fieldset element which is a block element and serves the strict DTD requirements. The fieldset might contain block and inline elements on both DTDs. So, this way I can add width and margins and they are accepted by both, input and label.

But maybe I just misunderstood something.

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 8 years 7 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

No, I think I wasn't clear

I think I just wasn't clear... your code should be valid, having the fieldset. But I can't see how you'd get your version of the form (with loose labels and inputs) to line up like Homer wants them. I am also always learning and if you can set it up, it sure would make my forms simpler!! But I have been building pages and pages of forms using the Tyssen method, and yeah, it's a lot of code, but so far it's worked (doesn't mean it's not the Long Way though).

So, do you set the label and input to display: block to give it margins? I've not been able to give things like top and bottom margins to inline things, and often have trouble setting side margins (if it's in a block like a p, no problem, but on something like an a, I always need to either float it or set display: block or something to do things like height (excepting line-height), width, margins).

*edit, heck, I'll just try it

I'm no expert, but I fake one on teh Internets

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 8 years 7 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Tried it

Depending on my font size, it somtimes lines up and sometimes not. The labels can split and wrap, with Item on the right side and the number on the left. Sometimes they can make two columns of three each, but could not get two rows of three each without setting the form to a width of 600px, and then again only at a set font size-- meaing it's not something I could use unless it was built with all text in px and everyone using IE (who won't resize something set in px). Or Opera possibly, depending on what the default font size is, since it also doesn't resize text.

I also found I was able at least in FF1.5 to set a bottom margin on the not-quite-inline inputs (they're called type=input! so not sure who's rules they follow) but not the labels. So, could only space between the inputs and not the labels.

If I wrap the label-input pair I can force them to stick together most of the time, esp with most of my forms not being set up like Homer's but instead each group beneath each other, I make each wrapping div clear the floating label above it instead of having the next label clear. Makes it pretty font-safe.

I would post my test but xs4all still doesn't have teh Internetz at my house, meaning I cannot reach my server... 3 days without being able to do real work! I wonder what will happen to KPN...

*edit again, it had looked originally like there was a set width on the labels, but this was because their content was all the same width. I cannot set a width on the inline label. I set it to 100px, then left all the labels saying Item #: while one said Item: ############: and yeah that one was longer than everyone else, who remained the width of the text. So, to set a width on the label, have to make it a block.

Making the label a block means it won't sit to the left side of the input, but on top, because blocks make a newline...
so unless the text of the label is the same number of characters each time, or unless a bunch of side padding is added to shorter labels, the above will not work quite correctly, and you cannot set a width while keeping the labels to the side without floating them.


Form Test


* {
margin: 0;
padding: 0;
}

form {
margin: 30px auto;
width: 600px;
background-color: #ff0;
}

label {
width: 100px;
margin-bottom: 10px;
background-color: #0f0;
}
input {
margin-bottom: 10px;
}

Example
Item 1446789:

Item 2:

Item 3:

Item 4:

Item 5:

Item 6:

That's what I used, with the latest width on the form (I also did it at 400 etc).

I'm no expert, but I fake one on teh Internets

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 8 years 7 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Server up

I'm no expert, but I fake one on teh Internets

HomerSimpson
Offline
Regular
Last seen: 10 years 8 weeks ago
Timezone: GMT-4
Joined: 2008-05-06
Posts: 40
Points: 0

I used a segment of your

I used a segment of your code to make my labels and textboxes behave in all resolutions which solved my problem! Is this considered "liquid" design?

form div.e{
width: 280px;
float: left;
padding: 2px;
height: 48px;
margin: 15px 4px 0;
background-color : white;

Caposoft
Caposoft's picture
Offline
Enthusiast
Last seen: 4 years 44 weeks ago
Timezone: GMT+1
Joined: 2008-03-16
Posts: 330
Points: 118

I forgot the float

Stomme poes wrote:
I think I just wasn't clear... your code should be valid, having the fieldset. But I can't see how you'd get your version of the form (with loose labels and inputs) to line up like Homer wants them. I am also always learning and if you can set it up, it sure would make my forms simpler!! But I have been building pages and pages of forms using the Tyssen method, and yeah, it's a lot of code, but so far it's worked (doesn't mean it's not the Long Way though).

So, do you set the label and input to display: block to give it margins? I've not been able to give things like top and bottom margins to inline things, and often have trouble setting side margins (if it's in a block like a p, no problem, but on something like an a, I always need to either float it or set display: block or something to do things like height (excepting line-height), width, margins).

*edit, heck, I'll just try it

Sorry, I have been messing with so many combinations and form layouts that I was confused. You need to add float to label and input. Of course a class to the label will decrease the wide distance to its input.

Try this:

Two rows of floating labels and inputs

Example
Longer item 1:

Item 2:

Item 3:

Item 4:

Item 5:

Item 6:

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 8 years 7 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Tried again

With just your code (just changed to my doctype and <-- removed) I got this at default font: http://stommepoes.nl/Tests/testform2.gif and at text-enlarge http://stommepoes.nl/Tests/testform2enlargefont.gif

However if I changed some things, then I could get it to look good in the default font:
http://stommepoes.nl/Tests/testform2.html
(made the whole code bigger as I decided to add back in all the other stuff needed).
At any point, if the first label wraps, the whole layout is doomed, however a width in ems instead of px would fix this.

Since each label still has no "tie" to its input (they are just loosely floating around) I probably would still do the wrap. If someone gets too long, the whole group will drop down, not just the input.

Here's an example of one of my forms (redone from tables, ew) http://stommepoes.nl/Homeselling/secondhome/invoeren2.html (try playing with text enlarge) as an example of still keeping the label-inputs wrapped (I have exceptions for labels with multiple inputs and another exception called "checkradio" who deals with checkboxes and radio buttons), so I don't have to worry about people's various strange fonts or different font sizes (within reason) breaking my forms.

However it may be possible to keep forms like these stable using your float-everything if the sizes were all in em instead of px... I may try it next form I do.

Homer, seems good... remember that you should try having the third div having clear: left and see if it keeps them lined up no matter the width of the form (will work in all browsers except possibly IE, check in that one)

I'm no expert, but I fake one on teh Internets

Caposoft
Caposoft's picture
Offline
Enthusiast
Last seen: 4 years 44 weeks ago
Timezone: GMT+1
Joined: 2008-03-16
Posts: 330
Points: 118

Experience, experience, experience

Yeah, there comes your experience into account. Smile It seems you have a larger default text size than I do. But if all sizes were set in em it should solve it, right?

I finished my other form last night. I wanted to post it here for evaluation. It seems I will have to work it over... aaaargh! lol I definitely have to look more into acessibility in terms of sizing. That was actually something that I planned as a future step.