Jump to content

Centre class elements within a div which remain centred during scaling


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 post
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 post
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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...