Alternative to <br /> inside <dl>

Hi guys.

I just found out I cannot have a BR inside a DL (as in the code below).
The reason for the BR is to clear the floats, because the dt and dd are both floated so they display next to each other.

<dl class="signup button">
       <input type="submit" class="button" value="SIGN UP NOW" />
    <br class="fix" />

I tried fixing it and couldn’t find an effective way. Wanted to check if anyone knows of an easy alternative?

Thanks in advance.


Ditch the <br /> and put overflow: hidden on the dl :slight_smile:

If the dt or dt has multiple lines then floats are not the best choice as you can’t clear a pair of items to start the next row. Use display:inline-block instead which ensures that each pair always start on a new line together.

Here’s an example that I posted for someone yesterday.

Have you tried applying

clear: both;

to the dl?

Maybe I don’t fully understand the question, implications or whatever but have you tried this:

<dl class="signup button">
       <input type="submit" class="button" value="SIGN UP NOW" />
      <br class="fix" />

Can you supply a link to the webpage and what visual effects you are trying to achieve?

Also instead of floating have you tried setting the margin and padding properties to zero then adjust each of them to suit your requirements?

To the two posters above you missed the point a little :slight_smile:

If the dt and dt are floated and you want to start another pair of dt’s and dds underneath then you can’t simply clear one or both of them because they will not align in rows in IE. The first one will clear but the following will float up to the first line.

The situation is exacerbated if you have multi lines in either the dt or dd and the whole thing goes to pot. Adding a clearing element between a dt and dd would do the trick but is invalid.

The only solution with floats would be to close the dl and clear the floats with overflow:hidden but that means that you can only ever have one pair of dt and dd in each dl which is most cases would be silly.

However, if you look at my example in post #3 you will see how it can be done easily without using floats but using display:inline-block and avoid all the issues. :slight_smile:

Now I fully understand the question :slight_smile:

my version

That’s not bad and is very close in good browsers :slight_smile: However it is a also a good example of the bug in IE7 and under that I mentioned as the reason that floating won’t work for all.

Have a look at IE7 and you see that the floats still rise up and is all mis-aligned. I could live with IE6 being wrong but I think IE7 needs to be catered for for a while longer :slight_smile:

What I like about inline-block though is you can align to the bottom also which looks a lot neater I think.

BTW, I know it was probably left in place in error (as I do it all the time) but float and inline-block are mutually exclusive. Float wins out and the inline-block is redundant.

#john dd {float:left; [B]display:inline-block; [/B]margin-top:0.42em}

That was probably just a copy and paste as you obviously know what you are doing.:wink: