jools Posted November 15, 2014 Share Posted November 15, 2014 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:) Link to comment Share on other sites More sharing options...
dsonesuk Posted November 15, 2014 Share Posted November 15, 2014 (edited) Make Or use a container div that surrounds the profile box the same fixed width OR max-width: as two profile boxes side by side, allowing for margins/padding and use margin: 0 auto. Edited November 15, 2014 by dsonesuk Link to comment Share on other sites More sharing options...
tejasamrute Posted November 15, 2014 Share Posted November 15, 2014 CSS......... #master { background-color: #0CF; height: 100px; width: 700px; margin:0 auto;}#master1 { background-color: #069; height: auto; width: 700px; margin:20px auto;}#child1 { background-color: red; height: 500px; width: 340px; float:left;}#child2 { background-color: green; height: 500px; width: 340px; float:right;} HTML..... <div id="master"></div><div id="master1"> <div id="child1"></div> <div id="child2"></div></div> Link to comment Share on other sites More sharing options...
dsonesuk Posted November 15, 2014 Share Posted November 15, 2014 <style type="text/css"> #master { border: none; /*width: 100% height:auto;; not required block elements do this by default*/ margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; overflow: hidden; text-align:center; } .profilebox{ border: 1px solid #FFCC99; /*height:auto;; not required block elements do this by default*/ width: 390px; /* float: left;*/ display: inline-block; 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*/ min-height: 500px; text-align: left; } .profilebox p {float: left;} </style> </head> <body> <div id="master"> <div class="profilebox"><p>Profile One</p><p>Profile One</p><p>Profile One</p><p>Profile One</p><p>Profile One</p><p>Profile One</p><p>Profile One</p></div> <div class="profilebox"><p>Profile Two</p><p>Profile Two</p><p>Profile Two</p><p>Profile Two</p><p>Profile Two</p></div> </div> Link to comment Share on other sites More sharing options...
jools Posted November 15, 2014 Author Share Posted November 15, 2014 (edited) Thank you both for 2 working solutions. I used the second one (avoiding an encapsulating Div) and it worked a treat. Many thanks! Edited November 15, 2014 by jools 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