Page 1 of 1
yet another div width question
Posted: Thu Sep 27, 2007 7:47 am
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?
Posted: Thu Sep 27, 2007 9:08 am
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
Posted: Thu Sep 27, 2007 9:21 am
by Zoxive
Code: Select all
position:absolute;
left:0px;
right:0px;
Posted: Thu Sep 27, 2007 11:40 am
by figaro11
Try adding:
Code: Select all
body {
overflow: auto; /* Or hidden or scroll, whichever you choose */
margin: 0px
}
Hope that helps.

Posted: Thu Sep 27, 2007 2:37 pm
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.
Posted: Thu Sep 27, 2007 4:11 pm
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;
}
Posted: Fri Sep 28, 2007 1:14 pm
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
Posted: Fri Sep 28, 2007 1:26 pm
by JAB Creations
IE
4 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;
}