Search the Community

Hello, I have a master div ID element which contains smaller class elements (boxes) which are currently set to float left. I would like these class elements to be centred within my master div and remain centred when the windowm scales. There also needs to be a space between the class elements (boxes) and there are two class elements positioned next to each other. My master div ID element which encapsulates the smaller classes has the following CSS #master { border: none; width: 100%; height:auto; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; overflow: hidden; } I tried to text-align: centre but it didn't centre the class elements, rather just the text within the boxes (class divs). The class elements which I want to centre have the following CSS: .profilebox{ border: 1px solid #FFCC99; height: auto; width: 390px; float: left; margin-top: 14px; margin-right: 0px; margin-bottom: 10px; margin-left: 20px; border-radius: 5px; overflow: hidden;/*this togther with the height auto ensures this parent div encapsulates all child divs*/ } I tried to remove float: left and set margin right and left to auto but then then instead of having two of these boxes side by side, I had just one (and the other moved underneath). Many thanks for reading this post:)

Hi there, After many hours searching for the answer to what I thought was a relatively simple query, I am still no wiser. I hope an expert here will be able to help me with the following - How do you maintain the proportions of child div as its parent gets larger, when the parent is set to width:auto (to fill the browser)? For example say the parent is 1000px X 400px and its child is 200px X 100px; when the browser is resized and changes the parent to 500 x 200, what is the CSS code to ensure the child div changes size with it, proportionally, making it 100 px X 50px? This is because I have come across a JS plugin to scale the text to fit the div. Many thanks in advance, I look forward to reading the response. Matt