CODEWITHSUNDEEP
htmlcsslayouthtml-lists
EasilyBaffled
EasilyBaffled

Reputation: 3882

CSS percent layout missizing

I am creating an HTML element with 4 elements in side of it. To accomplish this, the parent element is a <ul> and each of the 4 elements are <li>. The inner elements should take up a quarter of the hight and all of the width minus padding of the parent, so I gave the parent a definative size in px and the children are set with %. But instead the children end up only taking up half of the total space, why?

enter image description here

HTML

<ul class="content_selection_container">
    <li>
        <form name="search_form" class="search_form" id="FORM_3">
            <input type="text" name="search_input" class="search_bar" />
            <input type="submit" value="🔍" class="search_button" name="search_button"/>
        </form>
    </li>
    <li>
        <button class="content_selection_button">
            My Timeline
        </button>
    </li>
    <li>
        <button class="content_selection_button">
            relevent
        </button>
    </li>
    <li>
        <button class="content_selection_button">
            mentions
        </button>
    </li>
</ul>

CSS

content_selection_container{
    background-color:red;
    padding: 5px;
    height: 150px;
    width: 300px;
}

.search_form{
    height: 25%;
    width: 100%;
    display: inline-block;
}
.content_selection_button{
    width: 100%;
    height: 25%;
    border: 1px;
}

.search_bar{
    background-color:white;
    box-shadow: rgb(204, 204, 204) 0px 0px 0px 1px inset;
    border: 1px solid rgb(178, 210, 203);
    border-radius: 8px;
    font-size: 12px;
    height: 100%;
    width: 90%;

}

.search_button {
    cursor: pointer;
    border: 1px;
    background-color: #d4d4d4;
    font-family: 'EntypoRegular';
    color: #5f615c;
    font-size: 20px;
    height: 100%;
    width: 10%;
}

Upvotes: 0

Views: 65

Answers (1)

Michael
Michael

Reputation: 44250

You've set the height of the buttons to 25%, which means they're trying to take up 25% of the height of their parent li tags. Set the height of the li tags to 25% and set the children (buttons etc.) to height: 100% (100% of the 25% - aka 25% of the red container).

Something like this: http://jsfiddle.net/45Y4Z/ (you'll have to fix the search bit)

Side note: I can already predict you're going to hit a problem whereby you have an element that's 100% wide and you add say a 3 pixel border, the width becomes 100% + 6px (too wide!). You'll probably want to solve this with the following css:

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */

Here is an excellent explanation of how that works: http://css-tricks.com/box-sizing/

Upvotes: 3

Related Questions