CODEWITHSUNDEEP
javascripthtmlcss
TIMEX
TIMEX

Reputation: 272372

How do I make a div that is the width of the entire screen?

If a div A is contained inside another div (B) that is 500px wide, how can div A still be the width of the entire screen? I want to "break out" of that 500px div.

Upvotes: 0

Views: 163

Answers (8)

defau1t
defau1t

Reputation: 10619

You can add a class or id to your div tag. This css will work for both

#yourdivid .yourdivclass {
     position:absolute;
     left:0;
     right:0;
     overflow:hidden;
}

Upvotes: 0

JasonMortonNZ
JasonMortonNZ

Reputation: 3750

<div id="b" style="width:500px;">
   <div id="a" style="width:100%; position:absolute; overflow:hidden;"><div/>
</div>

This works.

Upvotes: 0

Joseph
Joseph

Reputation: 119887

Given your question, you could use position:absolute in div A. It will find the nearest positioned parent (a parent that has either fixed, absolute or relative position). But you need to have the nearest positioned element have 100% width and is positioned snug to the left.

here's a demo using body

<body>
    <div id="b">
        <div id="a">test</div>
    </div>
</body>

body{
    position:relative;
}

#b{
    width:500px;
}

#a{
    position:absolute;
    top:0;
    left:0;
    right:0;
}

Upvotes: 4

Tom
Tom

Reputation: 4662

You can use min-width to force the div B to certain width - 

<div id="a" style="width:500px;display:block;">
  <div id="b" style="min-width:960px;">
  </div>
</div>

You can also use javascript to set its width - 

<script style="text/javascript">
window.onload = function () {
  document.getElementById ("b").style.width = window.screen.width;
}
</script>

Upvotes: 0

SmithMart
SmithMart

Reputation: 2811

jsfiddle for you: http://jsfiddle.net/HRT2M/

.b
{
Position:fixed;
}

on div b should get it working for you

Martyn

Upvotes: 0

Th0rndike
Th0rndike

Reputation: 3436

It depends on what you want it to look like. Using the css:

overflow:hidden;

will make the div be larger than the containing div but hidden behind it,

otherwise, if you want it to be shown on top of the containing div you could use the 'position' css like the other answers given.

Upvotes: 0

bunsiChi
bunsiChi

Reputation: 125

you can try to make div A's position: absolute;

Upvotes: 0

alex
alex

Reputation: 490637

Use position: absolute on the child div and keep the parent on position: static.

Upvotes: 1

Related Questions