CODEWITHSUNDEEP
htmlcss
n00bstackie
n00bstackie

Reputation: 4893

Simple css question about div's

I have a very simple page like this

!!@#@ apparently I cant add link to my page on jsbin since new users aren't allowed to add links.

I want to have certain amount of gap between different options provided to the user (say 15px).

Code I have is following:

<div id="question" >
    What month is it?
    <div style="padding-right: 15px;" id="options">
        <input type="radio" name="question1" />Jan
        <input type="radio" name="question1" />Feb
        <input type="radio" name="question1" />May
        <input type="radio" name="question1" />Dec
    </div>
</div>

I thought that adding padding to the right will add padding to each of the radio buttons inside div id options. However, it is only adding padding to the whole div.

What is the bes way to handle this?

Upvotes: 0

Views: 378

Answers (4)

David Thomas
David Thomas

Reputation: 253396

The thing to remember is that an inline style will apply to the element in which tag it is defined. To affect the inputs you'd need to target them directly (demo: 1) by either adding a class to them, target all inputs (demo: 2) or, as jthompson suggests, target those inputs that are descendants of the particular div (see jthompsons' answer).

    1. `input {padding-right: 15px; }`, or
    2. `input[type="radio"] {padding-right: 15px; }` // this is CSS3 only, I think.
  2. add `class="q1-radio-inputs"` and use the CSS `.q1-radio-inputs {padding-right: 15px; }`

It's also worth noting that using inline styles doesn't make much sense, except where it needs to override a particular style one time only, it's always (so far as I can tell) wiser to use an external sheet, in order for caching (if nothing else) and for making it slightly easier to affect all styles when redesigning/reworking the site.

And, as an addenda, styles are applied in the following order: inline-stlyes override styles defined in the header, which in turn override external stylesheets. Unless a style is defined with the !important marker, in which case it is not overridden (all being well).

The following (sort of) helps: http://www.w3.org/TR/CSS2/cascade.html

Edited in response to comments:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<style type="text/css" media="screen">
.div#options input { padding-right: 15px }
</style>
</head>
<body>
<div id="question" style="padding-bottom: 15px">
    What day is it today?
    <div id="options">

        <input type="radio" name="question1" />Sunday
        <input type="radio" name="question1" />Monday
        <input type="radio" name="question1" />Saturday
        <input type="radio" name="question1" />Tuesday
    </div>
</div>

<div id="question" >
    What month is it?
    <div id="options">
        <input type="radio" name="question1" />Jan
        <input type="radio" name="question1" />Feb
        <input type="radio" name="question1" />May
        <input type="radio" name="question1" />Dec
    </div>

</div>

</html>

If the html, above, remains representative of your site (as linked in the comments to this answer), the problem may well be:

.div#options

the period is used to indicate a class name, the pound '#' is used to indicate a div name, and only one or the other can be used at one time:

div.options /* is fine, indicating a 'div' of class-name 'options' */
div#options /* is also fine (and both within the same document is, also, fine) indicating a div of id-name 'options' - an id is unique, and can be used only *once* per document */

.div#options /* could be fine, but appears to be targeting an element of id-name 'options' within an element of class-name 'div,' which is not found within your document. */

Upvotes: 1

jthompson
jthompson

Reputation: 7266

You can add the following rule:

div#options input { padding-right: 15px }

It will add padding to the right of each "input" element under the div with the id of "options"

UPDATED: In the sample, an "id" is being used several times. Id's must be unique, so classes would be more appropriate. See the following example:

div.options input { padding-right: 15px; }
<div class="options">
    <input type="radio">...

The class can be reused for other elements that you'd like to share the same style.

Upvotes: 3

edeverett
edeverett

Reputation: 8218

I think the root of the problem is in the HTML not so much the CSS.

Your HTML is not as good/helpful as it could be. You are presenting a list of months, so mark them up using a list:

<ol id="options" class="formList">
   <li>
      <input type="radio" name="question1" />Jan
   <li/>
   ....
</ol>

A side effect of this now being nice semantic HTML is that it gives you all the correct hooks for your styling. Each part of the form is in it's own element making applying CSS much easier - to add space around the list items use something like:

.formList li {margin:15px;}

//off topic:

You should really add label elements to you markup too. Using label elements in forms explicitly associates the text label of a form element with that form element, making the site more accessible and usable - a user can click on the text to activate the radio button which gives them a bigger target making your forms nicer and your users happier.

<label><input type="radio" name="question1" />Jan</label>

or

<input type="radio" id="radio1" name="question1" /><label for="radio1">Jan</label>

Upvotes: 1

xenon
xenon

Reputation: 1425

Your code is asking the browser to place 15px of padding on the right of the DIV so you need to be more specific with your CSS declaration:

#options input { padding-right:15px; }

If you place that between style tags or in a style sheet, it should work out just how you want it.

Upvotes: 1

Related Questions