CODEWITHSUNDEEP
htmlcsscss-float
BringMeAnother
BringMeAnother

Reputation: 627

Having the floating children elements determine parent width

Here is an example

http://jsfiddle.net/BringMeAnother/LwXhE/

// html
<div class="container clearfix">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

// css
.container {
    background: red;
    padding: 10px;
}
.child {
    width: 100px;
    height: 100px;
    float: left;
}
.child:nth-child(even) {
    background: green;
}
.child:nth-child(odd) {
    background: blue;
}

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

The container with the red background seem to always stretch to 100%. What I'd like to do is to make its width depend on the floating children, so in this case, 3 times 100px.

The reason I'd like to have this is as follow. In a flexible layout, I have a container that contains several child elements of different sizes. The width and amount of those children can vary. The children always float. The goal is to have the floating children centered. So, if I always have one child element, I'd simply set its margin-right and margin-left to auto. However, there are several children which I wish to put next to each other, but after they have been ordered horizontally, I'd like that row to be centered on the page. I cannot give a fixed width to the container since the amount of children and each of their width are not determined in advance.

I think I might be able to do this with javascript, but I wonder if there is a pure css solution. Thanks

Upvotes: 4

Views: 12360

Answers (4)

vegemite4me
vegemite4me

Reputation: 6856

By wrapping your container div in another wrapper div, you can centre your red container div, and the red div will only be as wide as its floating children.

HTML

<div class="centered">
    <div class="container">
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
    </div>
</div>

CSS

.centered {
    text-align: center;
}
.container {
    background: red;
    padding: 10px;
    display: inline-block;
}
.child {
    width: 100px;
    height: 100px;
    float: left;
}
.child:nth-child(even) {
    background: green;
}
.child:nth-child(odd) {
    background: blue;
}

Fiddle: http://jsfiddle.net/SbPRg/

Upvotes: 3

Chris Middleton
Chris Middleton

Reputation: 5914

Late to the party here, but all you really need is to add display: inline-block. And to center the .container div, just apply text-align: center to whatever contains it.

JSFiddle: http://jsfiddle.net/LwXhE/24/

Upvotes: 0

Ivan Chaer
Ivan Chaer

Reputation: 7100

Besides Adsy suggestion (to set the container's position to fixed), you could:

1) Use position absolute on the container:

HTML:

<div class="container">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>

CSS:

.container {
    background: red;
    padding: 10px;
    position:absolute;
}
.child {
    width: 100px;
    height: 100px;
    float: left;
}
.child:nth-child(even) {
    background: green;
}
.child:nth-child(odd) {
    background: blue;
}

http://jsfiddle.net/tKz8b/

2) Set a float on the container, which is good if you need it with relative / static positioning:

HTML:

<div class="container">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>
<div class="clearfix"></div>
<div>Next</div>

CSS:

.container {
    background: red;
    padding: 10px;
    float: left;
}
.child {
    width: 100px;
    height: 100px;
    float: left;
}
.child:nth-child(even) {
    background: green;
}
.child:nth-child(odd) {
    background: blue;
}

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

http://jsfiddle.net/LYrWx/1/

Upvotes: 4

SaturnsEye
SaturnsEye

Reputation: 6499

Add position:fixed; to container

.container {
    background: red;
    padding: 10px;
    position:fixed;

Fiddle

Upvotes: -3

Related Questions