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


Tags: css

Problem :

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



Solution :

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


    CSS Howto..

    How to squircle an app icon image with just CSS

    How to turn off visjs active shadow box?

    how can resize the page? [closed]

    How to stop text from overlapping CSS?

    How do I add a margin between bootstrap columns without wrapping

    How does one reduce the height of fontawesome text?

    How to show parts of sprite with CSS keyframes to create animation?

    Font Styling Issue ~ how to make font smooth/Strong in html css

    How to float elements in rows.

    How to override a part of the style in the site.master page?

    how to style xml tag attribute with css

    How to apply css style for dynamic tr with td and input tag?

    How to override PrimeFaces CSS via external stylesheet

    how to use two css style in a div or span

    Polymer 1.x: How to imperatively (using JS) obtain the value of a custom CSS property?

    How to apply properties to 3 types of input on HOVER?

    How to dynamically change the style of a comma separated tags with html/css/jquery

    CSS Media Queries: How to make the right column display above the left on small screens?

    css - How to make the view window grows while the user zooms in?

    Google Share button not showing properly if originaly hidden

    how to have a css in javascript when onsubmit trigger in another window?

    How to rotate an element around a line other than X=0,Y=0 and Z=0 using CSS3?

    How to stick a div when scrolled past 50% of the item?

    How do I get these elements to effectively center properly and responsively?

    Show / Hide HTML using swatch / HTML 5 - dynamic HTML

    How to add js and css files in ASP.net Core?

    How to change CSS over selected element only using $(this)

    Show overlay in background when hovering over parent menu items

    How do you create a transparent overlay with text upon mouse hover?

    How to position the element using absolute position?