Home/ Questions/Q 8245901
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-07T22:20:11+00:00

Sorry about my english. Please, i have a problem with divs, i have 3

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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;
}
    • 0