How to make container 100% of parent if it have ul inside


Tags: css,html,html-lists

Problem :

I have markup:

http://jsfiddle.net/ZVXFD/85/

i need to make .step of 100% of parent container, how to accomplish that. html:

 <div class="steps-container">
        <div class="group">
            <div class="step">
                <ul class="sortable">
                    <li class="item">Item</li>
                    <li class="item">Item</li>
                    <li class="item">Item</li>
                    <li class="item">Item</li>
                    <li class="item">Item</li>
                </ul>
            </div>
            <div class="step">
                <ul class="sortable">
                    <li class="item">Item</li>
                    <li class="item">Item</li>
                    <li class="item">Item</li>
                    <li class="item">Item</li>
                    <li class="item">Item</li>
                    <li class="item">Item</li>

                </ul>
            </div>
            <div class="step">
                <ul class="sortable">
                    <li class="item">Item</li>
                    <li class="item">Item</li>
                </ul>
            </div>
        </div>

    </div>

css:

* {
    margin: 0px;
    padding: 0px;
}

ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    display: inline-block;
}

.sortable li {
    margin: 0px;
    padding: 0px;
    width: 100px;
    height: 100px;
    border: 1px solid black;
    background-color: lightgrey;
}


.group {
    display:inline-block;
    border: 1px solid red;
}

.step {
    border: 1px solid green;
    display:inline-block;
    background-color: yellow;
}

.item {
    background-color: lightgray;
}


Solution :

http://jsfiddle.net/ZVXFD/94/

If you want .group to be 100% wide, you'll need these styles:

.group {
    border: 1px solid red;
    display:table; /* make the element 100% fill the entire available width */
    width: 100%;
}

If you want .step to be equal height, you'll need these styles:

.step {
    border: 1px solid green;
    display:table-cell; /* make the element 100% of its parent's height/equal height columns */
    background-color: yellow;
}

    CSS Howto..

    How to fix element on the center of scrollable page?

    Symfony3 - how can I add a photo using Symfony

    How can i override css property

    Double Scroll Bars kept showing in Windows Broswers

    Align lists on showing or hiding

    How do I vertically center my navigation bar?

    how to set background image in css at MVC4

    How to put text on the center of a circle using CSS

    how to remove small space that only appear in iphone browser

    How do I make my website’s layout work gracefully with different browser window sizes, like Tumblr does?

    How to put two divs on the same line with CSS in simple_form in rails?

    How do I implement this basic CSS for just one category?

    how to make form input in middle

    how to center a div without width?

    How to align images and text in css?

    jQuery Tooltip - How To Declare 2 Options

    How do I style forms using CSS

    How to have an image overlap the edge of a div

    How to align the menu to center after certain width media query fires for RWD

    Jquery how to set active link css color

    how to download google fonts in version bold

    How to overlap divs in html

    How to find a unique identifier using CSS for a class

    How can I make my form autoscale correctly?

    How to check if user is in high contrast mode via JavaScript or CSS

    How to mail HTML/CSS output as attachment?

    How to center a component without knowing its width in Css

    How do I obtain a floating element's left offset while it is outside the viewport?

    how to css absolute positioning right way

    how to effect td on fixed table layout