CSS div layout

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
Rumpy
Forum Newbie
Posts: 4
Joined: Mon Mar 13, 2006 8:32 am

CSS div layout

Post 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.
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post 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.
Rumpy
Forum Newbie
Posts: 4
Joined: Mon Mar 13, 2006 8:32 am

Post 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.
User avatar
wtf
Forum Contributor
Posts: 331
Joined: Thu Nov 03, 2005 5:27 pm

Post 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
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post 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>
Post Reply