All geek questions in one place

Difficult question about css positioning

my bodyhas a mosaic background (blue in the attached image)

I need to horizontally center a fixed width and height (green), a fixed distance from the top of the page.

Then I need to continue the background image of the centered content to the left and right limbs of the page, an arbitrarily wide browser (purple)

The reason for this is that the green content has a “hole” in it, which allows the background to bodyshow. If this was not a requirement identifier, make the purity a 100% width div that wraps the content, and just give it a lined background image.

alt text

So far I have managed to do this:

<div id="Left"></div>
<div id="Right"></div>
<div id="Content"></div>


#Left
{
    width: 50%;
    margin-right: 480px;
    position: absolute;
    top: 50px;
    right: 50%;
    height: 525px;
    background: transparent url(/images/purple.png) repeat-x scroll center top;
}
#Right
{
    width: 50%;
    margin-left: 480px;
    position: absolute;
    top: 50px;
    left: 50%;
    height: 525px;
    background: transparent url(/images/purple.png) repeat-x scroll center top;
}

#Content
{
    position: absolute;
    top: 50px;
    left: 50%;
    margin-left: -480px;
    width: 960px;
    height: 525px;
    background: transparent url(/images/green.png) no-repeat scroll center top;
}

, , . ?

, , overflow-x: hidden .

: , 525px height , v-.

IE7 +, FF, Safari

+3
3

, :

<html>

<head>
<style type="text/css">

body
{
    overflow-x: hidden;
    width: 100%;
    margin: 0;
    padding: 0;
}

#Left
{
    width: 50%;
    margin-right: 480px;
    position: absolute;
    top: 50px;
    right: 50%;
    height: 5525px;
    border: solid 2px purple;
}
#Right
{
    width: 50%;
    margin-left: 480px;
    position: absolute;
    top: 50px;
    left: 50%;
    height: 5525px;
    border: solid 2px purple;
}

#Content
{
    position: absolute;
    top: 50px;
    left: 50%;
    margin-left: -480px;
    width: 960px;
    height: 5525px;
    border: solid 2px green;
}

</style>
</head>

<body>

<div id="Left"></div>
<div id="Right"></div>
<div id="Content"></div>

</body>
</html>

body ( ), "auto" Content div ( , , ).

, - .

EDIT:

div. GD Internet Explorer...

+1

, :

#content{
  margin-right:auto;
  margin-left:auto;
}

(, , ).

, , png- . div.

0
<!doctype html>
<style>
body {
    background: blue;
    margin: 0;
}
#wrapper {
    height: 300px;
    margin-left: 50%;
    position: relative;
    top: 100px;
}
#left {
    background: magenta;
    height: 300px;
    margin-right: 300px;
    position: absolute;
    right: 100%;
    width: 100%;
}
#center {
    border: 100px solid lime;
    float: left;
    height: 100px;
    margin-left: -300px;
    width: 400px;
}
#right {
    background: magenta;
    height: 300px;
    overflow: hidden;
}
</style>

<div id="wrapper">
    <div id="left"></div>
    <div id="center"></div>
    <div id="right"></div>
</div>
  • , .
  • div, " " , .
  • div, , "", , , .

( Firefox 3.6 IE8 IE8 IE7.)

0
source

Source: https://habr.com/ru/post/1760571/

More articles:


All Articles