0

I have a div width a fixed width:

// CSS

@media only screen
.column.small-centered:last-child, .columns.small-centered:last-child {
  float: none;
}
.lesson_lt_mc_div .small-centered {
  margin-top: 15px;
  margin-bottom: 15px;
  width: 296px;
}
foundation.css:1@media only screen
.column.small-centered, .columns.small-centered {
  margin-left: auto;
  margin-right: auto;
  float: none;
}
.text-left {
  text-align: left !important;
}

// HTML

<div class="small-3 small-centered text-left columns">
    <input type="radio" name="lt_mc_ans" value="1" id="lt_mc_ans_1"><span> 1. </span>
    <label for="lt_mc_ans_1">I</label>
    <br>
    <input type="radio" name="lt_mc_ans" value="2" id="lt_mc_ans_2"><span> 2. </span>
    <label for="lt_mc_ans_2">rsr rs rsrs rsrs r rrrs</label>
    <br>
    <input type="radio" name="lt_mc_ans" value="3" id="lt_mc_ans_3"><span> 3. </span>
    <label for="lt_mc_ans_3">Very</label>
    <br>
    <input type="radio" name="lt_mc_ans" value="4" id="lt_mc_ans_4"><span> 4. </span>
    <label for="lt_mc_ans_4">She</label>
</div>

enter image description here

The reason I'm using fixed width is that I want the div to be centered and for the text to be aligned to the left. The problem is, when the text is too long it wraps, making the options look ugly.

Is there a way to dynamically change the width of the div with jQuery or JavaScript? (I'm also open to CSS solutions, although I doubt there's any).

Improve this question
2
  • Can you show us your html code? Commented May 22, 2015 at 8:26
  • @Mivaweb Oh I forgot about that. Updated. Commented May 22, 2015 at 8:29

4 Answers 4

Reset to default
1

Use an outer and inner element.

Align the text of the outer element in the center. And display the inner element as an inline-block, so it will only be as width as its content.

.outer {
  text-align: center;
  background: lightblue;
}
.inner {
  background: lightgreen;
  display: inline-block;
  text-align: left;
}
<div class="outer">
  <div class="inner">
    Some text in it
    <br />and some more
    <br/>and more
  </div>
</div>

Note: instead of using an inner div, you could use your form... (saves you an element).

Edit

With your HTML (note that I've added the form tag)

.outer {
  text-align: center;
  background: lightblue;
}
.inner {
  background: lightgreen;
  display: inline-block;
  text-align: left;
}
<div class="outer small-3 small-centered text-left columns">
  <form class="inner">
    <input type="radio" name="lt_mc_ans" value="1" id="lt_mc_ans_1"><span> 1. </span>
    <label for="lt_mc_ans_1">I</label>
    <br>
    <input type="radio" name="lt_mc_ans" value="2" id="lt_mc_ans_2"><span> 2. </span>
    <label for="lt_mc_ans_2">rsr rs rsrs rsrs r rrrs</label>
    <br>
    <input type="radio" name="lt_mc_ans" value="3" id="lt_mc_ans_3"><span> 3. </span>
    <label for="lt_mc_ans_3">Very</label>
    <br>
    <input type="radio" name="lt_mc_ans" value="4" id="lt_mc_ans_4"><span> 4. </span>
    <label for="lt_mc_ans_4">She</label>
  </form>
</div>

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

USE display:table; margin:auto; on small-centered class and remove width...

Improve this answer

Comments

1

If you change your width attribute to be a min-width attribute and then set the width attribute as follows:

width: intrinsic;
width: -moz-max-content;
width: -webkit-max-content;

It should behave as you expect. More information on the 'max-content' option available here.

Edit: A codepen using your html structure: here

Improve this answer

Comments

0

Can you not just set div with min-width, rather than width in the css allowing it to expand as the text did?

Improve this answer

2 Comments

I tried setting the div to min-width but the div no longer centers.
My apologies I didn't read the question properly, min-width will create a full width div

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.