Page 1 of 1

CSS div layout

Posted: Mon Mar 13, 2006 8:37 am
by Rumpy
Hi,

I have a very strange problem with some divs and checkboxes. Here is an exapmle:

Code: Select all

<div class="group">
	<div style="width: 200px; float:left" class="caption">
		<input type="checkbox" />
	</div>
	<div>
		Right text
	</div>
</div>
<div class="group">
	<div style="width: 200px; float:left" class="caption">
		Left Text under checkbox
	</div>
	<div>
		Right Text
	</div>
</div>
This should look as a two column layout, but... it doesn't. I don't want to use tables for design as I don't like it.
Can you help me how to make the two column design?
I managed to hack it by setting the padding-bottom: 5px; of the group divs, but what if a browser renders the checkbox differently, this problem will come again.
Overall, that's the purpose of the wrapping divs (class="group"), but I have no idea why this happens. If you can explain me I'll be very greatful.

Posted: Mon Mar 13, 2006 10:50 am
by matthijs
The div.group take up all width (you didn't give them a width) so it's logical they place below eachother.
If you would float them left and right you get a 2 col layout.

Posted: Mon Mar 13, 2006 3:42 pm
by Rumpy
Sorry, maybe the question is wrong. I need the div.group to take the all the width, but I want to split their inside, not just put 2 divs and float one to the left. Test the code, please, to see where is the problem.

Posted: Tue Mar 14, 2006 2:50 pm
by wtf
When laying out the form elements I prefer to use labels as opposed to nesting divs the way you do.

http://www.pixy.cz/blogg/clanky/css-fie ... abels.html

http://www.quirksmode.org/css/forms.html

Posted: Tue Mar 14, 2006 4:23 pm
by matthijs
Ok then I don't understand your problem. I did test your code. I see 2 divs class="group" full width, one on top of the other. Within each I get a floated div caption to the left, with the text right of it.

And wtf is correct to say that for forms its better to use labels.

Code: Select all

<style type="text/css">
<!-- 
label {
  float: left;
  width: 10em;
} 
-->
</style>


<form>
  <p>
  <label for="name">Name: </label>
  <input name="name" id="name" type="text" />
  </p>
</form>