Topic: CSS help... again

[ober]

Ok, so I'm sort of an idiot when it comes to some float type stuff.  What I need to do is display question text and inputs side by side and I don't want to do it with tables, so take this example:

Code: [Select]

<div class="question">
   <div class="questiontext">Date of Birth (DD/MMM/YYYY):</div>
   <div class="questioninput"><input type="text" /></div>
</div>
I'm going to have many 'question' classes and I just want to put the question text and question input side by side in those boxes.  If I float both of those, it ignores both the 'question' div and the div that surrounds all questions... HELP?

EDIT: oh, and the text and input divs must have a % width... 60/40 (roughly).

[Mike]

How I do it:

Code: [Select]

<fieldset>
<div>
  <label for="dob">Date of Birth (DD/MM/YYYY):</label>
  <input type="text" id="dob" name="dob" />
</div>
</fieldset>
Note that the fieldset can also be a div if you don't like the fieldset graphics.  I don't have the specific CSS but is is something like

Code: [Select]

fieldset label {
  display: block;
  width: 150px;
  /* Other stuff */
}
fieldset input {
  float: left;
  margin-left: 150px;
}

When i get to work in an hour or so I'll try to look up the full CSS.  But using just using label and no inner divs will get you side by side  elements.  The width and float stuff are just to align things nicely.

[micah]

yeah, what Mike said.  The key is to give the form field a margin-left equal to the width of the label field (plus a little padding)

for example on: http://cwhf.org/get-involved/rose-garden/submit

Code: [Select]

<div class="form_row">
   <div class="form_label">
     <label for="first">First Name:</label></div>
   <div class="form_field">
    <input name="first" type="text" id="first"  value="" size="25" maxlength="255" />
   </div>
 </div>

<style tyle="text/css">
.form_label{
  float: left;
  width: 150px;
  text-align: right;
  }
  .form_row{
clear: both;
margin-bottom: 8px; 
  }
  .form_field{
  margin-left: 155px;
  }
</style>


[ober]

OK, so this seems to work (thanks Micah):

Code: [Select]

.questiontext {
    width: 60%;
    float: left;
}

.questioninput {
    margin-left: 60%;
}

[ober]

shit.... any ideas how to have 4 columns?

[micah]

something like this...

Code: [Select]

<div id="container">
 <div class="column">column 1 content</div>
 <div class="column">column 2 content</div>
 <div class="column">column 3 content</div>
 <div class="column">column 4 content</div>
</div>

<style type="text/css">
*{ padding: 0; margin: 0 }

#container{
 width: 1000px;
}
 .column{
 width: 250px;
 float: left;
}
</style>


[ober]

I swear I tried that... grrr... thank you.

[ober]

OK... I did try that... the problem is that the floated boxes inside the container aren't actually tied to the container.

[ober]

See the white box?  That is my container (shown on hover).  The question and the input should be inside of that and they're not.

[Mike]

You need a clearfix to handle that.

[ober]

Yeah, I just realized that clear: both would fix it at the end of the container... but I wonder if there is an advantage to the clearfix?  He doesn't state a clear advantage in that article.
http://www.webtoolkit.info/css-clearfix.html

[ober]

Nevermind... still reading.  Looks like the clearfix has significant advantages.

I'm using this one: http://css-tricks.com/snippets/css/clear-fix/ (the last one)