CODEWITHSUNDEEP
htmlcss
S. A. Malik
S. A. Malik

Reputation: 3675

Div inside a container to have width greater then container width

We want a top bar on our page which is as wide as the browser's width. The problem is, it is inside a container div. If you pull it out of the container we can expand the div to the body width, but when it is inside the container it can only expand to the width of container.

Is there a solution through which we can expand the topbar past the container div.

<div id="container">
     <div id="topBar">
         <p>The Paragraph</p>
     </div>
</div>

Upvotes: 0

Views: 133

Answers (2)

Jason M. Batchelor
Jason M. Batchelor

Reputation: 2951

The other possibility is to remove it from the document flow with position:absolute. However, you need to know your height of the topBar, and will have to compensate by forcing a top margin on the rest of your content to keep it below your topBar.

For example, you could do:

#topBar {
    position:absolute; /* fixed might also work, here */
    top:0; left:0;
    width:100%;
    height:50px;
}

but you'd also have to have:

#container {
    margin-top:50px; /* or more */
}

This will break, however, if you need to make #container position:absolute or position:relative.

Upvotes: 1

Zoltan Toth
Zoltan Toth

Reputation: 47687

You can position the #topBar absolute without making it relative to its' immediate parent 

html, body {
    height: 2000px;
}

#container {
    width: 50%;
    margin: auto;
    height: 200px;
    background: beige;
}

#topBar {
    position: absolute;
    left: 0;
    background: #ccc;
    width: 100%;
}

DEMO

Upvotes: 3

Related Questions