Make a <a><div></div></a> responsive?-CodePudding

I have 3 <div>'s in a row. The first two are wrapped around with a <a>-link. These are not responsive anymore. I try to do this with plain html and css. How can I make them responsive like the last one? This is my code:

(here is a codepen.io link to my problem: https://codepen.io/NiklasG/pen/oNoPVNL)

HTML:

<main>
  <div id= container>
    <a><div ></div></a>
    <a><div ></div></a>
    <div ></div>
  </div>
</main>

CSS:

main{
  padding: 30px;
}

#container{
  display: flex;
  align-items: center;
  justify-content: center;
}

.tile{
  width: 400px;
  height: 100px;
  border-style: dashed;
}

Thanks for helping :)

CodePudding user response：

As I understand from your question you want a to fill the whole div. As mentioned by Ron. <a><div></div></a> not valid HTML a should be inside of div

1-) First put a inside of div

<main>
  <div id= container>
    <div ><a></a></div>
    <div ><a></a></div>
    <div ></div>
  </div>
</main>

2-) Instead of using px use percentages

.tile{
  width: 33%;
  height: 100px;
  border-style: dashed;
}

3-) then add this CSS to make a to fill the content.

a{
  display: inline-block;
  width: 100%;
  height: 100%;
}

4-) Use media queries to make it responsive

@media screen and (max-width: 600px) {
  .tile{
    width: 100%;
    background: red;
  }
  #container{
    display: block;
  }
}

This is the code pen link you can look https://codepen.io/kaanatesel/pen/JjOazWK

CodePudding user response：

Alternative, you can use grid layout to create 3 columns responsive on your #container.

I have change your class title for title__container

Possible example:

a {
  color: black;
  text-decoration: none;
}

main {
  padding: 30px;
}


/* You can better use grid */

#container {
  margin: 0 auto;
  display: grid;
  /*optional*/
  /*gap: 1rem;*/
  grid-template-columns: repeat(3, 1fr);
  height: 100px;
}

#container .title__container {
  width: 100%;
  max-width: 400px;
  height: 100%;
  border-style: dashed;
  /* you can use flex here if you want */
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

<main>
  <div id=container>
    <a class='title__container' href='#'>
      <h2>Title 1</h2>
    </a>
    <a class='title__container' href='#'>
      <h2>Title 2</h2>
    </a>
    <div >
      <h2>Title 3</h2>
    </div>
  </div>
</main>