Buttons in WordPress Text Widget Won't Function Properly

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.

Solutions

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.

Tags: Html / Css / Wordpress

Similar questions

WooCommerce Lightbox, Ordering and +/- buttons won't work
I am a webdesigners and I want to make a webshop with WooCommerce. I use my own styles and everything is good, but a few things won't work. The WooCommerce lightbox doesn't work, if you click on a image it goes to the page of the image and it doesn't open in a lightbox. The WooCommerce ordering on the shop page doesn't work either, if you change th...
How to align buttons properly
I am using below code on my function.php file to display two buttons. This is working fine but those buttons alignment is not coming properly as you can see on small screen. May I know how can we create different class/div so that they appear smaller and align properly. Thanks, Avinash
PHP
Ajax buttons not working properly in WooCommerce when using wc_get_template_part
I have a custom loop on my website home page of best selling products. I am using wc_get_template_part('content', 'product'); to pull in the products. But when I click the buy button, the buy button does not get the tick added to it, so it doesn't look the purchase has worked for users. The item is added to the cart. The buttons work as they should...
Pictures won't display in media library and also won't show preview when selected
I have done the plug in, check permissions (upload folder which contains files for the media contents is 755), clearing cache (there was none, apparently), disable any extra plug-ins, check and uncheck things, nothing. I did upload everything thru wordpress. I checked bluehost server status, and it is up. even for my particular username. On my phon...
PHP file won't pass Wordpress Variable Properly
Have a really weird problem and can't figure out. I'm using 'UPLOADIFY' to upload images from a small web app. It was working perfectly for months, then all of a sudden stopped working. Ideally I want to grab the logged in Wordpress user's username and add it to the image filename. Here is part of my uploadify file: Then later in uploadify I have: ...
Nginx "auto .dev" setup won't load WordPress properly
Following this guide (http://blog.evan.pro/how-to-set-up-dynamic-virtual-hosts-for-web-development), I'm trying to set up a localhost / nginx config that allows me to easily run environments without adding an individual entry for each (with the help of dnsmasq). When I run nginx and access either site by sitename.dev, the sites that are using WordP...

Also ask

We use cookies to deliver the best possible experience on our website. By continuing to use this site, accepting or closing this box, you consent to our use of cookies. To learn more, visit our privacy policy.