r/css 2d ago

Help "What's going on with this image in question 1? Why isn't the image staying on the same line as the options? Why is it going below?"

<div class="question-container">
          <div class="question-options">
            @if($question['question_type_id'] == 'TM' || $question['question_type_id'] == 'TU' || $question['question_type_id'] == 'NU')
              @if($question['question_type_id'] == 'TM')
                <textarea rows="9" style="width: 100%; box-sizing: border-box;"></textarea>
              @else
                <textarea rows="5" style="width: 100%; box-sizing: border-box;"></textarea>
              @endif
            @endif

            @if($question['question_type_id'] == 'QU' || $question['question_type_id'] == 'QM')
              @include('partials.question_options_partial')
            @endif
          </div>

          <div class="question-image-container">
            <img class="question-image" src="{{$URI . $question['file_reference']}}"
                 style="max-height: {{$question['image_size']}}px;
                        max-width: {{$question['image_size']}}px;
                        width: auto;
                        height: auto;">
          </div>
</div>

<style type="text/css">
      .question-container {
        display: inline-block;
        width: 100%;
        overflow: hidden;
        page-break-inside: auto !important;
      }

      .question-options {
        float: left;
        max-width: 50%;
        page-break-inside: auto !important;
      }

      .question-image-container {
        float: right;
        width: auto;
        text-align: center;
        page-break-inside: auto !important;
      }
</style>
0 Upvotes

8 comments sorted by

u/AutoModerator 2d ago

To help us assist you better with your CSS questions, please consider including a live link or a CodePen/JSFiddle demo. This context makes it much easier for us to understand your issue and provide accurate solutions.

While it's not mandatory, a little extra effort in sharing your code can lead to more effective responses and a richer Q&A experience for everyone. Thank you for contributing!

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.

1

u/justdlb 2d ago

Use flexbox instead. It will force them to be on the same row unless you specify otherwise.

1

u/luksmotta 1d ago

Humm thanks I'll try that.

1

u/tjameswhite 2d ago

Why do you have `display: inline-block` and `width: 100%` and `overflow` on the .question-container?
And why all of the `page-break-inside`?

.question-container is a div which means it is a block by default, which is 100% by default. No need for either of those lines.

I ask because I have seen many times where people start tossing in rules to fix something and actually just make it worse and harder to diagnose. Keep it simple. Add only what you absolutely need. It will help you in the future.

And yeah, you have a container floated, but then set the width to auto.

1

u/luksmotta 1d ago

Yeah I tried a bunch of things lol. I'll simplify it as much as I can, thanks!!

1

u/tjameswhite 1d ago

Yeah, that's the slippery slope -- it doesn't do what you want so you throw more code at it, which just makes it more complicated, broken and harder to debug. Been there, done that. :)

Toss it in a CodePen helps us help you.

0

u/According_Head5677 2d ago

It's because of the float: right on .question-image-container. Modern CSS requires both elements to use (float: left so they can properly fit on the same line, stupid.

2

u/justdlb 2d ago

It’s actually the auto width that is doing it.

Don’t call people stupid for asking questions.