Q:

div inside a href ruins styling

I use laravel framework. $var->title makes 2 different buttons next to each other.
So i had this code
<div class="header-button btn form-control">
   <a href="{{$var->writefullurl}}">
       {{($var->title)}}
   </a>
</div>

The code worked fine, except the top and bottom of the button wasn't clickable.
I tried to change the code to this, for some weir reason it ruined the CSS.
<a href="{{$var->writefullurl}}">
   <div class="header-button btn form-control">
     {{($var->title)}}
   </div>
</a>

CSS:
a {
    color: #337ab7;
    text-decoration: none;
}
.form-control {
    border-color: #00aae4;
    padding-top: 10px;
    border-radius: 2px !important;
    border-width: 1px;
    margin-bottom: 10px;
    height: 45px;
}

Any help would be appreciated!

A:

you don't need to change the html code order, what you can do is change the element you set the padding such as:
.form-control a {
    color: #337ab7;
    text-decoration: none;
    padding-top: 10px;
    height: 45px;
    display: inline-block;
}
.form-control {
    border-color: #00aae4;
    border-radius: 2px !important;
    border-width: 1px;
    margin-bottom: 10px;
}

note: make sure to have display: inline-block on the a tag so that the padding can be applied

