Centering problems

[qim]

@SamA74

It works when I try it in Inspect,

By Inspect, I suppose you mean FF Developer/Inspector. I’ve looked and looked and played around with ticking and unticking boxes and I’me ready to give up!

[qim]

Right! Getting there!

When all fails call the !important !

I think I got it, thanks

[Simon]

I can tell everybody’s heads are about to explode, so here, give this a go:

Replace each hotel row with this markup (make sure you save the data, e.g. hotel names, description, image links, etc):

<div class="hotels-cont">
    <div class="hotels">
        <div class="pic350"><img src="/Americas/DomRepublic/images/ParaPalma.jpg" width="200" height="150" alt="Paradisus Palma Real"></div>
    </div>
    <div class="hotels-desc">
        <h3>Paradisus Palma Real<span class="five star"></span></h3>
        <p>Luxury, all-suite, beach-front resort. Beautiful Bavaro beach, calm sea ideal for children. Fine dining by top Michelin awarded chef. Internet rates include free green fees at Golf club. Casino. Royal Service: a hotel within a hotel for Adults Only; personal butler... </p>
        <a class="look-inside2" href="ParaPalma.html"><span>Details  -- Hotel website -- Rates</span></a>
    </div>
</div>

Then use the following styles to complement the HTML:

.hotels-cont{
    float: left;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
}

.hotels-cont *{
   box-sizing: border-box;
   -webkit-box-sizing: border-box;
}

.hotels{
    float: left;
    width: 25%;
    margin: 0 3% 0 0;
}

.hotels img{
    width: 100%;
    height: auto;
}

.hotels-desc{
    float: right;
    width: 72%;
    text-align: center;
}

.hotels-desc h3{
    margin: 0 0 1em 0;
}

.hotels-desc p{
    text-align: left;
    padding: 0;
}

And you’ll end up with this list effect:

It’s not exactly tidy, but it’s getting there.

Make sure any CSS I’ve used, that conflicts with your styles, overwrites your styles, otherwise they won’t kick in.

Update: Not sure how much you’d want this after apparently solving it, but, I guarantee it’ll work if implemented correctly.

[qim]

Hi Simon

Looks a lot better than mine.

I don’t know if it was the hair-cut that went wrong and half the brain went with it, or it’s just that I’m getting tired.

I will certainly start another page with your code,but it’ll wait till morning.

many, many thanks

[SamA74]

Well done @Simon just one amendment, prefix first, no-prefix last:-

.hotels-cont *{
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
}

[Simon]

I wrote it in like five minutes, gimme a break. Haha. Thanks.

[qim]

Still problems with my page (not Simon’s; that’ll be next):

I get a perfect central alignment in IE11, ok in Opera and Chrome, but totally out of place in FF…

Why is that?

[SamA74]

This is a simplified demo without all the additional styling, just to show the link centring.
Though Simon’s version is better, using a div around each hotel section instead of the <div class="clear"> hack to separate them.

@Simon

gimme a break. Haha.

Don’t sweat it, I would have been too lazy to even put the prefix in.

[qim]

Well, the image is certainly a lot better…

I’m going to leave it for the morning. Brain’s tired and bed beckons.

Thank you both!

[Simon]

Not to push my solution on you or anything, but mine is kinda semi-set-up to be fluid and responsive, so you’ll have more luck in the long run if you start with it. We can help where necessary.

[qim]

…and the winner is…

Thank you Simon.

I’'ll try it in the morning