Creating a linked title inside a linked div - html

Question

I'd like to create a full-width header div that links to the top of the page and inside this div, there is the 'page title' that links to the home page.
Doing so, doesn't seem to work: https://jsfiddle.net/9wscc5yy/
<a href="www.example.com">
<div id="header" style="width:100%; background-color: #fff">
<a href="www.google.com">www.google.com
</a>
</div>
</a>
So I tried to create three divs next to each other with the middle div containing the 'page title' and the remaining two divs floating left and right. The result: https://jsfiddle.net/vef0tt07/
<div id="header">
<a href="www.example.com">
<div style="float: left; width: 40%; background-color:#fff">
</div>
</a>
<a href="www.example.com">
<div style="float: right; width: 40%; background-color:#fff">
</div>
</a>
<a href="www.google.com">
<div style="overflow:hidden; text-align: center;">
<strong>Title</strong>
</div>
</a>
</div>
The new issue is that I don't know how to let the side divs change width so that they always reach to the text of the 'page title'.
Is there a better way to create a linked title inside a linked div?
Thanks in advance for your time to help me.

Answer 1

Try this:
HTML
<header>
<h1>
link to top of page
</h1>
<h2>
link to home page
</h2>
</header>
CSS
header {
position: relative;
background-color: red;
height: 50px;
}
h1 {
margin: 0;
}
h1 > a {
display: block;
color: red;
}
h2 {
margin: 0;
background-color: yellow;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
DEMO
The background section (red) links to one place. The title in the middle (yellow) links to another place.
With absolute positioning, the h2 is set to remain perfectly centered in the header.
Update (based on comments)
In order to make the header fully responsive, with no artificial heights, and all links equal height regardless of content size, use flexbox.
It's actually very simple and requires minimal code.
HTML
<header>
</header>
CSS
header { display: flex; } /* establish flex container */
header > a { flex: 1; } /* make all flex items equal width */
DEMO
To learn more about flexbox visit:
Using CSS flexible boxes ~ MDN
A Complete Guide to Flexbox ~ CSS-Tricks
Note that flexbox is supported by all major browsers, except IE 8 & 9. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add all the prefixes you need, post your CSS in the left panel here: Autoprefixer.