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 increase the gap between text and underlining on my navbar links

    How to create this CSS border

    How to make CSS zig-zag borders? [duplicate]

    how to create a table layout with float in css

    How to make <'details'> drop down on mouse hover

    How To Fix This “Select” Drop Down Using Css [duplicate]

    CSS: how to do away with automatic rescaling of font-size on Safari

    How to auto adjust parent DIV height according to the contents in child DIV?

    How to change the CSS on the last clicked div

    Menu CSS showing current page in a single html file

    How do I enable SASS line numbers in CSS output?

    How can I make kinetic.js full screen background view

    how to use css align control one row

    How to add border to a container with transparent gaps in between

    How can I align a button at the bottom of a div?

    How to use jQueryUI tootip along with my custom css

    How to reduce font size on a defined css style?

    How to Fade In Background on Page Load - jQuery

    How to center body on a page?

    How to get height of CSS manipulated image?

    How to get Material-UI Drawer to 'squeeze' other content when open

    How to position hidden speech bubbles

    How classes work in a CSS file? [closed]

    How to change text color for link in tr element with CSS

    jQuery select box Show/hide div

    css responsive design: how to improve my page ?

    How to get multiple bottom only borders on a circle

    How to customize in javascript?

    Simple slideshow not working properly

    How to programmatically check CSS styles for particular elements? [duplicate]