CODEWITHSUNDEEP
csshtml
Michael
Michael

Reputation: 525

Why is my div not breaking out of parent div?

I'm trying to break out of a parent div so I can have a colour div cover the width of the browser.

However, for some reason it pushes the block off to the left.

This is my site.

This is my code:

HTML:

<div class="aboutTop"></div>

CSS:

.aboutTop{
   width: 100%;
   height: 600px;
   background-color: black;
   margin-left: -100%;
   margin-right: -100%;
}

Where am I going wrong?

Upvotes: 0

Views: 3689

Answers (5)

herman
herman

Reputation: 12305

You're setting width: 100% but also margin-left: -100%. This means that the element will span from -100% to 0.

Since you're also setting margin-right: -100% it looks like you want it to span from -100% to +200%, which means you need to set width: 300% instead.

Upvotes: 0

Dimuthu Nilanka
Dimuthu Nilanka

Reputation: 420

I think it's better to remove padding of your div #site. let it to have full width of browser.

then apply padding to children divs as you want.

Upvotes: 0

Kyle
Kyle

Reputation: 67194

To make your div "break out" of its parent, you'll have to use position: relative;

HTML:

<div class="aboutTop">
    <div>break out!</div>
</div>​

CSS: 

div
{
    width: 100px;
    height: 100px;
    border: 1px solid #000;
}

.aboutTop div
{
    position: relative;
    top: 50px; 
    left: 50px;
}

This is because child elements are restricted to the boundaries of their parents. USing positioning takes the element out of the document flow. Using relative positioning takes it out of the flow but uses its original position within the parent as the point of reference. Absolute uses the top left corner of the browser window as its reference. :)

http://jsfiddle.net/qkU7F/

The width will always reference the parent div, no matter what. So you can use jQuery to set the width of the element based on the window width.

var winWidth = window.innerWidth;

$('.aboutTop div').css("width", winWidth);

http://jsfiddle.net/qkU7F/3/

Upvotes: 1

geekman
geekman

Reputation: 2244

.aboutTop{
   position:fixed;
   width: 100%;
   height: 600px;
   background-color: black;
   margin-left: -100%;
   margin-right: -100%;
}

When you give a width:100% without positioning, it will take 100% with respect to parent division. You need to make it fixed, or you need to change the width of the parent division.

The code you write, must from start be aimed at what you want to achieve. For something like this, you should not have a parent division with less width.

If yo use relative positioning, or absolute with negative margin the width will still be 100% of parent division. You will have to increse width to something like 110% to achieve.

Upvotes: 0

Lucas Green
Lucas Green

Reputation: 3959

In this:

margin-left: -100%;
margin-right: -100%;

The percentages are relative to the parent element.

So if the parent element is 200px wide 100% will be 200px.

If you want something to span the width of the browser you have a couple of options:

Use absolute position and left:0; right:0;

make the element a direct child of the body element and set it's width to 100%

Upvotes: 0

Related Questions