How to keep inline block text from appearing at the bottom

Web Development
1

I’m trying to use inline block to separate two divisions to be next to each other but the text in the right division is showing up at the bottom of the block. How can I fix this?

Here’s my code:

<div class="inline-block">
    <p>   Test Text

        <div class="inline-block-2">
            <ul>
                <li>Testing the text out in this space</li>
                <li>Testing the text out in this space</li>
                <li>Testing the text out in this space</li>
                <li>Testing the text out in this space</li>
            </ul>
        </div>

        <div class="inline-block-2">
            <ul>
                <li>Testing the text out in this space</li>
                <li>Testing the text out in this space</li>
                <li>Testing the text out in this space</li>
                <li>Testing the text out in this space</li>
            </ul>
        </div>
    </p>
</div>

image
image1190×698 48.1 KB

In the image, you can see that in the block on the right, the text ends up in the bottom of the block. I’d like to know how to center it in the block, or move it anywhere in the block. Any info would be greatly appreciated! Thanks in advance~

2

I think I may know the answer. You have the text ‘Test Text’ in a p element but the closing tag is right at the end of the rest of the code. This is causing the other elements to become child elements of it and take on its’ properties. If you put the closing tag on the same line it should give you more freedom to position those elements.

3

I see. I realize that I didn’t post the full code on accident. I actually have two p elements. I want both of the p elements to not only display on the same row, horizontally, but I want the text of the second p element (the one on the right hand side of the page) to not sit at the bottom of the block. Both of the p elements are in a div class=“inline-block”. I also don’t see the css style so I’ll put that up too. So, the HTML code is:

<div class="inline-block">

        <div class="inline-block-2">
            <p>Test text</p>
            <ul>
                <li>Testing the text out in this space</li>
                <li>Testing the text out in this space</li>
                <li>Testing the text out in this space</li>
                <li>Testing the text out in this space</li>
            </ul>
        </div>

        <div class="inline-block-2">
            <ul>
                <li>Testing the text out in this space</li>
                <li>Testing the text out in this space</li>
                <li>Testing the text out in this space</li>
                <li>Testing the text out in this space</li>
            </ul>
        </div>

</div>

<div class="inline-block">
    <p class="p2">Testing the text out in this space. Testing the text out in this space.<br><br>
        Testing the text out in this space. Testing the text out in this space.                
    </p>
</div>

And the CSS code is

.inline-block {
display: inline-block;
width: 49%;
text-align: center;
}

.inline-block-2 {
display: inline-block;
width: 40%;

}

Also, the class inline-block-2 is only so the lists in the first div appear side by side in that div.

4

EDIT IS HERE!

In the following image, I want the red box to be centered vertically on the right side of the blue box.

image
image1190×698 45.3 KB

So, I adjusted this to better show. Here is the current HTML:

<div class="inline-block" id="blue">
    <p>   Test Text

        <div class="inline-block-2">
            <ul>
                <li>Testing the text out in this space</li>
                <li>Testing the text out in this space</li>
                <li>Testing the text out in this space</li>
                <li>Testing the text out in this space</li>
            </ul>
        </div>

        <div class="inline-block-2">
            <ul>
                <li>Testing the text out in this space</li>
                <li>Testing the text out in this space</li>
                <li>Testing the text out in this space</li>
                <li>Testing the text out in this space</li>
            </ul>
        </div>
    </p>
</div>

<div class="inline-block" id="red">
    <p>Testing the text out in this space. Testing the text out in this space.<br><br>
        Testing the text out in this space. Testing the text out in this space.                
    </p>
</div>

Here is the CSS:

.inline-block {
display: inline-block;
width: 49%;
text-align: center;
}

.inline-block-2 {
display: inline-block;
width: 40%;
}

#blue {
background-color: blue;
}

#red {
background-color: red;
}

5

I would say the best way to achieve this is to have a div with the display set to either flex or grid. Then you can put both the red and blue box as div elements inside the div set to flex or grid to make them child elements. Set the align-items property on the parent div to center.
Rough format:
html

<div class='parent'> 
  <div class='blue'>
    test text and the two lists
  </div>
  <div class='red'>
    p elements
  </div>
</div>

css

.parent {
  display: flex (or grid);
  align-items: center;
}
1 Like
6

Really simple is

.inline-block {
display: inline-block;
width: 49%;
vertical-align: middle;
}

image_2024-07-06_180857324
image_2024-07-06_180857324891×338 5.52 KB

2 Likes
7

Wow, that really was simple! I had no idea vertical align existed. Thank you so much for this!

8

I tried using flex in there but I couldn’t get it to work either. Going through the courses, inline-block came up first so I was trying to figure out how to do it with inline block. Flex is what I’m trying next. I’ll definitely try the same example with flex. Appreciate your help

9

Glad you found the answer :slight_smile: