CODEWITHSUNDEEP
csshtmloverlap
sova
sova

Reputation: 5658

overlap divs with relative positioning?

Is it possible to overlap divs with CSS without using absolute coordinates -- that is, with relative positioning?

I have a background image I split into 3 vertical pieces,

Then I want to have my main site content on top of that, centered. I'm not sure how to do this without using absolute positioning.

      Kinda like this

|$$$$$|**********************|&&&&&|
|$$$$$|**********************|&&&&&|
|$$$$$|----------------------|&&&&&|
|$$$$$|                      |&&&&&|
|$$$$$|                      |&&&&&|
|$$$$$|shakeyour<body></body>|&&&&&|
|$$$$$|                      |&&&&&|
|$$$$$|                      |&&&&&|
|$$$$$|----------------------|&&&&&|
|$$$$$|**********************|&&&&&|
|$$$$$|**********************|&&&&&|

      Different symbols = differnt background image or pattern

I was thinking about having the backgrounds just as three divs, and then have the body div positioned absolutely, but I want it to be centered for widescreen displays. Any ideas?

For example, the expected behavior under resizing:

|$$$$$|**********************|&&&&&|
|$$$$$|**********************|&&&&&|
|$$$|--------------------------|&&&|
|$$$|                          |&&&|
|$$$|                          |&&&|
|$$$|  shakeyour<body></body>  |&&&|
|$$$|                          |&&&|
|$$$|                          |&&&|
|$$$|--------------------------|&&&|
|$$$$$|**********************|&&&&&|
|$$$$$|**********************|&&&&&|

---  

|$$$$$|**********************|&&&&&|
|$$$$$|**********************|&&&&&|
|$|------------------------------|&|
|$|                              |&|
|$|                              |&|
|$|   shakeyour<body></body>     |&|
|$|                              |&|
|$|                              |&|
|$|------------------------------|&|
|$$$$$|**********************|&&&&&|
|$$$$$|**********************|&&&&&|

Upvotes: 5

Views: 3315

Answers (2)

Nandhakumar
Nandhakumar

Reputation: 376

body {
   padding: 50px 20px;
   box-sizing: border-box;
}

Upvotes: 2

Theofanis Pantelides
Theofanis Pantelides

Reputation: 4864

<div style="float: left; width: 20%;">Left</div>
<div style="float: left; width: 60%; margin: 0 20%;">Center</div>
<div style="float: right; width: 20%;">Right</div>

You need something like this. Of course, move styles in CSS file, and add your backgrounds.

Upvotes: 0

Related Questions