How to Make Whole DIV a Link - html

Question

I want to make a minimal landing page, where a whole screen is divided into 2 with text links to click through to each part of the site.
I figured out this much:
https://jsfiddle.net/m2ne5f3b/
I used 2 halves to create the divide, using a border on one side to create the line in the middle. It's super rudimentary.
.left-half {
position: absolute;
left: 0px;
width: 50%;
border-style: solid;
border-width: 1px;
border-left: none;
border-top: none;
border-bottom: none;
}
.right-half {
position: absolute;
right: 0px;
width: 50%;
}
Now what I want to do is make the whole of each half clickable, instead of the text only. Tried a couple different options to no avail. Any suggestions?

Answer 1

Just make the <a> the block! There is absolutely no need to use JS for this.
<a href="http://www.google.com" class="left-half">
<article>
<p>Google</p>
</article>
</a>
Then just style your <a> as a block because you are setting the height in your .left-half class, <a> elements are inline by default, so to make the height work, you need to make it a block:
.container a {
display: block;
// add any other CSS you want to apply
}
Working Snippet: Your Google looks exactly like the Youtube one in this, excelt that the whole block is now the link:
* {
box-sizing: border-box;
}
body {
font-size: 18px;
font-family: 'Cormorant Garamond', serif;
font-style: italic;
line-height: 150%;
text-decoration: none;
}
a.left-half {
height: 100%;
display: block;
}
section {
color: #000;
text-align: center;
}
div {
height: 100%;
}
article {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
padding: 20px;
}
.container {
display: table;
width: 100%;
}
.left-half {
position: absolute;
left: 0px;
width: 50%;
border-style: solid;
border-width: 1px;
border-left: none;
border-top: none;
border-bottom: none;
}
.right-half {
position: absolute;
right: 0px;
width: 50%;
}
a {
color: inherit;
text-decoration: none;
}
<section class="container">
<a href="http://www.google.com" class="left-half">
<article>
<p>Google</p>
</article>
</a>
<div class="right-half">
<article>
<p>YouTube</p>
</article>
</div>
</section>

Answer 2

If you do not wish to mofify your HTML structure, then you can use a pseudo to fill the entire area to be responding as the link.https://jsfiddle.net/m2ne5f3b/7/
* {
box-sizing: border-box;
}
body {
font-size: 18px;
font-family: 'Cormorant Garamond', serif;
font-style:italic;
line-height: 150%;
text-decoration: none;
}
section {
color: #000;
text-align: center;
}
div {
height: 100%;
}
article {
display:table-cell;
text-align:center;
vertical-align:middle;
}
.container {
}
.left-half {
position: absolute;
display:table;
top:0;
left: 0px;
width: 50%;
border-style: solid;
border-width: 1px;
border-left: none;
border-top: none;
border-bottom: none;
}
.right-half {
position: absolute;
top:0;
right: 0px;
width: 50%;
display:table;
}
a { color: inherit;
text-decoration: none;}
a:before {
content:'';
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
}
}
<section class="container">
<div class="left-half">
<article>
<p>Google</p>
</article>
</div>
<div class="right-half">
<article>
<p>YouTube</p>
</article>
</div>
</section>
Note: if the page is meant to be 2 links side by side with little styling, then the html can be reduced to 2 links
html {
height: 100%;/* necessary for the table-layout box model demo */
width: 100%;/* necessary for the table-layout box model demo */
display: table;/* necessary for the table-layout box model demo */
table-layout: fixed;/* necessary for the table-layout box model demo */
border-collapse: collapse;
background: tomato;
}
body {
display: table-row;/* necessary for the table-layout box model demo */
}
a {
display: table-cell;/* necessary for the table-layout box model demo */
text-align: center;/* necessary for the table-layout box model demo */
vertical-align: middle;/* necessary for the table-layout box model demo */
box-shadow: 0 0 0 1px;
text-decoration: none;
color: black;
font-size: 40px
}
a:nth-child(odd) {
background: rgba(255, 114, 25, 0.5);
}
Google
YouTube

Answer 3

your common a tags arent going to cut it here. Your best bet is to use Javascript or jquery function calls on the divs.
<div class='left-half' onclick="fakeLink()" >
<!-- some stuff here in the div -->
</div>
then in the script file
function fakeLink() {
window.location = "http://www.yoururl.com/link";
}

Answer 4

* {
box-sizing: border-box;
}
body {
font-size: 18px;
font-family: 'Cormorant Garamond', serif;
font-style:italic;
line-height: 150%;
text-decoration: none;
}
section {
color: #000;
text-align: center;
}
div {
height: 100%;
}
article {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
padding: 20px;
}
.container {
display: table;
width: 100%;
}
.left-half {
position: absolute;
left: 0px;
width: 50%;
border-style: solid;
border-width: 1px;
border-left: none;
border-top: none;
border-bottom: none;
}
.right-half {
position: absolute;
right: 0px;
width: 50%;
}
a { color: inherit;
text-decoration: none;}
<section class="container">
<a href="http://www.google.com">
<div class="left-half">
<article>
<p>Google</p>
</article>
</div>
</a>
<a href="http://www.youtube.com">
<div class="right-half">
<article>
<p>YouTube</p>
</article>
</div>
</a>
</section>