How to space some DIVs in columns without a <br />

Question

I'm trying to have two or more columns worth of DIVs for input elements in a form. It's a very complex form, and some elements will be hidden and shown depending on some answers.

The problem is I can't get the DIVs to space accordingly in IE6 while having an effective hide/show. This is what mostly works:

.first_column
{
  float:left;
  clear:both;
}
.second_column
{
  float:left;
}

And some HTML...

<div id="question1" class="first_column">
first row, column 1 <input type="text" id="asdf">
</div>

<br style="clear:both;" />

<div id="question2" class="first_column">
second row, column 1 <input type="text" id="asdf2">
</div>

<div id="question3" class="second_column">
second row, column 2 <input type="text" id="asdf3">
</div>

<br style="clear:both;" />

This works as expected. The problem is the show/hide. If I hide #question1, the line break remains. This isn't so bad for this small example, but if there are many questions depending on a show/hide, large gaps start to appear between rows of questions.

How can I achieve this without that line break?

Answer 1

Unfortunately IE6 is unwavering in it's resolve to render HTML differently from every other browser. Unfortunately I wasn't able to come up with a simple enough solution with using the br's with clear. Oh well... time to fight with IE6 elsewhere.

Thanks for the suggestions.

Answer 2

Use margin-bottom on your divs instead of br

Answer 3

I suggest wrapping your complete rows in another div, and give it an id like row_1, row_2. This would include all questions plus the br. Then when you hide the row, the br hides too.

Answer 4

Use this pattern. Better semantics, simple code. Wrap these in DIVS for hide/show.

this.next('.question').toggle() - uses Prototype library. It finds the next element with the given class name and will hide/show that element.

<a href="javascript:;//open question" onclick="this.next('.question').toggle()">open</a>
<div class='question'>
<label>First Name</label>
<input .... />
<div class="formClear"></div>
</div>

...and this CSS

.label {
width:120px;
float:left;
margin-right:15px
}

.input {
float:left
}

.formClear {
clear:left;
height:15px;
}

Answer 5

For this problem, in my websites I use this:

In the CSS:

.spacer
{clear: both; visibility: hidden;}

In the HTML:

<div class="spacer"></div>

DIV is betther than BR (or HR) for this type of things because it do not move a pixel so you are free to apply margins to other content DIVs in order to have the perfect layout that you want. This work in all browsers, also in IE6.

This will fix also most of the floating problems. I do not find other solutions without this that are cross browser.