Display inline using CSS and HTML

Question

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>

So you can't edit the HTML at all? Can you add/edit classes in the HTML or do you only have access to the CSS. — Paulie_D
– Paulie_D, Commented Oct 25, 2013 at 11:03
Not sure what you mean by inline? Do you wan't the questions to line up side-to-side or what's the plan? — Benedikt D Valdez
– Benedikt D Valdez, Commented Oct 25, 2013 at 11:03
I can modify the HTML but not the structure of the DIVs, and yes question 2 and 3 must be diplayed side by side inline — RaduS
– RaduS, Commented Oct 25, 2013 at 11:05
Yes i can add a new css class for question2 and question3, but how would i make them disaply inline both the question title and the question content, because at they are in separate DIVs? — RaduS
– RaduS, Commented Oct 25, 2013 at 11:09

Benedikt D Valdez · Accepted Answer · 2013-10-25 11:22:57Z

2

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;
}

answered Oct 25, 2013 at 11:22

Benedikt D Valdez

4093 silver badges10 bronze badges

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

3 Comments

Olaf Dietsche Over a year ago

Nice solution, but this breaks when you add inline to question 2 and question 3.

Benedikt D Valdez Over a year ago

@OlafDietsche: indeed it does, like I noted in my answer this is not ideal, but doable..

Benedikt D Valdez Over a year ago

@OlafDietsche - yes I know :) it's a hax, not ideal, probably not even reliable (might break easily when the answers contain some proper content), but the only possible way I can think of to answer this question with these restrictions.

Olaf Dietsche · Accepted Answer · 2013-10-25 11:15:58Z

1

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;
}

answered Oct 25, 2013 at 11:15

Olaf Dietsche

74.4k9 gold badges113 silver badges214 bronze badges

2 Comments

RaduS Over a year ago

And this is what i was afraid of, that i cannot do without wrapping. Problem is that if i wrap them it will affect a JAVA script and then i must modify the entire JAVA, this would take some time. The reason i posted this question was to see if there is a any solution to this with pure CSS and Classses

Olaf Dietsche Over a year ago

Adding classes needs changing the script (?) as well. So where is the problem?

Joran Den Houting · Accepted Answer · 2013-10-25 11:10:57Z

0

You ment something like this?

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

use the float function:

float: left;

Hope this helps you out.

answered Oct 25, 2013 at 11:10

Joran Den Houting

3,1634 gold badges24 silver badges51 bronze badges

2 Comments

RaduS Over a year ago

Yes, but the problem is that i cannot add more DIVs and create more containers. the DIVs must be exactly as they are and only do this with CSS and CLASSes. Also only to question 2 and 3, not to all questions

Joran Den Houting Over a year ago

Why can't you change the div's? To me it sounds as a bad excuse, in EVERY situation you should be able to change ANYTHING you want.

Perrine C · Accepted Answer · 2013-10-25 11:21:07Z

0

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 ?

edited Oct 25, 2013 at 11:21

answered Oct 25, 2013 at 11:12

Perrine C

211 silver badge5 bronze badges

2 Comments

RaduS Over a year ago

I did you suggestion here jsfiddle.net/radusl/BSnv3 but it doesn't help. Maybe you can give me more input

Perrine C Over a year ago

I just added the .inlineClass in your css (on jsfiddle) and change the html like I wrote in "edit", does it work for you ?

Collectives™ on Stack Overflow

Display inline using CSS and HTML

4 Answers 4

3 Comments

2 Comments

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

2 Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related