yet another div width question

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
Kaervek
Forum Commoner
Posts: 25
Joined: Fri Jul 08, 2005 7:17 am
Location: Newfoundland
Contact:

yet another div width question

Post by Kaervek »

you guys must have heard this one a hundred times
but i turned here because i cant find a satisfactory answer online anywhere

all i freaking want is a div that is 100% of the browser window width to display properly in IE

like this
<div style="position:absolute; left:0px; top:350px; width:100%;">

i've read that its something to do with my body tag has margins or some such...
is there any simple fix for this in IE?
User avatar
olog-hai
Forum Commoner
Posts: 34
Joined: Thu May 31, 2007 8:47 am
Location: Québec city, QC, Canada

Post by olog-hai »

you can use javascript screen.width and assign this with to your div, but it will not be a maximized windows.

document.yourdiv.width = sreen.width
User avatar
Zoxive
Forum Regular
Posts: 974
Joined: Fri Apr 01, 2005 4:37 pm
Location: Bay City, Michigan

Post by Zoxive »

Code: Select all

 position:absolute;
 left:0px;
 right:0px;
User avatar
figaro11
Forum Commoner
Posts: 64
Joined: Mon Sep 17, 2007 11:49 pm

Post by figaro11 »

Try adding:

Code: Select all

body {
overflow: auto; /* Or hidden or scroll, whichever you choose */
margin: 0px
}
Hope that helps. ;)
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

Could you explain your problem some more? A div always takes up 100% of it's parents width. So I don't understand the problem.

O wait, maybe one issue I can think of is that you haven't set the default margins and paddings of the body element to zero. The thing is, each browser has it's own default styles for a document. IE probably gives the body some margin.

if you do a search for "reset css" you'll find a few articles (for example http://meyerweb.com/eric/thoughts/2007/ ... -reloaded/) about how to reset almost all styles to basic (zero) defaults, after which you can start adding your own styles. Makes developing a bit easier, certainly if you aren't aware of the differences.
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

Post by JAB Creations »

Kaervek, your post isn't clear enough. Is this element have the greatest parental status in relation to the body, or is it a child to any element first before the body?

Greatest Parent Example
<body><div id="your_100_percent_div">

Not Greatest Parent Example
<body><containing_element><div id="your_100_percent_div">

If your element a the greatest parent then set the body to have no padding (which is commonly mistaken on the body element as margin). So set the body to have no margins or padding.

Then set your desired greatest parent element to have no set width, no border, no margins, and no padding. If you set the width set it to auto.

To add "padding" you may not add padding to this element, you must instead add margins to the greatest parent's first child...

<body><div id="your_100_percent_div"><div>

#your_100_percent_div {
border: 0px;
margin: 0px;
padding: 0px;
width: auto;
}

#your_100_percent_div div {
margin: 4px;
}
Kaervek
Forum Commoner
Posts: 25
Joined: Fri Jul 08, 2005 7:17 am
Location: Newfoundland
Contact:

Post by Kaervek »

so your saying that i cannot have a 100% div that exists inside any element that isnt 100%.

doesnt that kind of defeat the purpose of absolute positioning?

god i hate IE
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

Post by JAB Creations »

IE4 handles liquid CSS1 just fine, the problem is with many people who are for standards themselves don't quite understand (as I did not myself) how to correctly use divisible elements in a liquid fashion nor have I come across a site that I am actively aware of that uses one but they do work fine!

A block level element will take up 100% of available space if the width property is not set or set to auto. Giving that element a background color you'll notice by default it's width (regardless of anything you set it to) will automatically stretch to 100%. Once you add a float however it will by default only take up the horizontal space needed for all inner content. If you create enough content in a floated block element that has no width or width set to auto it will take up to and including 100% of the available width.

When width is set to auto or not set at all borders, margins, and padding will take from the available total width (what people desire). When you set any explicit value (% or pixels for example) the borders, margins, and padding will add to the total width you have set.

Therefor the trick to a liquid layout is to have your parent div set the total width (such as two column layout of 20% and 80% width with float: left) without setting any borders, margins, or padding. THEN you add child elements, don't set the width (they won't effect the parent divs and thus won't effect your visual layout). Those child elements may have margins (which to you looks like the parent's padding. THAT is the key to understanding the basics of a liquid layout which will work fine in IE4 and Opera 4 for example.

If you don't get it try this code...

XHTML

Code: Select all

<div id="left"><div>left</div></div><div id="right"><div>right</div></div>

CSS

Code: Select all

#left {
 background: #f00;
 float: left;
 width: 80%;
}
#left div {
 background: #ff0;
 margin: 4px;
}
#right {
 background: #00f;
 float: left;
 width: 20%;
}
#right div {
 background: #0ff;
 margin: 4px;
}
Post Reply