CODEWITHSUNDEEP
cssresponsive-designcss-floatlightboxfluid-layout
ogot
ogot

Reputation: 341

Responsive layout using inline:block and variable width

I am modifying a lightbox (Magnific Popup) layout to include a reponsive caption div. The aim is to have the caption float next to the photo, and then collapse beneath the photo when the window is resized.

I want the caption to have a minimum width of about 300px (the exact width is not important, this can be a percentage). If the window width cannot accommodate the combined width of the photo (which varies from photo to photo) + the width of the caption, the caption should flow beneath the photo and span the full width of the photo, as you can see in this diagram -

enter image description here

The problem is this:

I have tried to use display:inline-block on both divs but cannot get the caption div to resize after it collapses underneath the photo. Can this be done in CSS? I know this is possible with media queries, however in this particular case it will be hard to determine an exact breakpoint because each photo has a different width.

Very much appreciate any help or advice you may have. Thanks.

Upvotes: 0

Views: 1174

Answers (1)

Nicklas Nygren
Nicklas Nygren

Reputation: 2605

I think this would be easiest done with media queries. Set an arbitrary width, and have the caption float on the right when the window is wider, and make it 100% width when below. I.e:

/* Without media query */
.caption {
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    ...
}

@media (max-width: 640px) {
    .caption {
        position: static;
        width: 100%;
        ...
    }
}

I've illustrated this in a fiddle: http://jsfiddle.net/eczYP/.

Upvotes: 1

Related Questions