Simple page in two halves

HTML & CSS
1

I am trying to create a page which takes up the full screen real estate and is divided into 2 equal parts with the contents of each half centred vertically and horizontally. I’m mostly there using flex, but it doesn’t take up the whole screen. Any words of wisdom? Thanks

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>No title</title>
<style>
html,
body {
	margin: 0;
	padding: 0;
	width: 100%;
	font: 1.5rem Arial, Helvetica, sans-serif;
}
a {
	text-decoration: none;
}
.halves {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	width: 100%;
	height: 100%;
}
.hleft,
.hright {
	flex: 1 1 100%;
	text-align: center;
	padding: 50px 10px;
}
.hleft {
	color: #336666;
}
.hright {
	background: #336666;
	color: #ffffff;
}
</style>
</head>
<body>
<div class="halves">
  <a href="en/" title="English site">
    <div class="hleft">
      <div class="lang">English</div>
    </div>
  </a>
  <a href="it/" title="sito Italiano">
    <div class="hright">
      <div class="lang">Italiano</div>
    </div>
  </a>
</div>
</body>
</html>
2

See if this is closer.

(I really don’t like that the anchor is around the entire box. I click that sucker every time. )

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>No title</title>
<!--
https://www.sitepoint.com/community/t/simple-page-in-two-halves/228586
gandalf458
Jun 28,2016 2:31 AM
-->
    <style>
html,
body {
    width:100%;
    height:100%;
    font:1.5rem Arial, Helvetica, sans-serif;
    padding:0;
    margin:0;
}
.halves {
    display:flex;
    flex-direction:row;
    flex-grow:1 1 100%;
    height:100%;
}
.hleft,
.hright {
    flex-direction:column;
    flex-basis:50%;
    text-align:center;
    padding:50px 10px;
}
.hleft {
    color:#366;
}
.hright {
    background:#366;
    color:#fff;
}
.lang {
    outline:1px solid pink;
}
a {
    text-decoration: none;
}
    </style>
</head>
<body>

<div class="halves">
  <a class="hleft" href="en/" title="English site">
    <div>
      <div class="lang">English</div>
    </div>
  </a>
  <a class="hright" href="it/" title="sito Italiano">
    <div>
      <div class="lang">Italiano</div>
    </div>
  </a>
</div>

</body>
</html>
1 Like
3

Hi @ronpat. Thanks squire. That’s more like it. I keep moving the anchor and yes perhaps it does cover too much of the area. Cheers mate

1 Like
4

I guess it depends on habit.

For me I usually click on a “non-active” part of a page to give the page focus and then use the mouse wheel to scroll.

I guess if I went for the browsers scrollbar or used arrow keys I wouldn’t have the problem I sometimes have with “non-obvious-active” sections of pages.

Hotmail is bad in this way. Almost everything is a link and it took me a while to figure out where on a page it was safe to click so I could scroll.

3 Likes
5

One thing, I see there is some blank space below the lang div which means the words don’t get centred vertically. I can’t figure out where it’s coming from…

6

Is this something like?

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>No title</title>
        <style>
            html,
            body {
                padding: 0;
                font: 1.5rem Arial, Helvetica, sans-serif;
            }
            a {
                text-decoration: none;
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .halves {
                display: flex;
                flex-direction: column;
                align-items: stretch;
                justify-content: space-between;
                height: 100vh;
            }
            .hleft,
            .hright {
                flex: 1 1 50%;
                text-align: center;
            }
            .hleft a {
                color: #336666;
            }
            .hright a{
                background: #336666;
                color: #ffffff;
            }
        </style>
    </head>
    <body>
        <div class="halves">
            <div class="hleft">
            <a href="en/" title="English site">
                <span class="lang">English</span>
            </a>
            </div>
            <div class="hright" lang="it">
            <a href="it/" title="sito Italiano">
                <span class="lang">Italiano</span>
            </a>
            </div>
        </div>
    </body>
</html>

The problem you had was you apply the flex properties flex: 1 1 100% to elements that are not direct descendants of the flex parent container. Though I made a few other alterations to the html and css.

2 Likes
7

Thanks Sam. The two halves don’t seem to take up 50% of the height each. But knowing where the error lies I can play some more. Flex always seems a matter of trial and error to me!

It doesn’t help that I started with the two divs next to each other and now I have one on top of the other, so hleft and hright don’t mean what they originally did! :slight_smile:

8

Where, in my example?
Looking again, it wants margin: 0 on the body to not exceed screen height.
They should be equal height, but in full-screen, the top one looks bigger, but I think it’s an optical illusion because of the backgrounds. In inspect they are equal.

1 Like
9

This is what I got just copying and pasting your code. I’ve not had a chance to play with it yet - and now it’s time for a 3 hour lunch break! :wink:

800×452 6.99 KB

10

That’s odd, this is what I see in Firefox on Windows.

855×560 3.59 KB

11

This is the “look” gandalf458 is after, but I’m not sure what is supposed to be clickable. Right now, each box is clickable.

Oh, table-ware, Oh, table-ware… to the tune of “Oh, Tannenbaum” 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>No title</title>
<!--
https://www.sitepoint.com/community/t/simple-page-in-two-halves/228586
gandalf458
Jun 28,2016 2:31 AM
-->
    <style>
html,
body {
    width:100%;
    height:100%;
    font:1.5rem Arial, Helvetica, sans-serif;
    padding:0;
    margin:0;
}
.halves {
    display:table;
    height:100%;
    width:100%;
}
.hleft,
.hright {
    display:table-cell;
    text-align:center;
    padding:50px 10px;
}
.hleft {
    color:#366;
}
.hright {
    background:#366;
    color:#fff;
}
.lang {
}
.hleft > div,
.hright > div {
    display:table;
    width:100%;
    height:100%;
}
.lang {
    display:table-cell;
    vertical-align:middle;
/*    outline:1px solid pink;  /* Test Outline */
}
a {
    text-decoration:none;
}
    </style>
</head>
<body>

<div class="halves">
  <a class="hleft" href=#en/" title="English site">
    <div>
      <div class="lang">English</div>
    </div>
  </a>
  <a class="hright" href="#it/" title="sito Italiano">
    <div>
      <div class="lang">Italiano</div>
    </div>
  </a>
</div>

</body>
</html>
2 Likes
12

OK, looked in Chrome and it’s like yours.

13

Ah-ha. That’s what I get in Firefox, but in a Chrome derivative I get the previous result.

14

Yup, sometimes flex is overkill, when dependable display table will do.

2 Likes
15

But still… that shouldn’t have been a difficult exercise.

I want to figure out what I was doing wrong. My pegboard brain isn’t wired for flexbox logic yet

16

I’m curious why it fails in Chrome, but works in FF. :confused:

17

Oh, it’s the height:100% on the a come unstuck with that one before. Maybe needs an actual height on the containing div, rather than just flex-basis to satisfy Chrome.

18

AFAIK not everything has made it out of the vendor prefix stage.

i.e.

Chrome may need the -webkit- prefix
Firefox may need the -moz- prefix

1 Like
19

bummer

20

That’s it

.hleft,
.hright {
                box-sizing: border-box;
                height: 50%;
                flex: 1 1 50%;
                text-align: center;
            }
1 Like