Here is my code:
#page{
background-color: White;
border-left: 1px solid #777;
border-right: 1px solid #777;
width: 580px;
padding: 10px;
}
I wanted the page to be 600px wide with an internal padding of 10px. I had to diminish the 600px to 580px to accomodate the padding (2x10) 20px. Is this normal?Yes, here's why (<!-- m --><a class="postlink" href="http://www.ryanbrill.com/archives/00009.php">http://www.ryanbrill.com/archives/00009.php</a><!-- m -->)...Okay, to extend this further, I used your (Pyro) example for rounded corners.
I want the whole page to scale to the size of the client's window. Since my content DIV has a padding, it will extend past both top and bottom divs which contain the rounded corners. I assume that its not possible to do 100% - 20px for the width of a DIV??
I was thinking adding a DIV inside of my content DIV and apply the padding to that. This would limit it to its parent size?Originally posted by DanDigiMan
I assume that its not possible to do 100% - 20px for the width of a DIV??
Actually, depending on what exactly you need, it may be.
<div style="width: 100%; color: #000; background: #eee; padding: 0 10px; margin: 0 -10px;">foo</div>
Originally posted by DanDigiMan
I was thinking adding a DIV inside of my content DIV and apply the padding to that. This would limit it to its parent size?
Yes, that would be the other, more common, solution.How about affecting 100% to the BODY and using my current DIV for the padding?
It almost works, but I have a 1px deviation on both right edges (top & bottom).You lost me on that one...
Sorry
Okay, how about I add width: 100% to the BODY. Then, keep the existing padding on the content DIV? Would this be considered a good option?
I tried this very same option, and it almost works. Both of my right coners are off by 1px. I'll have to dig to find out what makes them behave like that.
Hope this is less confusing! LOL100% will be the default, and you do not need to set it.
If you post a link, perhaps someone will see why the borders are off by 1 px.Wow, okay... if someone could check this out, it would be cool.
Here is the link:
Link here (<!-- m --><a class="postlink" href="http://dstudios.ca/temp/s.html">http://dstudios.ca/temp/s.html</a><!-- m -->)
Notice the right edge has 1 pixel deviation...Change your styles for #page to:
#page{
width: 100%;
background-color: White;
border-left: 1px solid #777;
border-right: 1px solid #777;
padding-bottom: 1px;
}What was the 1px spacing problem? Was it the clear: both clause? Now it seems that padding-bottom: 1px is sort of a hack because if I remove it, I get a big gap between the content and bottom graphics.
What are your thoughts on the way it was coded?
#page{
background-color: White;
border-left: 1px solid #777;
border-right: 1px solid #777;
width: 580px;
padding: 10px;
}
I wanted the page to be 600px wide with an internal padding of 10px. I had to diminish the 600px to 580px to accomodate the padding (2x10) 20px. Is this normal?Yes, here's why (<!-- m --><a class="postlink" href="http://www.ryanbrill.com/archives/00009.php">http://www.ryanbrill.com/archives/00009.php</a><!-- m -->)...Okay, to extend this further, I used your (Pyro) example for rounded corners.
I want the whole page to scale to the size of the client's window. Since my content DIV has a padding, it will extend past both top and bottom divs which contain the rounded corners. I assume that its not possible to do 100% - 20px for the width of a DIV??
I was thinking adding a DIV inside of my content DIV and apply the padding to that. This would limit it to its parent size?Originally posted by DanDigiMan
I assume that its not possible to do 100% - 20px for the width of a DIV??
Actually, depending on what exactly you need, it may be.
<div style="width: 100%; color: #000; background: #eee; padding: 0 10px; margin: 0 -10px;">foo</div>
Originally posted by DanDigiMan
I was thinking adding a DIV inside of my content DIV and apply the padding to that. This would limit it to its parent size?
Yes, that would be the other, more common, solution.How about affecting 100% to the BODY and using my current DIV for the padding?
It almost works, but I have a 1px deviation on both right edges (top & bottom).You lost me on that one...
Sorry Okay, how about I add width: 100% to the BODY. Then, keep the existing padding on the content DIV? Would this be considered a good option?
I tried this very same option, and it almost works. Both of my right coners are off by 1px. I'll have to dig to find out what makes them behave like that.
Hope this is less confusing! LOL100% will be the default, and you do not need to set it.
If you post a link, perhaps someone will see why the borders are off by 1 px.Wow, okay... if someone could check this out, it would be cool.
Here is the link:
Link here (<!-- m --><a class="postlink" href="http://dstudios.ca/temp/s.html">http://dstudios.ca/temp/s.html</a><!-- m -->)
Notice the right edge has 1 pixel deviation...Change your styles for #page to:
#page{
width: 100%;
background-color: White;
border-left: 1px solid #777;
border-right: 1px solid #777;
padding-bottom: 1px;
}What was the 1px spacing problem? Was it the clear: both clause? Now it seems that padding-bottom: 1px is sort of a hack because if I remove it, I get a big gap between the content and bottom graphics.
What are your thoughts on the way it was coded?