Make button same width as height

Question

I have a toolbar on the top of my website, which is a fixed div. In there I have another div, with some buttons in it:

|somethingsomething.com                                       |
---------------------------------------------------------------
|statusBar____________________________________________|buttons|
|rest of website                                              |

HTML:

<div class="statusBar">
    <div class="statusBarMenuButtons">
        <form class="homeButtonForm" action="?id=1" method="post"><button class="homeButton"></button></form>
        <form class="subscriptionsButtonForm" action="?id=2" method="post"><button class="subscriptionsButton"></button></form>
        <form class="searchButtonForm" action="?id=3" method="post"><button class="searchButton"></button></form>                   
    </div>
</div>

CSS:

div.statusBar{  
    position:fixed;
    top:0;
    width:100%;
    height:5%;
}

button{
    height:100%;
    margin-right:10px;
}

form{
    height:100%;
}

/* This is the same for all buttons, just different background-images */
button.homeButton{
    background:url(../resources/homeButton.png) no-repeat;
    background-size:auto 100%; /* width height */
}

Now, my problem is that I have no way of knowing which height the button will get, and therefore cannot know which width I should specify.

I have search a lot on this website and Google and found lots of answers about divs, also I found this jQuery:

<script type="text/javascript">
    var height = $('button.homeButton').height();
    $('button.homeButton').css({
        'width' : height + 'px';
    });
</script>

But it does not seem to work. I have pulled this snippet form here and thought maybe the problem was that I am using a button instead of a div.

Help is very much appreciated.

score 3 · Accepted Answer · answered Jan 21 '15 at 16:30

Try this Fiddle This Fiddle is with the class you wanted

var height = $('button.homeButton').height();
$('button').width(height);

div.statusBar {
    top:0;
    width:100%;
    height:5%;
}
button {
    height:100px;
    margin-right:10px;
}
form {
    height:100%;
}
/* This is the same for all buttons, just different background-images */
 button.homeButton {
    background:url(../resources/homeButton.png) no-repeat;
    background-size:auto 100%;
    /* width height */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="statusBar">
    <div class="statusBarMenuButtons">
        <form class="homeButtonForm" action="?id=1" method="post">
            <button class="homeButton"></button>
        </form>
        <form class="subscriptionsButtonForm" action="?id=2" method="post">
            <button class="subscriptionsButton"></button>
        </form>
        <form class="searchButtonForm" action="?id=3" method="post">
            <button class="searchButton"></button>
        </form>
    </div>
</div>

Result: http://imgur.com/vyIW5je. Does come closer, still 6px of though, any thoughts on that? EDIT: It looks like the margin is messing it up, if you look at the orange square. ANOTHER EDIT: Found problem, was using old version of `jQuery`. Current result is great, thank you! — ikhebgeenaccount, Jan 21 '15 at 16:36

score 1 · Answer 2 · answered Jan 21 '15 at 16:40

1

You don't need JS.

div.statusBar will take the height from child elements. If form or button don't have a fixed height, it won't work. Using height:5%; is taking height from body or html, which may be undefined.

Try adding a fixed height to div.statusBar

div.statusBar {
   height: 60px;
}

Also, add display: block; to the button to apply width and height properties correctly.

answered Jan 21 '15 at 16:40

alekstrust

175
1
11

The whole point of the `height:5%` in `div.statusBar` is to make sure that even on large or small screens the `statusBar` is the same size. With an absolute size this won't work. – ikhebgeenaccount Jan 21 '15 at 17:07

Make button same width as height

2 Answers2