View Full Version : Width Setting

11-02-2008, 01:27 AM
Is it possible to set a width of a div to whatever size the screen is?

11-02-2008, 02:09 AM
First off, divs by default expand to fit. Meaning that if not constrained by any parent elements or manual styles, they will stretch to the entire screen. You can change a div with a set width to do this by:

document.getElementById("my_div").style.width = "auto";

However, if you are looking for a way to grab the browser's current width, here's how it'd be done:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
margin: 0;
padding: 0;

width: 200px;
height: 100px;
background-color: orange;
<script type="text/javascript">

function fitScreenWidth()
if (window.innerWidth) var w = window.innerWidth;
if (document.body.offsetWidth) var w = document.body.offsetWidth;
document.getElementById("my_div").style.width = w+"px";

function setWidthToAuto()
document.getElementById("my_div").style.width = "auto";

// -->

<input type="submit" value="fitScreenWidth()" onclick="fitScreenWidth()" />
<br />
<input type="submit" value="setWidthToAuto()" onclick="setWidthToAuto()" />
<br />
<div id="my_div"></div>


11-02-2008, 05:48 AM
Or you know, you could just do this :)

#div {

11-02-2008, 05:59 AM
I'm assuming he doesn't have access to the CSS code on load. Figured he had to change a pre-determined div to fit the screen client-side.

Anyway, giving a div a width of 100% doesn't actually do anything unless it's been previously given a width value.

divs by default expand to fit. Meaning that if not constrained by any parent elements or manual styles, they will stretch to the entire screen.

11-02-2008, 11:58 AM
You must also note that there are some default margins on a page which must be cleared if the <div> is to fit the entire browser window. The example by itsallkizza has this in the CSS with the body {} code.

Although I don't understand the need for for JavaScript here. It should automatically change to the size of the browser window regardless.

Also it might be confusing so I will say it again, a <div> will automatically expand horizontally all of the way to fill its container, so if the <div> is inside of another <div>, it will only expand to the width of the outer <div>. These elements are called block elements, because of how they set the content in large blocks. If a <div> is not inside any other element (besides the <body> tags of course) it will expand to the entire page.

11-02-2008, 11:15 PM
Okay, let's say I have a semi-transparent div, with an opacity level of say, 80.

How do I get this div, so that when you click a link (don't worry about that part), the div is over the whole page?


If a <div> is not inside any other element (besides the <body> tags of course) it will expand to the entire page.

you can't really see it because it's completely transparent, I think? Or am i just confusing myself and you?

11-02-2008, 11:18 PM
transparency has nothing to do with the size of the div

give us an example page if you have it, and point us to which div you want to expand to fit the page, then we can help you specifically

11-02-2008, 11:25 PM
Okay, I know transparency has nothing to do with it. It's just in my page (in IE). Haven't got an opaque div in Firefox or Safari yet. I don't have an example page right now. However, I will have one soon. I'll give you the link when I do.

11-02-2008, 11:27 PM
So you want to do something like the Lightbox scripts do?

That is done with Javascript, which it sounds like what you are thinking as well. I haven't tested this, but basically you need a DIV which is hidden from view until some link is clicked, at which point some fun JavaScript probably turns the hidden layer visible and puts it above the page content (with the opacity).

Would one of the lightbox scripts already written help?

11-02-2008, 11:38 PM
Yes, that is what I want. As long, as the lightbox takes up the whole page. What I mean is, if you scroll horizontally or vertically, the lightbox isn't there.

11-02-2008, 11:53 PM

11-03-2008, 12:06 AM
Ha, I'm starting to get on the image idea of it now. Well, yeah, I guess, but instead of an image, I could have like text on a semi-transparent background. Or I could have the image, without the border. Something I'll have to think about, but I have to remember what I wanted in the first place anyway.

When you click something, a semi-transparent div shows up with text in it.

Now, what could happen is that you could set a div to appear onClick in the top left hand corner of the site. This div would have an opacity of 80, I guess. I have been able to do that up to those steps. What I can't do is set the width and height to cover the whole screen. Maybe it could float, too so you wouldn't see any blank spots. I'll dig around for the code.

11-03-2008, 01:48 AM
i don't have much experience with lightbox but i've worked with ibox many a times and it can do precisely what you're asking, it has built in functions you can call

visit that second link i posted and check out their examples

11-03-2008, 02:35 AM
It seems like an image to me...unless it's in the .zip folder?

I can't download js files, either. I would need the actual code.