Jump to content

Centre class elements within a div which remain centred during scaling


jools

Recommended Posts

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*/        }

image1.gif

 

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

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

      <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

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
×
×
  • Create New...