Always centering image in relation to text box?

Hi Vieras. If this is on the single post page that you’re changing the layout, you could code up a template for the post content, maybe something like this:

<div class="film-box">
    <div class="film-poster">
        <img src=.....>
    </div>
    <div class="film-info">
        <ul>
            <li><span class="film-info-title">some text</span> some text with a link</li>
            <li><span class="film-info-title">some text</span> some text with a link</li>
        </ul>
    </div>
</div>

Copy that into the text editor for each post and change accordingly. Then you could position and style it using this CSS:

.film-box {
    display: inline-block;
    width: 100%;
    border-top: 3px solid #000;
    border-bottom: 3px solid #000;
}
.film-poster, .film-info {
    float: left;
}
.film-info-title {
    font-weight: 600;
}
.film-info ul li {
    list-style: none;
}

Thanks a lot for the code bdbrown! It is a promising start, however there’s one problem with it; The main thing about it is that we would like to remove the current vertical nature of the poster+film info thing. With this code, the info and poster looks like this:
https://www.laajakuva.com/wp-content/uploads/2015/10/wip.jpg
But we would like for it to look like it does in the original image I posted where the poster and info are horizontally on the same level, side-by-side. Is this possible?

Odd. This is what it looks like on my test site: https://www.screencast.com/t/cIW7bTkvFP
Can you post a link to your site so I can see the code?

Hi, I’m afraid I don’t quite know how to do that without making the post appear on our front page or RSS feed OR giving you user rights to our website. If you can tell me how to make such a post, I’ll totally do it. In the mean while, I uploaded the entire source code of said post to Pastebin:
https://pastebin.com/yiqRQC3j

Trying to exclude one post might be more work that it’s worth. The code you posted looks ok. Can you post your child theme style.css file, or other custom css that you have?

I just realized that I can just make a page with an obtuse URL without anyone seeing it. So here you go:
https://www.laajakuva.com/okdsdsaafd/

Do you still need the CSS or can you see the possible issues through that?

Oh, and I didn’t mention this in the prior post, but the way it looks on your site is exactly what we’re looking for.

add this to your css

.film-poster {
    max-width: 20%;
    margin-top: 6px;
}
.film-info {
    margin-top: 6px;
}

Hi Mr Case. I just did that, but as you can see, it didn’t help with making the text and picture appear side-by-side. It did however bring the horizontal line apart from the picture a bit which is great. The picture and text being side-by-side is the last piece missing from this puzzle now.

where are you adding your css? That would have most definately taken care of the issue.

To my child-theme’s style.css -file. The code clearly took effect as the image is now indeed 20% of the width of the page: https://www.laajakuva.com/okdsdsaafd/

But it still isn’t on the same level with the text. Here’s my child theme style css-file in case you think there’s something there overlapping with this stuff:
https://pastebin.com/9jcUevCU

Could it have something to do with the div class film-poster being before the film-info class that sets the poster above the info instead of next to it? Dunno how one could fix that though.

OK so uh. It works! I don’t know why. Or how. But the test site is totally the way it was in the example. Maybe there was some browser memory issue previously and ergo it wasn’t showing correctly. But thanks to Mr Case and bdbrown!

Marking as resolved.