CODEWITHSUNDEEP
htmlcss
user1531921
user1531921

Reputation: 1432

Fluid layout doesn't work in CSS

I'm trying to build a simple layout with fluid values (percentages for height and width). I got a container and a wrapper, but for whatever reason, I can't seem to change the width and height values of the wrapper.

I got a wrapper with the following values:

div.wrapper{
    height: 80%;
    width: auto;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
}

As well as a container with the same code but wider. When I remove the overflow: hidden-value, the wrapper will just becomes really thin and not actually "wrap" around any of the internal elements.

Since this is a kind of complicated problem, I posted my entire layout on JSBin: http://jsbin.com/folaveda/1/

The problem is apparent there as well, as well as all the css that causes it.

Upvotes: 0

Views: 84

Answers (1)

Alex
Alex

Reputation: 35409

You need to set the height property on the container, then you can set the child .wrapper to consume a percentage of its parent's element. Percentage heights and widths are relative to their immediate parent element's dimensions. In your scenario, the parent element is only consuming the dimensions of its children's contents, thus your perceived issue. Adjust the dimensions of the parent/s and you'll have your solution.

note, you'll likely need to set the dimensions on the body and html element explicitly to something like 100%, or a value that's more appropriate for your scenario.

Upvotes: 1

Related Questions