floating, left aligned, centered div

Question

I would like to have a div, that is centered in its parent, but children inside of it would be left aligned. Wanting this, I obtained the following:

.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;
}

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

http://jsfiddle.net/SbPRg/ (source: Having the floating children elements determine parent width).

The problem is that when you resize the page, there still is a problem whereas the main "red" div is wider than what I want, and shows a big part of red instead of resizing to a smaller container that 'fits' its children.

Would you have any idea of how to obtain something like this, without javascript ?

The main idea is to display a "gallery" of images, in a responsive way (if the screen is too small, display one image per row, up until three per row if the screen is wide).

Don't make us write markup. Supply a sample of the html, too. I'm confused whether that CSS is yours or copied from somewhere else. — Rob, Oct 06 '15 at 16:54
you have to use [media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries). Child element has fixed width and as the page resizes below 299px there is not enough space for the third child. so it moves to next available space. — VenomVendor, Oct 06 '15 at 16:56

divy3993 · Accepted Answer · 2015-10-06T17:11:33.227

Just add CSS Media Query rules. Add the following rule to your CSS.

CSS

@media screen and (max-width: 337px) {
    .child
    {
        float:none;
        text-align:center;
        display:block;
    }
}

Working : Demo

Note: CSS Media Query is use to effect the styling to your HTML based on screen width's and height's

Here in your example i have added media query rule which gives style to .child class when the screen width reaches the 337px .

There could be max-width or min-width for width's similar for heights.

What is max-width: Here i have given it 337px, so it says that the css inside the rule should apply only when screen width is <=337px. If screen width is >337px then it would not apply the css within that rule.

score 0 · Answer 2 · answered Oct 06 '15 at 17:00

Just set the Container width to the exact width you want (in the JSFidlle: you need to add width:300px;)

and when you resize the window nothing happen.

to make it responsive use:

@media screen and (max-width:480px)

and set the width of the container for every screen size(or for the three block and for two then for just one)

score 0 · Answer 3 · answered Oct 06 '15 at 17:01

0

You could try a media query like this:

@media screen and (max-width: 350px) {
  .container {width: 100px;}
}

Check the demo

answered Oct 06 '15 at 17:01

manzapanza

6,087
4
39
48

score 0 · Answer 4 · answered Oct 06 '15 at 17:01

The reason that the parent container "shows a big part of red instead of resizing to a smaller container that 'fits' its children" is that you've explicitly given it ten pixels of padding on all sides. Remove that padding from .container, and the div will shrink to the width of its children.

score 0 · Answer 5 · answered Oct 06 '15 at 17:04

I guess you want something like this. Use media query to apply relevant css to the elements based on the various screen sizes.

Here is the css you need to add:

@media only screen and (max-width: 350px) {
    .child {
        clear:both;
    }
}

One alternative would be to use a framework like Bootstrap, which is good enough for making responsive webpages.

Here are the links you can refer to:

floating, left aligned, centered div

5 Answers5