Html - div inside hyperlink does not fill the entire space

NataliaKaczyska
July 10, 2024
218 views
0 votes
2 Answers

I am learning HTML. I have this problem if I add a div inside the hyperlink, the color of this block is cut off.

This is what’s is supposed to look like:

But at mine, this looks like this (for example for the second on the right blue div):

at mine

If I hover the mouse to the place where the blue color is missing, I can click on it and I can go on to another.
Why is there such a problem?

body {
  background-color: #303030;
  color: #ffffff;
  font-family: "Lato", sans-serif;
  font-size: 20px;
}

#container {
  width: 1000px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
}

.rectangle {
  width: 960px;
  margin: 20px;
  display: flex;
  clear: both;
  text-align: center;
}

.square {
  display: flex;
  flex-direction: row;
  width: 50%;
  margin-bottom: 40px
}

#logo {
  font-family: "Josefin Sans", sans-serif;
  font-size: 70px;
  width: 600px;
  text-align: left
}

#zegar {
  font-family: "Josefin Sans", sans-serif;
  font-size: 70px;
  text-align: left
}

#square1 {
  display: grid;
  grid-template-columns: 250px 250px;
  grid-template-rows: 162px 162px 172px;
}

.tile1 {
  margin: 10px;
  background-color: #3095d3;
  text-align: center
}

.tile1:hover {
  background-color: #2084c2;
}

.tile2:hover {
  background-color: #555555;
}

.tile3:hover {
  background-color: #82b637;
}

.tile2 {
  margin: 10px;
  background-color: #666666;
  text-align: center
}

.tile3 {
  margin: 10px;
  background-color: #93c748;
  text-align: center
}

.tile4 {
  margin: 10px;
  background-color: #ee5a32;
  grid-column: span 2;
  text-align: center;
  font-size: 26px;
  padding: 30px;
  line-height: 150%;
}

#square2 {
  display: grid;
  grid-template: 324px 172px / repeat(4, 120px);
}

.tile5 {
  margin: 10px;
  grid-column: span 4;
  background-color: #666666;
  text-align: center;
  text-align: justify;
  padding: 30px
}

.yt:hover {
  background-color: #c83237;
}

.fb:hover {
  background-color: #3557a2;
}

.gplus:hover {
  background-color: #c84222;
}

.tw:hover {
  background-color: #2084c2;
}

.yt {
  margin: 10px;
  background-color: #d94348;
}

.fb {
  margin: 10px;
  background-color: #4668b3;
}

.gplus {
  margin: 10px;
  background-color: #d95333;
}

.tw {
  margin: 10px;
  background-color: #3095d3;
}

a.tilelink {
  color: #ffffff;
  text-decoration: none;
  display: block;
  width: 100%;
  height: 100%;
}

<div id="container">
  <div class="rectangle">
    <div id="logo">Jan Kowalski</div>
    <div id="zegar">12:00:00</div>
  </div>
  <div class="square">
    <div id="square1">
      <div class="tile1">
        <a href="kimjestem.html" class="tilelink"><i class="icon-user"></i><br />Kim jestem?</a>
      </div>
      <a href="oferta.html">
        <div class="tile1">
          <i class="icon-laptop"></i><br />Co oferuję?
        </div>
      </a>
      <div class="tile2">
        <i class="icon-graduation-cap"></i><br />CV
      </div>
      <div class="tile3">
        <i class="icon-mail"></i><br />Kontakt ze mną
      </div>
      <div class="tile4">
        <i>Talk me cheap. Show me the code!</i><br /> - Linus Torvalds, twórca Linuxa
      </div>
    </div>
    <div id="square2">
      <div class="tile5">
        Tytuł podstrony<br /><br /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc gravida dictum odio non interdum. Pellentesque volutpat ultrices porttitor. Donec hendrerit lectus interdum, tristique mi a, feugiat dui. Fusce leo mi, mattis
        ornare efficitur sit amet, dapibus et odio. Mauris id facilisis neque, ut accumsan libero. Donec sed nunc quam.
      </div>
      <div class="yt">
        <i class="icon-youtube"></i>
      </div>
      <div class="fb">
        <i class="icon-facebook"></i>
      </div>
      <div class="gplus">
        <i class="icon-gplus"></i>
      </div>
      <div class="tw">
        <i class="icon-twitter"></i>
      </div>
    </div>
  </div>
  <div class="rectangle"> 2015 &copy; Jan Kowalski - portfolio. Programista webowy zaprasza do współpracy.
    <i class="icon-mail-alt"></i>[email protected]
  </div>
</div>

Answers

The issue is, that a div’s default height is auto and will be calculated to fit-content. I see no need to use a div in the first place and not use the anchor as a container.

If you ant to sue the div, you can make use of Flexbox. You set the anchor as column.flexbox by adding display; flex; flex-direction: column. This allows you to use flex-grow: 1 on the div to let it take all remaining space.

body {
  background-color: #303030;
  color: #ffffff;
  font-family: "Lato", sans-serif;
  font-size: 20px;
}

#container {
  width: 1000px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
}

.rectangle {
  width: 960px;
  margin: 20px;
  display: flex;
  clear: both;
  text-align: center;
}

.square {
  display: flex;
  flex-direction: row;
  width: 50%;
  margin-bottom: 40px
}

#logo {
  font-family: "Josefin Sans", sans-serif;
  font-size: 70px;
  width: 600px;
  text-align: left
}

#zegar {
  font-family: "Josefin Sans", sans-serif;
  font-size: 70px;
  text-align: left
}

#square1 {
  display: grid;
  grid-template-columns: 250px 250px;
  grid-template-rows: 162px 162px 172px;
}

.tile1 {
  margin: 10px;
  background-color: #3095d3;
  text-align: center
}

.tile1:hover {
  background-color: #2084c2;
}

.tile2:hover {
  background-color: #555555;
}

.tile3:hover {
  background-color: #82b637;
}

.tile2 {
  margin: 10px;
  background-color: #666666;
  text-align: center
}

.tile3 {
  margin: 10px;
  background-color: #93c748;
  text-align: center
}

.tile4 {
  margin: 10px;
  background-color: #ee5a32;
  grid-column: span 2;
  text-align: center;
  font-size: 26px;
  padding: 30px;
  line-height: 150%;
}

#square2 {
  display: grid;
  grid-template: 324px 172px / repeat(4, 120px);
}

.tile5 {
  margin: 10px;
  grid-column: span 4;
  background-color: #666666;
  text-align: center;
  text-align: justify;
  padding: 30px
}

.yt:hover {
  background-color: #c83237;
}

.fb:hover {
  background-color: #3557a2;
}

.gplus:hover {
  background-color: #c84222;
}

.tw:hover {
  background-color: #2084c2;
}

.yt {
  margin: 10px;
  background-color: #d94348;
}

.fb {
  margin: 10px;
  background-color: #4668b3;
}

.gplus {
  margin: 10px;
  background-color: #d95333;
}

.tw {
  margin: 10px;
  background-color: #3095d3;
}

a.tilelink {
  color: #ffffff;
  text-decoration: none;
  display: block;
  width: 100%;
  height: 100%;
}

a {
  display: flex;
  flex-direction: column;
  > div {
    flex-grow: 1;
  }
}

<div id="container">
  <div class="rectangle">
    <div id="logo">Jan Kowalski</div>
    <div id="zegar">12:00:00</div>
  </div>
  <div class="square">
    <div id="square1">
      <div class="tile1">
        <a href="kimjestem.html" class="tilelink"><i class="icon-user"></i><br />Kim jestem?</a>
      </div>
      <a href="oferta.html">
        <div class="tile1">
          <i class="icon-laptop"></i><br />Co oferuję?
        </div>
      </a>
      <div class="tile2">
        <i class="icon-graduation-cap"></i><br />CV
      </div>
      <div class="tile3">
        <i class="icon-mail"></i><br />Kontakt ze mną
      </div>
      <div class="tile4">
        <i>Talk me cheap. Show me the code!</i><br /> - Linus Torvalds, twórca Linuxa
      </div>
    </div>
    <div id="square2">
      <div class="tile5">
        Tytuł podstrony<br /><br /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc gravida dictum odio non interdum. Pellentesque volutpat ultrices porttitor. Donec hendrerit lectus interdum, tristique mi a, feugiat dui. Fusce leo mi, mattis
        ornare efficitur sit amet, dapibus et odio. Mauris id facilisis neque, ut accumsan libero. Donec sed nunc quam.
      </div>
      <div class="yt">
        <i class="icon-youtube"></i>
      </div>
      <div class="fb">
        <i class="icon-facebook"></i>
      </div>
      <div class="gplus">
        <i class="icon-gplus"></i>
      </div>
      <div class="tw">
        <i class="icon-twitter"></i>
      </div>
    </div>
  </div>
  <div class="rectangle"> 2015 &copy; Jan Kowalski - portfolio. Programista webowy zaprasza do współpracy.
    <i class="icon-mail-alt"></i>[email protected]
  </div>
</div>

First, You have not written proper HTML for the div which contains the "Co oferuję?". I have added the anchor tag inside the div from outside the div. Also, you have missed the .tilelink class to add in the anchor tag. This will display the div block the same as others. I have added a.tilelink:hover { color: blue; } CSS to show blue color when hovering into the specific div.

body {
  background-color: #303030;
  color: #ffffff;
  font-family: "Lato", sans-serif;
  font-size: 20px;
}

#container {
  width: 1000px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
}

.rectangle {
  width: 960px;
  margin: 20px;
  display: flex;
  clear: both;
  text-align: center;
}

.square {
  display: flex;
  flex-direction: row;
  width: 50%;
  margin-bottom: 40px
}

#logo {
  font-family: "Josefin Sans", sans-serif;
  font-size: 70px;
  width: 600px;
  text-align: left
}

#zegar {
  font-family: "Josefin Sans", sans-serif;
  font-size: 70px;
  text-align: left
}

#square1 {
  display: grid;
  grid-template-columns: 250px 250px;
  grid-template-rows: 162px 162px 172px;
}

.tile1 {
  margin: 10px;
  background-color: #3095d3;
  text-align: center
}

.tile1:hover {
  background-color: #2084c2;
}

.tile2:hover {
  background-color: #555555;
}

.tile3:hover {
  background-color: #82b637;
}

.tile2 {
  margin: 10px;
  background-color: #666666;
  text-align: center
}

.tile3 {
  margin: 10px;
  background-color: #93c748;
  text-align: center
}

.tile4 {
  margin: 10px;
  background-color: #ee5a32;
  grid-column: span 2;
  text-align: center;
  font-size: 26px;
  padding: 30px;
  line-height: 150%;
}

#square2 {
  display: grid;
  grid-template: 324px 172px / repeat(4, 120px);
}

.tile5 {
  margin: 10px;
  grid-column: span 4;
  background-color: #666666;
  text-align: center;
  text-align: justify;
  padding: 30px
}

.yt:hover {
  background-color: #c83237;
}

.fb:hover {
  background-color: #3557a2;
}

.gplus:hover {
  background-color: #c84222;
}

.tw:hover {
  background-color: #2084c2;
}

.yt {
  margin: 10px;
  background-color: #d94348;
}

.fb {
  margin: 10px;
  background-color: #4668b3;
}

.gplus {
  margin: 10px;
  background-color: #d95333;
}

.tw {
  margin: 10px;
  background-color: #3095d3;
}

a.tilelink {
  color: #ffffff;
  text-decoration: none;
  display: block;
  width: 100%;
  height: 100%;
}
a.tilelink:hover {
  color: blue;
}

<div id="container">
  <div class="rectangle">
    <div id="logo">Jan Kowalski</div>
    <div id="zegar">12:00:00</div>
  </div>
  <div class="square">
    <div id="square1">
      <div class="tile1">
        <a href="kimjestem.html" class="tilelink"><i class="icon-user"></i><br />Kim jestem?</a>
      </div>
      
        <div class="tile1">
        <a href="oferta.html" class="tilelink">
          <i class="icon-laptop"></i><br />Co oferuję?
      </a>
        </div>
      <div class="tile2">
        <i class="icon-graduation-cap"></i><br />CV
      </div>
      <div class="tile3">
        <i class="icon-mail"></i><br />Kontakt ze mną
      </div>
      <div class="tile4">
        <i>Talk me cheap. Show me the code!</i><br /> - Linus Torvalds, twórca Linuxa
      </div>
    </div>
    <div id="square2">
      <div class="tile5">
        Tytuł podstrony<br /><br /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc gravida dictum odio non interdum. Pellentesque volutpat ultrices porttitor. Donec hendrerit lectus interdum, tristique mi a, feugiat dui. Fusce leo mi, mattis
        ornare efficitur sit amet, dapibus et odio. Mauris id facilisis neque, ut accumsan libero. Donec sed nunc quam.
      </div>
      <div class="yt">
        <i class="icon-youtube"></i>
      </div>
      <div class="fb">
        <i class="icon-facebook"></i>
      </div>
      <div class="gplus">
        <i class="icon-gplus"></i>
      </div>
      <div class="tw">
        <i class="icon-twitter"></i>
      </div>
    </div>
  </div>
  <div class="rectangle"> 2015 &copy; Jan Kowalski - portfolio. Programista webowy zaprasza do współpracy.
    <i class="icon-mail-alt"></i>[email protected]
  </div>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – div inside hyperlink does not fill the entire space

Answers