CODEWITHSUNDEEP
css
Juris Malinens
Juris Malinens

Reputation: 1271

How to make CSS div width equal to browser width if element is inside wrapper element

What I have so far:

<style>
.wrapper {
    width:980px;
    border:1px solid red;
}

.element {
    width:10000px;
    overflow:visible;
    margin-left:-2000px;
    height: 20px;
    margin-top:100px;
    margin-bottom:100px;
    border: 1px dotted green;
}
</style>
<div class="wrapper">
    <div class="element">
    </div>
</div>

http://jsfiddle.net/8cyHR/

I want to remove horizontal scrollbar (.element must have the same width as browser's window width) but wrapper element still must be only 980px wide

Upvotes: 0

Views: 1747

Answers (2)

Paulie_D
Paulie_D

Reputation: 115061

The simplest solution...your CSS not withstanding is to take the specific div out of a wrapper. after all there is no reason why you can't have more than one wrapper.

<div class="wrapper">
    <div ></div>
</div>

<div class="element"> </div>

<div class="wrapper">
    <div ></div>
</div>

JSFiddle

Upvotes: 1

Sam Braslavskiy
Sam Braslavskiy

Reputation: 1288

Your question as I see it now drives my absolutely crazy, since it does not match your code at all. So, I've tried to work out multiple options for you.

Cant get what do you want - Case #1

Apply position:absolute or position:relative to the element, which will take it out of the normal flow, if you'd like to let .element be more than it's parent container. (have I understood you correctly? That's what you want?)

What do you want (case #2): If you'd like .element to be as wide as browser (window?), why do you use width:10000px?? use absolute positioning (see case #1) and width:100%

Case #3: if you don't want to see a horizontal scrollbar of an .element, than do overflow:auto, or overflow:hidden, instead of :visible (or simply remove it if it's not inherited).

Case #4: If you'd like to hide horizontal scrollbar of the WINDOW that may occur when your document is less than 10000px wide, use case #2 or add overflow:hidden to the parent div

PS. Why should one want to use margin-left:-2000px? :-) Is it for demonstration purposes only? Hope so

Upvotes: 1

Related Questions