Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Make child div occupy entire parent space on resizing

Make child div occupy entire parent space on resizing

Problem

I have a container div that has two element. On resizing one inner div moves under another.

But the requirement here is on resizing when one div moves under another the first div should take the entire width of the parent.

The real question has many div's . If you want you can also try with multiple. But find a common solution.

Here's the fiddle

div fiddle

Here's by HTML and CSS

Try giving a CSS solution as I know the container can be snapped to adjust child div using css .

.cont {
    width:100%;
    background-color:yellow;
    overflow:hidden;
    white-space:nowrap;
    height:100px;
}
.inner {
    width:200px;
    height:80px;
    margin:4px;
    border:1px solid black;
    float:left;
    display:block;
}
Problem courtesy of: Pratim

Solution

I played with this a bit, and I was able to solve it with media queries. Check out the demo here, and here is the code:

.cont {
    width: 100%;
    height: 100px;
    overflow: hidden;
    background-color: yellow;
    overflow: hidden;
    white-space: nowrap;
}

.inner {
    width: 200px;
    height: 80px;
    margin: 4px;
    border: 1px solid black;
    float: left;
    display: block;
}

@media (max-width: 435px) {
    .inner {
        width: auto;
        float: none;
        position: relative;
        left: 0;
        right: 0;
    }

    .cont {
        height: auto;
    }
}
Solution courtesy of: gnclmorais

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Make child div occupy entire parent space on resizing

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×