Forum Moderators: not2easy
Anyway for example what I am showing here it an attempt to do 150px margin using table cells. With table cells, the table is set to 100% with no border, then the margins you'd want from the content cell are provided by the left and right cells. Since they subtract out of the 100% of the table of which they are part of, the center cell now takes whatever is left and uses 100% of that remaining width. I have not found a way to format like this using DIVs though it would be nice to.
I've added a little coloring to highlight the cells and the div that I have set to 100%. I use this type of method on my live website (in my profile) though the posted example below does not have the 150px width I set to the left and right cells. I'm not sure how to force that width unless you add an item that has that exact width? Anyway here is the code...
<table style="border: 1px solid #ff0; width: 100%">
<tr>
<td style="border: 1px solid #f00; width: 150px;">left</td>
<td style="border: 1px solid #f00; width: 100%;"><div style="border: 2px solid"><p>content
div</p>
</div></td>
<td style="border: 1px solid #f00; width: 150px;">right</td>
</tr>
</table>
<div id="content>
<p>blah blah</p>
</div>
#content {
margin-left: 150px;
margin-right: 150px;
}
The problem you're experiencing is caused by declaring a 100% width on the content. You should just let the default ride, which is the width of the container for block elements.
The borders were just for illustration purposes correct?
BTW,
Some browsers including IE6 ADD margin and padding or something /whatever to the width so if you add the width of say three DIVs that adds up to 100 their combined width ends up really being over 100%
[google.com...]
Some browsers including IE6 ADD margin and padding or something /whatever to the width so if you add the width of say three DIVs that adds up to 100 their combined width ends up really being over 100%.
Sounds like you're talking about IE's many float bugs [google.ca]. Most of these are killable, one way or another.
Anyway for example what I am showing here it an attempt to do 150px margin using table cells. With table cells, the table is set to 100% with no border, then the margins you'd want from the content cell are provided by the left and right cells. Since they subtract out of the 100% of the table of which they are part of, the center cell now takes whatever is left and uses 100% of that remaining width. I have not found a way to format like this using DIVs though it would be nice to.
Huh? Why couldn't this work?
<div style="padding:0 150px;">Lorem ipsum dolor sit amet consectetuer...</div>As your_store mentioned, based on your description, all you need to do is to not explicitly declare the width of the div in question, since a div (like other block level elements) will always occupy 100% of the width of it's container unless you specify otherwise. This is true even if you've applied all sorts of margins, padding and borders to it.
This does assume, of course that you've squashed the IE float bugs mentioned above using the Holly Hack [google.ca] or other relevant method and fixed all the box model [google.ca] issues with IE 5.x - but IE's float bugs can almost always be beaten.
-B
