Problem with container height

Question

Hi everyone, thanks for you help in advance.

I'm having a bit of a trying time with a container in a Google Webtoolkit app, for a vairiety of reasons I'm largely unable to control the html and inline CSS in this app so I'm having to find css only solutions to layout problems.

In this case I have a div tag which needs to have 100% height but a width of only 980px. When you apply a width to it the 100% height fails, when you remove the postion:fixed and top + right lines the container sits in the right place but has no height at all and the app won't work if the height is fixed.

The HTML output runs to over 1000 lines so I'm not sure posting it would help - any thoughts appreciated.

.cms-dash-tab-panel {
    height: 100%;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    position: fixed;
    top: 82px;
    right: 0px;
    border: 1px solid yellow;
}

Answer 1

You could try leaving it at 100% x 100%, but add a wrapper tag with a width of 980, and a 100% height. You might also try adding !important after your width & height, it helps override other CSS that is interfering, including inline CSS.