CODEWITHSUNDEEP
htmlcss
Cameron Martin
Cameron Martin

Reputation: 6012

CSS shrink-to-fit container div around multi-line floated divs

I've started to write a design for my video streaming site. http://www.xjerk.com/new.site/ [SFW]

The content area is horizontally fluid, and the white boxes in the content area are divs that are floated left. This means they all sit next to each other nicely, and flow onto a new line when there's no room left.

However, the content area often has a blank area on the right side, where there's not enough room for another white box. I would like to get rid of this; either by making the whole container div (#container_inner) shrink to remove this space, or failing that, make the blue bar above the white boxes contract (by making #content contract) so the the right edge is in line with the white boxes.

I've tried setting the left area (#content) to inline-block, but this doesn't work since the content inside is bigger than the div width (hence the overflow onto multiple lines).

Is there any way this can be achieved, or would a fixed width design be my best bet?

PS: I hope I've explained everything well enough.

Upvotes: 1

Views: 696

Answers (2)

Max Chandler
Max Chandler

Reputation: 513

Have you tried setting the video_box to a % of the width?

This should remove the white-space.. Remember to change the margin to percentage too, else width could start to exceed 100%+.

For exmaple:

.video_box {
margin:1%;

width:31%
min-width:100px;
height:370px;

border-radius: 10px;
-moz-border-radius: 10px;

border: 1px solid #d0d0d0;
background-color: #ffffff;

float: left;

Upvotes: 0

Ken Wheeler
Ken Wheeler

Reputation: 1958

Use media queries to set break points for the blue bars size.

Upvotes: 2

Related Questions