<div /> versus <div></div>

[petefs]

I have a two-column box set up as such:


<div class="box">
<div class="col-left">
<h3>One</h3>
<p>Two</p>
<h5>$6.25</h5>
<hr />

<h3>One</h3>
<p>Two</p>
<h5>$5.99</h5>
<hr />
</div>
<div class="col-right">
<h3>One</h3>
<p>Two</p>
<h5>$7.99</h5>
<hr />

<h3>One</h3>
<p>Two</p>
<h5>$7.99</h5>
<hr />
</div>
<div class="clear"></div>
</div>


and CSS as such:


.box {
margin: 0 0 20px 0;
padding: 20px 10px;
background: #fff;
}
.box .col-left {
position: relative;
float: left;
margin: 0;
padding: 0 10px 0 0;
width: 215px;
border-right: 2px solid #eee;
}
.box .col-right {
position: relative;
margin: 0 0 0 235px;
padding: 0;
width: 220px;
}
.clear {
clear: both;
}

Works fine, no problems. If I switch the clear divs to this:


<div class="clear" />

everything breaks.

Not a huge deal, but I'm curious. Can somebody explain it? (ditt0? ^_^)
[/code]

[ditt0]

You cannot use elements like paragraph , div, titles etc. (elements that involve a content ) in the minimised form. The only elements that can be minimised are: area, base, basefont, br, col, frame, hr, img, input, isindex, link, meta and param.

[petefs]

fantastic, that's what I needed to hear ^_^

[senocular]

which, IMO, is stupid. I hate having to fill my divs with content when I want them to work ... without content :P

[ditt0]

@senocular: You can always use like that the elements that accept minimised form:) And it's not like you have to add content, you just have to use an opening tag and a closing tag.

[senocular]

I think you pretty much have to add content. One of them, IE I think, will crap out if you dont use any content at all. You can even use a comment and that will work, but it needs at least some content. I do it by habit now, so I dont know what will happen exactly or the consequences of not having content. I prefer using divs because they are a standard box element and its more (or less) semantic for their purposes.

[petefs]

Slowly but surely pulling away from the tables still? : )

It's a tug of war contest in this office, but I'm making headway ; )

[senocular]

Slowly but surely pulling away from the tables still? : )

It's a tug of war contest in this office, but I'm making headway ; )

Im back to using tables pretty much as much as I did before. There's just too many differences between browsers and how they handle css and divs they way you think they should. Sadly, it sounds like IE 7 isnt changing that much.

[fluid_tw0]

css gives you controll over EVERYTHING, sen ;)

[senocular]

close to everything and not every browser supports it well enough to make that true in practice

[petefs]

Im back to using tables pretty much as much as I did before. There's just too many differences between browsers and how they handle css and divs they way you think they should. Sadly, it sounds like IE 7 isnt changing that much.

Yeah, I saw the 'news/rumor' today that IE7 most likely won't be implementing the full CSS2 standard. I'm beginning to doubt the rumour that Zeldman would be working on IE7 ; )

As far as layout goes, you can get most things done with CSS1 and minimal box-model hacking for IE's lack of standards compliance. Oddly enough I preffer IE's box model, but still... I find that learning how to overcome the differences provides a better working environment for me in the end. I get headaches with all the <tr> and <td> tags personally ^_^

[MTsoul]

There is always one or more ways to work around a browser bug or lack of support for css/xhtml. I think IE7 is probably going to be much similar to the situation now. Web developers would need to get used to the new rendering engine, (lack of) support for other tags etc.