Jump to content

Container


Drae
 Share

Recommended Posts

I'm working on a website design at the moment which holds all the content in a container. Here is the container's CSS:

#container {width: 980px;background: #ededed;min-height: 1200px;border-left: #000 1px solid;border-right: #000 1px solid;margin: auto;border-radius: 20px;box-shadow: 2px 2px 4px #888888;z-index: -1;}

I'm having a problem though as if the content goes over the minimum height for the container, the container does not expand. How do I make it expand automatically by taking into account the content held within it on the webpage itself?

Link to comment
Share on other sites

I see you are using z-index? if you are using position: absolute (position is required for z-index to work), this will prevent this container from adjusting the height to the content within it. Also if the content within it, is using float, you will have the same problem. (1) position: absolute; fix = DONT USE POSITION: ABSOLUTE.(2) float: fix = use overflow: hidden; this helps the #container to detect the floated content area within it, and so adjust its height.

  • Like 1
Link to comment
Share on other sites

Thanks dsonesuk, I usually float element and have issues with setting heights of some elements. I didn't know that using overflow hidden meant it could detect the height. Thanks a lot. Kind regards, Lab.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...