Forum Moderators: not2easy
So, I want to split a page in half? Better buckle down, and start thinking "outside the box", pun intended. Seriously though, every time I think to myself, "I'll do a simple CSS layout", I end up battling it out and then deciding it's not worth it and doing the positioning with javascript.
Take a look at this little example. It looks equally bad in IE and FF.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
body{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
}
div{
margin: 2px;
border: 5px solid black;
padding: 2px;
}
.left{
position: absolute;
left: 0px;
top: 0px;
width: 50%;
height: 100%;
overflow: hidden;
}
.right{
position: absolute;
right: 0px;
top: 0px;
width: 50%;
height: 100%;
overflow: hidden;
}
.full{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
overflow: hidden;
border: 5px solid red;
}
</style>
</head>
<body scroll=no>
<div class="left">
<div class="full">
</div>
</div>
<div class="right">
<div class="full">
</div>
</div>
</body>
</html>
trying to figure out why width: 100%; would ruin all possibility of having a border
It doesn't, it just means you can't have the width and the border on the same element. If you need to have a 100% width element with a border, you have to split those two properties between elements, so that there is no conflict.
So while this causes box model problems...
html:
<div id="box">
<p>Lorem ipsum doolor sit amet.</p>
</div>css:
#box{
width:100%;
border: 5px solid red;
}
...this does not...
html:
<div id="box_outer">
<div id="box_inner">
<p>Lorem ipsum doolor sit amet.</p>
</div>
</div>css:
#box_outer{
width:100%;
}
#box_inner{
border:5px solid red;
}
cEM
element {
width: 100%-5px;
}
another element {
width: 5em+3px;
}
You're right, but your solution needs markup spam - so it's not good either.
"markup spam" ... that's an interestingly stilted phrase. ;)
Actually, your post made me rethink what I said and I realized I missed an important point.
A div is a block level element, which means that it defaults to 100% the width of it's container, anyway. To be more specific, block level elements take a width setting, and the default width setting is auto. Auto width is calculated by placing margins, padding and borders, then all the remaining space in the container is assigned to the content width.
Which means that you can just apply the border, with no width, and get the 100% wide, bordered results you're after.
html:
<div id="box">
<p>Lorem ipsum dolor sit amet.</p>
</div>css:
#box{
border:5px solid red;
}
cEM
"markup spam" ... that's an interestingly stilted phrase. ;)
How would you call using nested div's only to be able to achieve visual effect with CSS? Maybe phrase is not very good, but this is very common problem - people think that site is conforming standards, but don't see they must use lots of markup not giving additional information about it's content.
This phrase is commonly used by Literary Moose - I don't know if he invented it.
Actually, your post made me rethink what I said and I realized I missed an important point. (...)
"markup spam"
But if you would like to create div element, using 50% of viewport's width, with 2px border
body{
position: absolute;
top: 0px;
left: 0px;
make your cached pages in the search engines look funny. I am not telling, I am asking because I would like to know.
But if you would like to create div element, using 50% of viewport's width, with 2px border
<div style="width:50%; border:2px solid red;">
"markup spam"
To my mind, that is now an "old fashioned" term (in web years anyway!) which came from HTML that was commonly used to build completely tabled pages/layouts.. i.e. multiple nested tables. If the nesting was only to produce a visual effect it is indeed unnecessary and would cause said markup spam.
To apply the same terminology to a page using mostly CSS is also true but if you've got the length of even thinking about the "weight" of your pages then a CSS page even with (what should be) "unnecessary" HTML is still a lot lighter than in previous years. The main thing is that you've started to think about what's in the document as opposed to the "how it should look"
(Very) Unfortunately, until the CSS specs are fully supported it is an "evil" we have to live with. The "Literary Moose" (tips hat in acknowledgement) is well known for "pushing the envelope" with CSS, but most of his experiments are dedicated to an Opera environment and whilst they are superb, they most often don't work in practical applications. What he is showing us now is a glimpse of the future, hopefully :)! ~ which is great to learn from! My advice fwiw, if you need a site to work now you need to find your middle ground, and markup spam may be something you have to live with for a while longer yet..
main culprit: e.g. if IE would allow us to treat the <body> element as a proper child of the <html> element (give it width and margins..) we would be off to a flying start.. :) ..no "wrapper" divs would be required, This would be the first/biggest step to removing markup spam. Although admittedly it's not hard to add a wrapper div when scripting, (unlike another parent table?)
If we were already used to thinking about marking up a document instead of thinking how to fit things into little boxes (table cells) I'm sure this process would be a lot clearer/easier?
Back on topic..
Why can't border and margin be INSIDE the block?
because any borders and margins should be applied to the elements (not tags ;)) that make up the document i.e. the parts of the document you are styling.. - media dependant - instead of trying to create your personal "visualised" blocks, not all document viewing environments are a PC screen!
If you want a visual effect e.g. a background border runnning down the page then why not use a background image, You can, with CSS, position/place your "blocks" on background images without using "pixel perfection" too ;)
and again IMO... "faux columns", maligned though they are sometimes, to my mind have the right idea - they are separating visual style from document content. Who cares when they listen to a document, or view it on an handheld if you've got a nice perfect 2px border?
Suzy
Of course I know, that unnatural nesting divs, or using background tricks in many situations is needed to create desired layout.
It is not weight of document what I am complaining about. I'd just like to say, that creating document with improper nesting of elements disallow author or user (with user CSS) to re-style page the way he wants it. Literary Moose is Opera fanatic - it isn't exclusive or well-hidden information :), but his examples of using styles are mostly not Opera-specific - they stay in compliance with specifications.
I found important (I think) on-topic link: [w3.org ].
box-sizing: border-box rule shall satisfy everyone.
