8 replies [Last post]
frangarcia
Offline
newbie
Elche
Last seen: 13 years 40 weeks ago
Elche
Joined: 2006-12-13
Posts: 5
Points: 0

I'm moving my web application into css, but I have a problem that I cannot resolve. I have designed a form with the aspect similar to a row, with divs foreach row. Into each div there is a label 'label', which sometimes is too long and it will be shown in 2 lines. The problem is that the label is bigger than div and it appears out of the div, as you can see in the image:

This is the html code:

AsignaturaConsecutiva Alemán
Número aproximado de alumnos30
LaboratorioL4 Capacidad (36 Alumnos)
Tipo de reservaSegundo cuatrimestre

And this is the css code:

.contentform form div { margin: 0; padding: 5px; text-align: left; clear: both; }

.contentform form div.odd {
margin: 2;
padding: 5px;
background-color: #DDDDDD;
text-align: left;
clear: both;
}

.contentform form div label{
float: left;
width: 35%;
text-align: left;
clear: both;
}

I hope you can help me!

Thanks in advance

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 37 weeks 1 day ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Well, what would you like it

Well, what would you like it to do?

Would you like the row to expand? Or the text to get cut off?

Verschwindende wrote:
  • CSS doesn't make pies

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

I don't get this; is it

I don't get this; is it really a form in the correct sense? where are the inputs and where are the label 'for' attributes

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

frangarcia
Offline
newbie
Elche
Last seen: 13 years 40 weeks ago
Elche
Joined: 2006-12-13
Posts: 5
Points: 0

Yes, it is a form, but

Yes, it is a form, but perhaps I've choosen a bad example, because there is no input, but the most common forms have an input text or textarea, where now there is only a text. The red circle show where is the label.

Yes, i wanna expand the div layer, if the label needs two lines, but how do i get it?

Any suggestions?

frangarcia
Offline
newbie
Elche
Last seen: 13 years 40 weeks ago
Elche
Joined: 2006-12-13
Posts: 5
Points: 0

And now I've detected that

And now I've detected that in IE works fine. But what happen with Firefox? If it doesn't work in Firefox, I don't wanna do it!

frangarcia
Offline
newbie
Elche
Last seen: 13 years 40 weeks ago
Elche
Joined: 2006-12-13
Posts: 5
Points: 0

I think I've solved my

I think I've solved my problem reading this web:

http://www.positioniseverything.net/easyclearing.html

I've added this code to my css and it works fine. Really I don't understand not very well why, but it works.

.contentform form div:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Erm yes as your labels were

Erm yes as your labels were floated they needed containing ensure that you use the full and current implementaion of the .clearfix technique though.

Read up on 'containing floats'

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 37 weeks 1 day ago
Joined: 2004-06-30
Posts: 9668
Points: 801

IE

You "thought" IE was doing it properly. As Hugo has rightly pointed out, it's a float clearing issue - IE incorrectly expands parents to contain their floated children.

Verschwindende wrote:
  • CSS doesn't make pies

frangarcia
Offline
newbie
Elche
Last seen: 13 years 40 weeks ago
Elche
Joined: 2006-12-13
Posts: 5
Points: 0

As you said, it wasn't a

As you said, it wasn't a valid solution because it crashes on IE. I've read the problem about Containing floats http://www.complexspiral.com/publications/containing-floats/ anx I solved the problem adding a new div into another div. It calls clearer and it's something like this:

.contentform form div.clearer{ clear: both; visibility: hidden; }

Thanks for your help!