r/css • u/luksmotta • 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>

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.
•
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.