Jump to content
jools

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:)

 

 

 

Share this post


Link to post
Share on other sites

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 by dsonesuk

Share 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>

Share this post


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>

Share this post


Link to post
Share on other sites

Thank you both for 2 working solutions. I used the second one (avoiding an encapsulating Div) and it worked a treat.

 

Many thanks!

Edited by jools

Share this post


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...