Forum Moderators: not2easy
Does anyone have an explanation as to why an element's border can still stretch when it's been given a specific height and width?
Thanks
The main difference between CSS1 and CSS2 as far as general layout is concerned is positioning; CSS2 has it and CSS1 does not.
In CSS1 you're either dealing with inline or block level elements. Since we're talking block level a few key properties are important to understand.
display: block; - Block level elements are displayed this way automatically. You can apply this to inline elements if you desire to emulate block-level rendering which is something I do often.
clear: left/right/none; - Is a block-level element acting funny? Is it stuck further "up" the page in a way you didn't intend it to be? Some browsers clear and some don't. Either way try using clear when you encounter oddities.
float: left/right/none; When you float a block level element it's width collapses to only what it's inner content needs. Block-level elements aren't floated by default (none) and so they will automatically take up 100% of the available width.
When you add border, margin, and or padding the height and width is added to the height and width you've already set **if** you have specific values. **Otherwise** if no height/width is set (or you set them to auto) the border, margin, and or padding will subtract from the total width of the block-level element.
The most desirable method of creating a page's fundamental layout is to use CSS1 liquid layout.
Image a two column layout with content and a single side bar. You would think immediately that you want to add padding to the side bar and content from being too close to each other...you're way ahead of what you want to be thinking about.
In CSS1 liquid layout your parent-most block level element (the div element's who direct parent is the body element) should only have width specified along with their floats...you do not specify any border, margin, or padding.
What you end up figuring out is that you will use the first child block element's margins to *emulate* the padding.
This will work in browsers as old as Opera 3.6 and IE4 though Netscape 4 will suffer a heart attack; so essentially not only will the content stretch according to the resolution/rendering area available but CSS1 liquid layout is going to provide backwards compatibility beyond what any one in their sane mind would be looking for...which is a good thing. :-)
So an example would help right? I'm going to use background-colors to help emphasize what elements are what to make it devastatingly clear what I'm referencing.
The color red is the content parent, green is the content child. The color blue represents the sidebar, the aqua (light blue) represents it's first direct child.
So the green and aqua are not floating and thus take up 100% of the available width. Since the upper-most parents (#content/id="content and #sidebar/id="sidebar") only have width set they both equal 100%...no border, margin, and/or padding is added nor should it be! This is when you start adjust the first child elements. Remember, their margins are the parent's emulated padding.
Go ahead and try this in any browser you can find. The pattern of using margin to emulate padding in the parent-child relation of block-level elements should help you break in to the understanding of CSS1's basics. Good luck! :)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>CSS1 Liquid Layout Example</title>
<style type="text/css">
#content {
background-color: #f00;
float: left;
width: 75%;
}
#content div.padding {
background-color: #0f0;
margin: 8px;
}
#sidebar {
background-color: #00f;
float: left;
width: 25%;
}
#sidebar div.padding {
background-color: #0ff;
margin: 1px;
}
body, html {
margin: 0px;
padding: 0px;
}
</style>
</head><body>
<div id="content">
<div class="padding">
Content
</div>
</div><div id="sidebar">
<div class="padding">
Sidebar
</div>
</div></body>
</html>
Thanks very much for the reply. I needed an explanation like that to better my understanding of those functions. I've seen and heard about people using CSS2 but I was battling to use and understand it.
Thanks again.
I'm gonna try it our and let you know.
Is there anything that you could possibly tell me about that?
Thanks for the assistance
- John
I shall give it a try thanks.
I will might have to use that property because it looks like there is no other option.
Thanks again
