CSS内联块宽度问题

Question

I have a page with a container div, this container div has two columns, both inline-blocks. One column (left Hand side (LHS)) is the ticbox selection for a shopping catalogue, the right column is the output of the chosen selection.

The issue I have is that each is assigned a width based on percentage of the parent width, the left - fixed column is 20% width, the right, output column is 79% width (I tend to allow 1% for variability) . BUT: the left column needs a minimum width - defined in px as 155px; The right hand side (RHS) column is filled with inline-blocks for each product displayed by the catalogue search. These blocks are fixed width (140px)

MY ISSUE: When the page loads on my screen it's fine, but when:

LHS: min-width:155px < width:20%

(the browser window is resized)

The whole of the right hand side drops below the content of the left hand side (as the width for it is less than the required 79%.

Some simple example: Please note there is no borders or paddings to be considered when measuring widths.

HTML:

<div id="container">
    <div class="leftsideMenu">Menu column.</div>
    <div class="rightsideShop">Shop Contents</div>
</div> 

CSS:

#container{
    width:80% /* of screen */
    min-width:555px; /*should leave 400px for shop contents */
}

.leftsideMenu {
    display:inline-block;
    width:20%;
    min-width:155px;
    vertical-align:top;
}

.rightsideShop{
    display:inline-block;
    width:79%;
    max-width:calc(100% - 156px) !important; /* fix attempt - doesn't appear to work */
    vertical-align:top;
}

[Some] ATTEMPTED FIXES (not in order of attempt):

1) Calc to make the max-width always less than 100%-155, doesn't appear to work

2) Floats and margins : this does work but presents the problem of layout that the client doesn't want shoes underneath the LHS column and float height = 100% parent is another issue,

3) I have also tried to use https://stackoverflow.com/a/6350781/3536236 answer to a similar question - with the approach of having the RHS relative and using a forced LHS margin but this doesn't work as the solution linked here didn't work for me in this situation.

4) I think flex-box style working is probably a best way forward but I do not know enough about it, and to be brutally honest, I was hoping to avoid a massive reworking of the page CSS. (I had originally expected this issue to be 30minutes!).

5) Setting no width (just max-width) for RHS - to auto defined width, this auto defines to 100% and goes underneath the left hand side column.

I think the answer is pretty simple but I can't see it :(.

To explain parts for the points above, the LHS was originally a float and that worked fine but the client wanted no products appearing underneath the menu in the LHS column, so I thought - ah simple, make it an inline Block....

Any help as to keeping the right hand side giving the left hand side the space it needs, even upon screen resizing?

............

OH FOR FFFFFFFF SAKE -- I have just written this all out, and while I've been writing this have been trying different ideas as they've occured and it's finally worked:

Now after all this effort for writing this out I want to post it anyway, but the Solution is below!!!

Answer 1

OH FOR FFFFFFFF SAKE -- I have just written this all out, and while I've been writing this have been trying different ideas as they've occured and it's finally worked:

For some reason my calc works with:

 max-width:calc(100% - 160px); Giving a spare space of 5px . 

Any ideas why this is so, as I say, within the container div standard widths are percentages and there is some padding in the product container (inline-blocks) inside the RHS, but this really shouldn't have influenced having to add more "padding" space in the calc method.

Anyway, it works now. I'm happy. Maybe this will help someone?

Answer 2

With inline-block you will have some whitespace taking up some space in your layout.

Two inline-block divs with a width of 400px in a container div of 800px won't always render next to each other.

You can fix this by making sure the closing tag of an element is directly next to the opening tag of the next element in the HTML (eg </div><div> , no newlines or spaces).

A better option is to apply font-size: 0 to the containing element and then reset the font-size to eg 1rem for the inline-block elements.