how to keep floated item centered within container

Question

OK, I've gotten the prelim version of my page started, but I'm having a problem with two floated div's that are wrap in header tag. Basically, I want the two rectangles to center within the containing div tag. One of the rectangles overlaps the other. I had to us positioning to be able to expand them within the container other-wise the second would jump below the first.

Here's what I've have so far.

     <div id="div1" class="fluid"> 
        <header id="headGraphics">
            <div id="headRectangle1">This will be an image.</div>
            <div id="headRectangle2">"This will be text adjusted using opacity."
     </div>

Here is the css for the page - I have a follow-up question after we get this solved.

.gridContainer.clearfix #headGraphics {
margin-top: 0px;
margin-right: auto;
margin-left: auto;
margin-bottom: 0px;
font-family: "monotype corsiva";
font-size: 20px;
font-weight: 800;
width: 950px;
text-align: center;

 }
 .gridContainer.clearfix #headGraphics #headRectangle1 {
     float: left;
     width: 350px;
     height: 75px;
     position: relative;
     border: medium solid #000000;
     -webkit-box-shadow: 3px 3px 3px 1px #FF7878;
     box-shadow: 3px 3px 3px 1px #FF7878;
     margin-left: auto;
     margin-right: auto;
     display: inline-block;
 }
 .gridContainer.clearfix #headGraphics #headRectangle2 {
     background-color: #FFAAAA;
     float: left;
     /*margin-right: 50px;*/
     width: 350px;
     height: 75px;
     position: relative;
     top: -50px;
     right: 0px;
     text-align: center;
     clear: both;
     left: 100px;
     margin-left: auto;
     margin-right: auto;
     display: block;
 }

     .gridContainer.clearfix #headGraphics:after {
     content: " ";
     display: table;
     clear: both;
     }

I can't remove the position tags because they give me the layout that I'm am trying to accomplish.

Let ma know if you need more info. Thank you in advance. And yes, I have searched this page and others to find a solution, but none seem to apply to my particular situation.

let me clear a few things up... and before I go any further, most of my (98%) selectors are in the boiler plate template. That being said, here the computed effects per selector:

.gridContainer.clearfix #headGraphics; width 950px, margin 0 auto, font-family monotype weight 800px size 20px, text-align center. .gridContainer.clearfix #headGraphics #headRectangle1; width 350px, height 75px, display inline-block, margin rt & lft auto, position relative, box-shadow (which isn't working properly) .gridContainer.clearfix #headGraphics #headRectangle2 width 350px, height 75px, display inline-block, position relative, top -50px, rt 0px, bot 0px, left 100px (this is to bring object up and offset from rectangle), float left, clear both, text-aligh center.

that css you posted is not affecting any of the html you posted, could you verify if thats the right css — Allan, Sep 06 '14 at 16:57
but anyway, u cant center anything if you use the float attribute — Allan, Sep 06 '14 at 16:58
I've tried to simplify. Those a the effect that are computed. — JZeig1, Sep 06 '14 at 18:18
It seems as though there's no easy way out but to move the floated rectangle incrementally. Once I 'clear: both' and I offset the bottom one, the use of auto margins went out the door. — JZeig1, Sep 06 '14 at 18:28

Allan · Accepted Answer · 2014-09-06T19:57:40.283

I would suggest removing the float attributes from both, then just setting both items display as inline-block, you will need to specify width and height on both cases, then apply text-align center to the parent, that will allow the child to be centered to the parents available area.

The Display: inline-block will give the two elements the possibility to behave not just like a block element, it will be both, block and inline, so you will be able to use attributes for both at the same time.

If you need an example, I can provide you with one, Just let me know!

EDIT...

Here is a working example

My JSFiddle

http://jsfiddle.net/dq185dw9/

My CSS

#headGraphics {
    margin-top: 0px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 0px;
    font-family: "monotype corsiva";
    font-size: 20px;
    font-weight: 800;
    width: 950px;
    text-align: center;
    outline: red dashed 1px;
    padding: 35px; /* remove or change if needed */
 }
#headGraphics [id*="headRectangle"] {
     width: 350px;
     height: 75px;
     position: relative;
     border: medium solid #000000;
     -webkit-box-shadow: 3px 3px 3px 1px #FF7878;
     box-shadow: 3px 3px 3px 1px #FF7878;
     display: inline-block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    -khtml-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0px 25px;
    line-height: 75px; /* remove or change if you want to have more than one line of text */
 }

My HTML

<header id="headGraphics">
    <div id="headRectangle1">This will be an image.</div>
    <div id="headRectangle2">"This will be text adjusted using opacity.</div>
</header>

I would like to thank you for your help. After removing the float property, I simply position the two items as needed. After tweaking a little, I've gotten them close in position where I want them. Just have to adjust menu (Nav) Bar and everything should be fine. U did help with the box-shadow. Work like I'm in MS Word. LOL. U did leave out the second rectangle but I'm on the right track. Thanks again... — JZeig1, Sep 06 '14 at 23:07

how to keep floated item centered within container

Let ma know if you need more info. Thank you in advance. And yes, I have searched this page and others to find a solution, but none seem to apply to my particular situation.

1 Answers1