jools Posted September 7, 2014 Share Posted September 7, 2014 Hello, I have a master div ID in which I have a number of other divs: <div id="master"> <!--This is the open master div--><div id ="namestrip"></div><div id ="basicsbox"></div><div id ="videobox"></div><div id ="experiencebox"></div><div id ="teachingstylebox"></div></div> <!--This is a closes the master--> I have set the height of the master DIV ID to auto hoping it resizes to accommodate whatever is in it: #master /*the box we work in*/ { width: 1024px; height: auto; } However, as you can see from the screenshot, this doesn't appear to work (I have highlighted the master ID border in black) Any ideas as to why this isn't working. If I set the height to fixed then everything is contained in the master tags and the footer sorts itself out, but I wanted to use the auto height function. Many thanks Link to comment Share on other sites More sharing options...
dsonesuk Posted September 7, 2014 Share Posted September 7, 2014 Do any of child elements use float or position: absolute; by any chance. Link to comment Share on other sites More sharing options...
jools Posted September 7, 2014 Author Share Posted September 7, 2014 Yes, they all use float. Link to comment Share on other sites More sharing options...
dsonesuk Posted September 7, 2014 Share Posted September 7, 2014 Well theres the problem outer div cannot detect area of child floated elements, so its height becomes 0px, one fix is to appy overflow: hidden; to outer parent container. Link to comment Share on other sites More sharing options...
jools Posted September 7, 2014 Author Share Posted September 7, 2014 Many thanks. Worked perfectly. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now