parent container width issue

[zaahideen]

i have 4 css boxes lined up. they are contained inside an item #link_container

the issue i have is that i need this container to be the width of the 4 boxes (and not of the browser window):
https://jsfiddle.net/zaahideen/Lu52ho93/

any suggestions?

[Paulie_D]

Easy

#link_container{
    background: lightsalmon;
    display: inline-block;  /* this */
    margin: 30px;
    padding: 10px;
    overflow: auto;
}

https://jsfiddle.net/Lvax46m5/1/

[zaahideen]

brilliant! thanks a million.

one more thing, when the screen is resized then the right-most object moves to the bottom. if the screen is resized more, then then next item moves. all this is fine.

however, how would i make the items centered? i.e. using the

@media screen and (max-width: 655px) {
.link_box{
}
}

what would i need to use so that when the screen is smaller than 655px, the alignment of the first box which moves to the next line is centered?

[Paulie_D]

You mean like this: – https://jsfiddle.net/Lvax46m5/2/

If not, then what I suspect you are after is really hard due to the way wrapping works….and usually requires javascript.

[zaahideen]

WOW!!!

thanks. exactly what i was after

[Author]

Posts