CODEWITHSUNDEEP
htmlcss
Chameleon
Chameleon

Reputation: 10138

HTML container which expands width with each added child - all in one row?

How to force parent to expand with children width.

HTML:

<div class="parent">
    <div class="child">
        1
    </div>
    <div class="child">
        2
    </div>
    <div class="child">
        3
    </div>
</div>

CSS:

.parent {

}
.child {
    width: 200em;
    float: left;
}

.child:nth-child(odd) {
background-color: red;
}

.child:nth-child(even) {
background-color: green;
}

What I want to achieve:

+Parent-----------------+
| child child child ... |
+-----------------------+

What I do not want achieve but I am achieving :)

+Parent-+
| child |
| child |
| child |
+-------+

The best will be if it possible without tables and flex layout - if it possible.

Upvotes: 0

Views: 36

Answers (2)

Justin
Justin

Reputation: 3397

Explaination

I am assuming you DON'T want the child elements to ever wrap.

First, get rid of float: left and replace it with display: inline-block. It achieves the same thing and you aren't taking the element out of the document flow.

Next, on the containing element, .parent in this case, add the white-space: nowrap; rule. This will stop the child elements from wrapping around when the viewport width is hit.

Final CSS

.parent {
    white-space: nowrap;
}
.child {
    width: 200em;
    display: inline-block;
}

.child:nth-child(odd) {
    background-color: red;
}

.child:nth-child(even) {
    background-color: green;
}

JSFiddle

Upvotes: 1

Raju Padhara
Raju Padhara

Reputation: 707

In your fiddle example 

.child {
    width: 100em;
    float: left;
}

width is fit to browser when i decrease width its work.

.parent {
 display: inline-block;
}
.child {
    width: 10em;
    float: left;
}

FIDDLE

Upvotes: 0

Related Questions