CODEWITHSUNDEEP
htmlcss
emsieja
emsieja

Reputation: 186

HTML/CSS rendering issue

I have a simple example of an issue I ran upon. Note the two divs each has 5 buttons which should render at 20% width each. The first set goes beyond the bound and am not sure why. If you use the dev tools you can see that the div itself is the right size of 100% width. In the second set when the buttons are concatenated it works. Can anyone explain this?

jsfiddle Demo

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        .nav5 {
            white-space: nowrap;
         }
         .nav5 button {
             height: 50px;
             width: 20%;
         }
    </style>
 </head>
<body>
    <div class="nav5">
        <button>A</button>
        <button>B</button>
        <button>C</button>
        <button>D</button>
        <button>E</button>
    </div>
    <div class="nav5">
        <button>A</button><button>B</button><button>C</button><button>D</button><button>E</button>
    </div>
</body>
</html>

Upvotes: 0

Views: 234

Answers (2)

Milche Patern
Milche Patern

Reputation: 20492

Or you can 'float:left' your buttons

http://jsfiddle.net/AdeMU/1/

    .nav5 {
        white-space: nowrap;
    }
    .nav5 button {
        height: 50px;
        width: 20%;
        margin:0;
        float:left;
    }

Upvotes: 1

Mayur Manani
Mayur Manani

Reputation: 825

Even though you have specified white-space: nowrap; it collapses all the whitespaces into one, so it does not remove it entirely. You can use the second method you have specified or comment out the space in between.

Upvotes: 0

Related Questions