CODEWITHSUNDEEP
htmlcss
Sandra Schlichting
Sandra Schlichting

Reputation: 26006

Can elements be grouped in a DIV?

I have this HTML and CSS

http://jsbin.com/uciya5/3/edit

where the problem is that the radio buttons are treated as individual elements and therefore inherent the properties of class="cellData". Notice how wide the radio buttons are spaced vertically.

<div class="cellData">
  <input name="ctype" value="individuel" type="radio" checked/> Individuel <br>
  <input name="ctype" value="course" type="radio" /> Course </div>
</div>

Is it possible to control this vertical spacing of the radio buttons, or perhaps wrap a DIV around them to protect them?

Update Removed template tags.

Upvotes: 0

Views: 68

Answers (2)

Steve Wellens
Steve Wellens

Reputation: 20640

You could delete this from the CellData stye: line-height:4em

You could also try using a table, it would be a lot simpler.

Upvotes: 0

thirtydot
thirtydot

Reputation: 228202

You could add another class to the div containing radio buttons:

<div class="cellData cellRadios">

with CSS (similar to this):

.cellRadios { line-height: 1 }

See: http://jsbin.com/uciya5/2

Provided that in your CSS you define .cellRadios after .cellData, the line-height from .cellRadios will be the one that's applied.

I'd probably also change .cellRadios to a better name.

If you prefer it, you could instead wrap the radio buttons in an extra div, as you suggested in your question.

<div class="cellData">
    <div class="cellRadios">
        <input name="ctype" value="individuel" type="radio" <TMPL_VAR IN>/> Individuel
        <br>
        <input name="ctype" value="course" type="radio" <TMPL_VAR CO>/> Course
    </div>
</div>

Upvotes: 1

Related Questions