expand div element inside centered body element

StackOverflow https://stackoverflow.com/questions/12530542

  •  03-07-2021
  •  | 
  •  

Question

The body of my html page is placed in the middle of the page as shown below:

<body style="margin:0 auto; width:75%">

Now I want to put a strip with a background color to expand along the complete width of the screen, like this.

<body style="margin:0 auto; width:75%">
<div style=" margin-left:0; margin-right:0;width:100%; height:20px; background- color:
#e6e3e3;"></div>
</body>

However, this is not working. The div element does not expand beyond the border specified by body element. how can it be done? Thanks in advance for your help.

Était-ce utile?

La solution

Are you trying to achieve something like this?

http://jsfiddle.net/TZ9Y7/

CSS:

html, body {
    height: 100%;
}

body{ margin:0 12.5%; border: 2px solid black; }

.div1 { 
    width: 100%;
    height: 30px;
    background: #ccc;
}

.div2 { 
    width: 100%;
    height: 30px;
    background: red;
    position: absolute;
    left: 0;
}

​

Autres conseils

unless you want to use javascript to look up the width of the window and programatically set the width of the div, your best option would be to tweak your page structure to something like:

<html>
  <body>
    <div style="margin:0, width:100%, padding:0"></div>
    <div class="content" style="margin:0 auto, width:75%"></div>
  </body>
</html>

So that instead of making the whole body element centered, you have a 'content' div that is centered. This will let you place certain elements outside the content div, where they can be the width of the whole window.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top