Buttons in WordPress Text Widget Won't Function Properly

Question

I'm trying to make two buttons to filter a category in a blog and place them in the sidebar of my site. So I put the entire code, style and html into a widget. They are simple links with images and hover. But somehow, the buttons appear inside the title bar of the next widget in the sidebar.

Here's the code:

<style>
a.filtro{
display:block;
width: 100px;
height: 100px;
float: left;
margin: 5px ;
background: url("http://www.tk.gvdgvd.net/wp-content/uploads/2014/04/tokooblog_filtro-02.png");
background-size:cover;
}

a.filtro:hover{
background: url("http://www.tk.gvdgvd.net/wp-content/uploads/2014/04/tokooblog_filtro_sel-02.png");
background-size:cover;
}

a.filtro2{
display:block;
width: 100px;
height: 100px;
float: left;
margin:5px;
background: url("http://www.tk.gvdgvd.net/wp-content/uploads/2014/04/tokooblog_filtro-03.png");
background-size:cover;
}


a.filtro2:hover{
background: url("http://www.tk.gvdgvd.net/wp-content/uploads/2014/04/tokooblog_filtro_sel-03.png");
background-size:cover;
}
</style>


<a href="http://www.tk.gvdgvd.net/?cat=25" class="filtro"></a>

<a href="http://www.tk.gvdgvd.net/?cat=10" class="filtro2">
</a>

I've tried many things in the css but i can't fix it, but still, it is a very weird behavior. I guess the new code is overwriting something in the style.css, but i can't tell what.

Answer 1

Try putting a float on the following class:

.main .sidebar .widget {
    float: left; //added float here
    margin-bottom: 35px;
}

When you float divs inside of another div, you either need to float the parent div OR put a div "clear" below your last floated element, like so:

<a href="http://www.tk.gvdgvd.net/?cat=10" class="filtro2"></a>
<div style="clear: both;"></div>

Otherwise you'll get the spillover you're seeing now.