CODEWITHSUNDEEP
htmlcssclass
RaduS
RaduS

Reputation: 2555

Display inline using CSS and HTML

I have a PHP code which generates a dynamic questionnaire. To make the story short, i must keep the structure of the DIVs exactly as it its. I cannot modify, add or delete the DIVs, they must stay exactly as they are now. But I can modify the CSS and the CLASSES. With that being said, how can i display Question 2 and Question 3 to be inline?

I made this simple example here, it will be easier for you to see it what i mean: http://jsfiddle.net/radusl/4H68P/ 

<style type="text/css">
    .bigclass {
    margin-left: 10px;
}

.smallclass {
    margin-left: 20px;
}

.question {
    font-weight: bold;
     margin-left: 10px;
}
  </style>


<div class="question">Question 1</div>
<div class="bigclass">
    <div class="smallclass">
        Text1_a
    </div>
    <div class="smallclass">
        Text1_b
    </div>
</div>


<div class="question">Question 2</div>
<div class="bigclass">
    <div class="smallclass">
        Text2_a
    </div>
    <div class="smallclass">
        Text2_b
    </div>
</div>


<div class="question">Question 3</div>
<div class="bigclass">
    <div class="smallclass">
        Text3_a
    </div>
    <div class="smallclass">
        Text3_b
    </div>
</div>

<div class="question">Question 4</div>
<div class="bigclass">
    <div class="smallclass">
        Text4_a
    </div>
    <div class="smallclass">
        Text4_b
    </div>
</div>


<div class="question">Question 5</div>
<div class="bigclass">
    <div class="smallclass">
        Text5_a
    </div>
    <div class="smallclass">
        Text5_b
    </div>
</div>

Upvotes: 0

Views: 110

Answers (4)

Benedikt D Valdez
Benedikt D Valdez

Reputation: 409

As others have stated, this is not ideal markup for what you need, but it is technically possible by adding an extra class to question2, in my example .inline, and doing some tricks with float: left; and clear: left;

Check out this updated fiddle

.inline {
    float: left;
}

.inline + .bigclass {
    float: left;
    clear: left;
}

Upvotes: 2

Perrine C
Perrine C

Reputation: 21

I'm not sure to understood what you want but if it's what I think you can add 

display:inline;

in your smallclass.

If you want this for only some questions, create a new class : 

.inlineClass {
    display:inline;
}

and call this class for the answers you want : 

<div class="smallclass inlineClass">

***** EDIT *********

And if you want answers be side by side the question number, add the class like this : 

<div class="question inlineClass">Question 3</div>
<div class="bigclass inlineClass">
    <div class="smallclass inlineClass">
        Text3_a
    </div>
    <div class="smallclass inlineClass">
        Text3_b
    </div>
</div>

I have this result : 

Question 1
Text1_a
Text1_b
Question 2
Text2_a
Text2_b
Question 3 Text3_a Text3_b
Question 4
Text4_a
Text4_b
Question 5
Text5_a
Text5_b

Is it not what you want ?

Upvotes: 0

Olaf Dietsche
Olaf Dietsche

Reputation: 74028

You can't do this, without wrapping question and bigclass in another div

HTML

<div class="inline-question">
    <div class="question">...</div>
    <div class="bigclass">...</div>
</div>

CSS

.inline-question {
    display: inline-block;
}

Without wrapping, you can only show question and bigclass side by side 

Q1 T1 Q2 T2 Q3 T3 ...

CSS

.question, .bigclass {
    display: inline-block;
}

Upvotes: 1

Joran Den Houting
Joran Den Houting

Reputation: 3163

You ment something like this?

http://jsfiddle.net/4H68P/1/

use the float function:

float: left;

Hope this helps you out.

Upvotes: 0

Related Questions