make width of a div equal to width of the screen, regardless of the width of its containing div [closed]

Question

Closed. This question needs to be more focused. It is not currently accepting answers.

---

Want to improve this question? Update the question so it focuses on one problem only by editing this post.

Closed 9 years ago.

Improve this question

I have two divs:

<div id="container">
  <div id="content">
    I want this div to take the width of the browser!
  </div>
</div>

#container div has a width bigger than the screen width. I want the div #content to take the width of the browser. I am making my website responsive, when the phone is in regular position, browser size is 320, and when it is horizontal, it's 480. I want the #content to responsively change width.

How can I do that? Thanks

EDIT

I think that I cannot use css. I should have explained this earlier, but the problem with using absolute positioning in css is that I need to keep the position of #content relative, container is a slider containing 3 #content divs. when I slide with finger, I want the active div to take width of the screen. so I can't really use absolute positionning!

Answer 1

Try to use:

$(window).resize(function() {
    $('#content').width($(this).width());
}).resize();

Answer 2

Why on earth does #content have a width of 9000? It sounds like there is probably a better way to implement your design.

That said, the below will work:

Demo Fiddle

HTML

<div id="container">
    <div id="content">I want this div to take the width of the browser!</div>&nbsp;
</div>

CSS

html, body {
    width:100%;
    margin:0;
    padding:0;
    position:relative;
}
#container {
    width:9000px;
}
#content {
    position:absolute;
    width:100%;
    background:red;
}

Answer 3

You want to do this in CSS and HTML.

First, in html use a viewport.

<meta name="viewport" content="width=device-width, user-scalable=no">

then in css use:

body{
width:100%;
overflow:hidden;
}

#container{
width:9000px; 
height:200px;
overflow-x:scroll;
overflow-y:hidden;
}

On a side note - why is your container 9000px?

it's always best practise to impliment your CSS as fluid structure rather than set widths - so try the following instead:

#container{
width:100%;
overflow-x:scroll;
overflow-y:hidden;
}

#content {
width:auto;
height:100%;
}

Presuming you're after a scrollable content that takes full width anyway.

Answer 4

You can do this in CSS using position:absolute on #content and then setting your width, which in this case is 100%:

#content { position: absolute; width: 100%; }

SEE FIDDLE

However, this only works if none of it's parent elements have position:relative on. If they do, I'd use Felix's answer

Answer 5

Working demo

It can be done using CSS itself:

#content {
    width: 100%;
}

If you want to customize the background and other properties based on the screen resolution, then media queries is the best option

@media (max-width: 480px) {
   #content {
        width: 480px !important;
  }
}
@media (max-width: 30px) {
   #content {
        width: 480px !important;
  }
}