CODEWITHSUNDEEP
htmlcss
mateikav
mateikav

Reputation: 93

Div centering issue. More complicated then I thought

The fiddle is contained here

Code below is a sample of the relevant code, everything is in the fiddle.

HTML

<body>
<div id="wrapper" >
    <header>
        <div class="hwrapper">
        <div class="box effect2">
            <img src="media/header1.jpg" width="150px" height="150px" style="padding-top:5px;" />               
        </div>
        <div class="box effect2">
            <img src="media/header2.jpg" width="150px" height="150px" style="padding-top:5px;" />               
        </div>
        <div class="box effect2">
            <img src="media/header3.jpg" width="150px" height="150px" style="padding-top:5px;" />               
        </div>
        <div class="box effect2">
            <img src="media/header4.jpg" width="150px" height="150px" style="padding-top:5px;" />               
        </div>
        <div class="box effect2">
            <img src="media/header5.jpg" width="150px" height="150px" style="padding-top:5px;" />               
        </div>
        </div>
    </header>

CSS

    body {
    text-align: center;
    margin:0;
    padding:0;
    background-image:url('../media/background.gif');
    background-repeat: repeat;
}

#wrapper {

}

header {
    width:100%;
    height:300px;
    -webkit-box-shadow: inset 0px -3px 5px rgba(50, 50, 50, 0.4);
    -moz-box-shadow: inset 0px -3px 5px rgba(50, 50, 50, 0.4);
    box-shadow: inset 0px -3px 5px rgba(50, 50, 50, 0.4);

}

/*---------header images--------*/

.hwrapper {

}

.box {
    width:160px;
    height:160px;
    background:#FFF;
    margin-top:20px;
    margin-bottom:20px;
    margin-left:20px;
    margin-right:20px;
    float: left;
}

.effect2 {
  position: relative;
}

.effect2:before, .effect2:after {
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 14px;
  left: 5px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(-7deg);
  -moz-transform: rotate(-7deg);
  -o-transform: rotate(-7deg);
  -ms-transform: rotate(-7deg);
  transform: rotate(-7deg);
}

.effect2:after {
  -webkit-transform: rotate(7deg);
  -moz-transform: rotate(7deg);
  -o-transform: rotate(7deg);
  -ms-transform: rotate(7deg);
  transform: rotate(7deg);
  right: 5px;
  left: auto;
}

Okay, so I made a nice row of pictures to run along the top of my page with a neat page curl effect. The problem is that it won't center with the rest of my content so far. It stays to the left, which is due to the float:left css rule in .box.

If I take away float:left, the row of pictures turns into a column running down the page, instead of a nice horizontal row.

I have an .hwrapper div class around my row of pictures to set rules to center everything while keeping the float:left in .box, but none of my middle-aligning tricks are working. I'm not sure where the conflict is, perhaps in my page curl css?

thanks in advance.

Upvotes: 1

Views: 73

Answers (2)

Paulie_D
Paulie_D

Reputation: 115046

If you need to center the images in the centered header then you need to adjust a couple of things.

JSFiddle

.hwrapper {
display:inline-block;
text-align:center;
}

.box {
    width:160px;
    height:160px;
    background:#FFF;
    margin-top:20px;
    margin-bottom:20px;
    margin-left:20px;
    margin-right:20px;
    display:inline-block;
}

Upvotes: 1

Josh Crozier
Josh Crozier

Reputation: 240928

float:middle isn't a valid property - I removed that.

To solve the problem though, you could simply set the .hwrapper to display:inline-block, forcing its width to be the same size as its children.

.hwrapper {
    display: inline-block;
}

jsFiddle example - it works.

This effectively centers .hwrapper because you have text-align:center set on a parent element, in this case being the body.

Upvotes: 2

Related Questions