Trying to understand flexible box

I finally got my home page working and I copied the code to use it as a template and now I am realizing that I don’t understand how things work and I can’t easily paste all of that code here.

On my home page I use display:table and have one table cell as the main area and the other table cell for the aside.

In the main area I have one of those rotating box gizmos that rotates pictures or in my case text.

I set this rotator to 832px wide, and it stays set at that width on a super-wide screen. And when the width shrinks (e.g. on smart phone) the box turns flexible and keeps getting narrower.

This all works nicely.

Now I want to create an article template that behave in a similar manner. That is, it should be 832px wide and not expand more if the viewport expands, but if the screen gets narrower, then I want the article to be flexible and get skinner.

I am not seeing how my home page works based on code like this…

#solutionsOutermost {    width: 832px;}

Please help me understand what is going on!

The line of CSS that you posted is not fluid, it is fixed (obviously).

Please give us a bigger picture… more information/code.

Yes, I agree the code I posted and the results I am seeing do not match. And hopefully you can understand why I don’t want to post my entire code base.

Things are further complicated because my home page has this really complicated rotator thing that I just added on but did not code, plus that complicated horizontal box thing you helped me create this past fall. Remember?

Let’s pretend this is a black box…

What kind of CSS would keep a box 832px wide, and when the parent expands it still stays at 832px, but when the parent shrinks, it shrinks with it?

That is what I am seeing, and took forgranted until I try to create the same effect from scratch on my other page.

Does that make sense?

.incredible-shrinkable-box {

The box is assumed to be a block object, not a table.

1 Like


I’m looking out “our” code from the past, and one thing I see is that I have two media queries. If things are under 876px then my div has…

        display: block;
        width: auto;                                            /* Set to fluid-width. */
        height: auto;
        text-align: left;

And if it is over 876px, then my div has…

        width: 832px;                                            /* Set to fixed width. */

I think that is what I need to mimic for my article page…

I don’t quite follow the logic, but that could just be me tonight.

If there are only two states, why would one need two media queries?
Sorry, if I don’t remember the context.

If you have another specific question, I’ll try to help.

1 Like

No, just me assuming you follow more on limited information than you do.


I think I figured out my issue - that always seems to happen when I break down and start a thread!

I’m sure I’ll have more questions related to this! :smile:

Using max-width:832px ; instead of width:832px; as ronpat advised will do this without a media query.
Without a width set, the box width will be auto or 100% but will not go any bigger than 832px when the screen gets big.
max-width can also be used in conjunction with width to set the width when the screen is narrow. Eg:

.box {

will always give you a little background on the edge around the box when the screen is smaller than 832px. But it still won’t go bigger than 832px on the big screen. This is better than adding unnecessary media queries, try to keep them to a minimum by using fluid css like this.


Yep, I’m still learning this responsive design stuff.

Good suggestions!

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.