Creating a linked title inside a linked div

Question

I would like to create a full-sized div title that links to the top of the page and inside this div, there is a “page title” that links to the home page.

Doing this seems to not 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. Result: https://jsfiddle.net/vef0tt07/

<div id="header">

  <a href="www.example.com">
  <div style="float: left; width: 40%; background-color:#fff">
  &nbsp;
  </div>
  </a>

  <a href="www.example.com">
  <div style="float: right; width: 40%; background-color:#fff">
  &nbsp;
  </div>
  </a>

  <a href="www.google.com">
  <div style="overflow:hidden; text-align: center;">
  <strong>Title</strong>
  </div>
  </a>

</div>

The new problem is that I don’t know how to let the side divs change the width so that they always reach the page title text.

Is there a better way to create a linked title inside a linked div?

, .

Answer 1

:

HTML

<header>
    <h1>
        <a href="http://www.dell.com">link to top of page</a>
    </h1>
    <h2>
        <a href="http://www.google.com">link to home page</a>
    </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

() . () .

h2 , header.

---

( )

, , , flexbox.

.

HTML

<header>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
</header>

CSS

header { display: flex; }  /* establish flex container */
header > a { flex: 1; }    /* make all flex items equal width */

DEMO

---

flexbox, :

• CSS ~ MDN
• Flexbox ~ CSS-Tricks

---

, flexbox IE 8 9. , Safari 8 IE10, . , CSS : Autoprefixer.