murb83 murb83 - 4 months ago 7
HTML Question

How to.. the middle div of three ever on center and if the navigator are resized

Sorry about my english.

Please, i have a problem with divs, i have 3 divs "with image" horizontally, the images have to be together.

Here is the default view, if the screen is large enough.
Start

If the navigator are resized i lost center with the #div2. The #div1 are aligned to the left, that is not i need.
Problem

What i need is the #div2 stay on center, but i don't know to do that. #div1 and #div3 are outside of the navigator, no one div can be resized, are a fixed size.
What i want

The html code:

<body id="body">
<div id="wrap">
<div id="baseLeftBg">
</div>
<div id="baseContent">
</div>
<div id="baseRightBg">
</div>
</div>
</body>


The CSS code:

#body {
text-align: center;
height: 100%;
margin: 0 auto;
padding: 0px;
background: #ffffff;
-moz-background-size: cover;
background-size: cover;
float: inherit;
}

#wrap {
width: 1484px;
margin: 0 auto;
text-align:center;
}

#baseLeftBg {
margin-top: 60px;
background: #CDCDCD;
width: 286px;
height: 776px;
float: left;
}

#baseContent {
margin-top: 60px;
background: #A7A7A7;
width: 911px;
height: 776px;
float: left;
}

#baseRightBg {
margin-top: 60px;
background: #CDCDCD;
width: 286px;
height: 776px;
float: left;
}


How i can do that?

Link to Fiddle: http://jsfiddle.net/murb83/BChLs/

Thanks!!

Answer

That is the solution without JS works ok for me at the moment...

#wrap { 
    margin-top: 5%; 
    left: 50%;
    margin-left: -742px;
    position: absolute;
    width: 1484px;
    height: 776px;
}
Comments