CODEWITHSUNDEEP
htmlcss
Wooz
Wooz

Reputation: 306

Mixing px and % when layouting divs in css

I want to realize a layout with 4 divs (screenshot). menu should be 180px wide and 78% (because I have used the top 21% of the screen for other content) of screen high, while the width of the field1_top should be the rest of the screen and it's height be 38% of the screen. The gap between menu and the others should be 1% of screensize.

My current best solution is:

div.menu{width:180px;height:78%;position:absolute;overflow:auto;left:1%;top:21%}
div.field1_top{width:84%;height:38%;position:absolute;overflow:auto;left:15%;top:21%}
div.field1_bottom_left{width:30%;height:38%;position:absolute;overflow:auto;left:15%;top:61%}
div.field1_bottom_right{width:53%;height:38%;position:absolute;overflow:auto;left:46%;top:61%}

Obviously this will make the gap between "menu" and the other divs variable: in small screen sizes the other boxes run into the menu and in large screens sizes the gap gets too large...

I already tried to solve this with a table around the divs or with block-level elements like in "Issue mixing px and % for responsive layout". The problem I had there is that then the other divs took the height and width they needed for their content and grew very large. But I don't want the screen to be scrolled but have all the scrollbars in the divs, if they become necessary.

This is my first question and I hope I managed to explain my problem that it could be understood. Of course I would be happy if anyone could help me.

Upvotes: 0

Views: 37

Answers (1)

Marek
Marek

Reputation: 559

You can use this solution: https://stackoverflow.com/a/1763906/4810983

Alternatively, you can try calc: https://css-tricks.com/a-couple-of-use-cases-for-calc/ So you will have something like:

div.field1_top {
    width:calc(100% - 220px);
    height:38%;
    position:absolute;
    overflow:auto;
    left:200px;
    top:21%
}

Upvotes: 1

Related Questions