I'm working on a responsive design, where I have an ID div on top, and in the rest of the page, I should have div buttons in each of the corners of the page (i.e., I should have 2x2 divs, two divs side-by-side on each row, first row aligned to top of page, second row to bottom of page) -- when in landscape view. (Something similar was discussed in Placing 4 html elements in every corner of a div, but I cannot find out how to apply that solution to my example here).
When in portrait view, the buttons' width should be about the size of the viewport width, and they should be below one another. I came up with the following example:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<script type="text/javascript">
</script>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
}
.testbtnholder {
border: 2px solid gray;
width: calc(100% - 1em);
height: calc(100% - 2em);
position: relative;
margin-top: 0px;
margin-left: 1em;
margin-right: 1em;
margin-bottom: 1em;
}
.testbtn {
border: 2px solid #FF9999;
width: calc(50% - 1em);
height: 5em;
/* line-height: 5em; // does vertical align to middle, but only for single-line text; http://phrogz.net/css/vertical-align */
position: absolute;
text-align: center;
/* top: 50%; margin-top: -2.5em; // should do vertical align to middle, but it doesn't */
}
@media all and (orientation:landscape) {
.testbtn:nth-child(even) {
right: 0;
}
/*nth-last-child(-n+2) - select 2 last items from the parent*/
.testbtn:nth-last-child(-n+2) {
bottom: 0;
}
}
@media all and (orientation:portrait) {
.testbtn {
position: relative;
width: calc(100%);
}
}
#dreport {
font-size: 0.76em;
}
</style>
</head>
<body>
<div id="dreport">Test text</div>
<div class="testbtnholder">
<div class="testbtn">Test <br/> one</div>
<div class="testbtn">Test two</div>
<div class="testbtn">Test three</div>
<div class="testbtn">Test <br/> four</div>
</div>
</body>
</html>
This example in landscape somewhat works in Chromium 48, but fails in Firefox 50 (below, left image is Chromium, right image is Firefox):
(In fact, if I add <!DOCTYPE html> at start of the HTML, also Chromium produces the same bad layout as FF!)
My problems/questions are:
- Even if I'm resetting margin/padding to 0 for
htmlandbody, and then explicitly settingmargin-leftandmargin-rightfor.testbtnholder, in both FF and Chromium I get some sort of a left margin which "pushes" the rest of the layout, and so scrollbars appear. How can I set the margins explicitly, so I don't have to rely onoverflow:hidden;to hide scrollbars (and so the borders of.testbtnholderappear horizontally centered in the page)? - I'd like the text in the div buttons to be centered both horizontally and vertically; I have already achieved horizontal centering with
text-align: center, but cannot get vertical centering (withvertical-align: middle) to work - How can I get Firefox to render the same image as Chromium ( the FF rendering problem is possibly described in Positioning problems in Firefox? position:relative for a display:table element )
- Is there a better layout approach than the one I've taken here? For instance, switching position of
absolutetorelativedepending on orientation seems a bit of hack to me, so would it be better using a flex box layout? I've looked at https://css-tricks.com/snippets/css/a-guide-to-flexbox/, but it is a bit too much for me to grok at the moment - so in case flexbox is more applicable here, how could I rewrite the HTML/CSS for this example to use flexbox?
Otherwise, in portrait mode, the layout generally works (apart from the margin problem):
