That solution doesn’t work unless I reorder the divs (I would need to change A B C D into a non-semantic ordering of A C B D), but examining it I realised that I needed a clear:left; on the left-hand divs and this fixes it.
Here is my theory on why:
First, to clarify, we have the following in the markup:
DivA
DivB
DivC
DivD
and I want them to lay out on the page as:
Fig1:
DivA DivC
DivB DivD
Where DivA and B are both wider than half of the enclosing container.
So I float DivA and DivB to the left, and apply a margin-left to DivC and DivD
However, if I don’t apply clear:left; to DivB, then what the browser tries to lay out is:
Fig 2:
DivA DivB
DivC
DivD
But the container is too small to accommodate Div A and B next to each other so we get the bad layout which I had a problem with:
Fig 3:
DivA
DivB DivC
DivD
I think Chrome and Firefox recognise that because Div B is moved to below DivA, then the space DivB would have occupied in Fig2 is now free, and DivC can be moved into it.
On the other hand IE7 doesn’t recognise this, so places DivC below the space which DivB would have occupied in Fig2.
Applying clear:left; to DivB makes Fig 2 into
Fig 4:
DivA
DivB
DivC
DivD
Which means that DivC and DivD can easily slide up to their proper positions.
Why not work with two floating containing divs holding the separate divs?
Edit: You have #mission_statement float: left. And after that you clear it left as well? I don’t see why you can’t float #about-us left as well. I.m.h.o. will you get what you want
Adding extra tags to your Html for presentation alone is not only bad practice, it also results in inflexible heavy pages with markup which is more difficult to read.
Tag soup (or Div soup) refers to markup which contains lots of tags which have no real meaning in relation to the content and are only there for layout or other presentation. Adding in tags for layout is little better than using a table to lay out your website.
I believe all my markup is semantic (with one exception: the “page” div - couldn’t seem to work around that), but if you think there are elements in there which are non-semantic and only there for presentation, by all means let me know: I’m interested to hear your suggestions.
If I had to guess, it’s because you’ve got div containers which seemingly don’t have a purpose to them other than for hooks to style.
[LIST=1]
[]header could be removed by applying the style to the h1 instead. Though semantically I would move the navigation in there…
[]You could arguably remove all of these divs: mission_statement, scope, about_me, about_lindy, colophon and development. If you want separators, then give the id to the h2 and apply the style to that h2 instead.
[*]remove the .current spans and apply the class to the list item instead.
[/LIST]Personally, I would remove all the divs I listed above, add one around what is currently the about_me and about_lindy divs, then move it outside the “content” div (possibly renaming it to something else). I would then float the new about div right and the content div left, which would create balance and consistency.
What I mean to say is that the current markup with margin-left, and left properties in the same rule doesn’t make any sense to me. It also doesn’t make any sense to use two different divs for about_me and about_lindy. Those two can easy be combined into one div and use pseudo class to target your second <h2> tag.
Edit:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html,body,address,blockquote,div,form,fieldset,caption,h1,h2,h3,h4,h5,h6,hr,ul,ol,ul,li,table,tr,td,th,p,img {
margin: 0;
padding: 0;
}
ul, ol, li {
list-style-type: none;
}
img,fieldset {
border: none;
}
body {
background: url("../images/flock_02_by_ZEBiii.jpg") 0 0;
color: #0F0F0F;
font-family: Futura,"Tw Cen MT","Trebuchet MS",sans-serif;
}
#page {
width: 900px;
margin: 0 auto;
overflow: hidden;
background: #FEE6B8;
}
#content {
width: 843px;
margin: 35px 30px 50px 27px;
font-size: .875em;
}
#mission_statement {
float: left;
width: 447px;
border-right: 3px solid #0F0F0F;
}
#mission_statement em {
display: block;
font-size: 1.2em;
font-style: italic;
margin-top: 0.8em;
padding-left: 30px;
}
#mission_statement p {
margin: 0 50px 10px 0;
}
#about_me {
width: 343px;
float: left;
}
#about_me p {
margin: 0 0 10px 50px;
}
#mission_statement h2,
#about_me h2 {
line-height: 1.5;
text-transform: uppercase;
font-size: 1.4em;
text-align: center;
}
</style>
</head>
<body>
<div id="page">
<div id="content">
<div id="mission_statement">
<h2>Mission statement</h2>
<p>This website is born out of my own frustration at trying to find details of Lindy Hop events in London, particularly when I was just starting out. While there are a couple of listings sites around they don't provide the information I need in the way I want it, so I decided to make my own (as you do).</p>
</div>
<div id="about_me">
<h2>About Me</h2>
<p>I live in South London, I've been dancing lindy for less than a year, and I love it.</p>
<p>Swing Out London is on twitter and I'll tweet information about the site there, but more useful is the twitter list of people tweeting about lindy.</p>
<p>Please send any comments, corrections or listings to [email]leveretweb@googlemail.com[/email].</p>
<h2 class="lindy">What is the Lindy Hop?</h2>
</div>
</div>
</div>
</body>
</html>
I took away the padding from the divs and add those to the content inside those divs instead!
header could be removed by applying the style to the h1 instead. Though semantically I would move the navigation in there…
You could arguably remove all of these divs: mission_statement, scope, about_me, about_lindy, colophon and development. If you want separators, then give the id to the h2 and apply the style to that h2 instead.
remove the .current spans and apply the class to the list item instead.
Thanks for the input Dave:
I agree: good point
I disagree: these divs have a semantic purpose of grouping together the heading and paragraph tags into sections. These groupings genuinely are independent sections and without those div tags they are just collections of text.
Yes, you’re right… Ruby-on-Rails makes it really easy to generate those links:
ruby # Links for navigation def nav_link(name, *args) # Render the link... link_to_unless_current(name, *args) do # ...but if the page was current, render a span instead content_tag :span, name, :class => "current" end end
…but I guess I can get rid of the span if I just display the text and detect the fact that the nav is current elsewhere…
Ok, this I do have a problem with: Those would not be semantic divs (teh acid test is what id’s would you give them, other than “leftcol” and “rightcol”?). The implementation you suggest does not group content together into meaningful chunks, which apart from anything else makes the code less readable.
I’m bemused by your claim that this would “create balance and consistency” - those are words which I would associate with the visual design, not the way that design is implemented. Could you maybe expand on that comment?
Re:2 - fair enough, though by common standard, the text that follows a heading is related to the heading itself and the relationship is implied. But I see your point.
True, but you also need to strike a balance between what is visual and what is semantic.
Since you brought it to my attention, I’m not sure why the “about’s” are placed where they are, and from a structure flow, I’m not sure i understand how it’s ordered. I think it’s the “About Lindy” that is throwing me off. It’s almost like there should be an “Why this Site” and a “What’s Lindy” page which more clearly defines both. Your what this site can have the information your about page has on it, with your “About Me” info at the end - at the right just has no logical sense to it.
Then on your About Lindy page, you can include a definition of the style, some basic movements, perhaps some photos and/or a video or two.
Oh, and while I’m thinking on it - would “What this site covers” or some variation make more sense than “What we Cover” since it’s only you and there is no we? Either that or change the person talking to be less personal and more generic.
Tag soup is probably another thing all together, right?
And div and span are the most unsemantic tags I know?! Putting id’s on them doesn’t make them semantic! Nor does the lack of id values makes them unsemantic! That’s a beginner mistake.
…which you seem to interpret in your own way. Tag soup refers to web pages UAs try to interpret the best they can given the invalid markup found inside those web pages.
The other term is not div soup, it’s divitis. And your web page suffers from it. You have a serious problem considering div a semantic element.
Without this CSS, Chrome and Firefox will still helpfully fudge the layout engine to make things work ok, while other browsers (e.g. IE7) aren’t so helpful and stick to the exact specification of how the layout should work (i.e. this is NOT an IE7 bug).
In any case, this is not an example of your assertion that I am not correctly separating content from presentation: it’s just difficult CSS.
??? This is standard semantic markup: the purpose of those divs is to group content together into independent sections.
Your divs on the other hand group content into two meaningless columns: you have thrown away the meaning of the markup and instead used an implementation which suits the chosen layout.
This is not separation of content from presentation, but some sort of misguided “optimisation” of the markup to suit a particular layout.
Please correct me if I’m wrong, but you seem to be operating under the serious misconception that best practice is to only use tags which are absolutely necessary to achieve the desired layout.
On the contrary, best practice is not even think about the layout: first mark up the content Meaningfully and THEN think about how you lay it out. This results in readable, maintainable code.
Of course, content should only be marked up with the bare minimum of code required to make it meaningful (and no more).
But I guess that you’re mixing things up. In one of your posts you talk about separation of content and presentation? Which has nothing to do with a semantic vs structural approach
Yes, but these are not just different h2s in the same flow of text, they are genuinely separate sections: do you appreciate the distinction?
I’m not going to let you get away with explaining one cryptic comment with another one Still no idea what you’re getting at.
Page Bloat! I agree that perhaps this page needs a more coherent flow, but creating new pages is not the answer: this is Bad user experience! Users don’t mind scrolling, but they Do mind clicking.
Isn’t this saying I should let layout drive the content? Surely that’s a poor principle to work on?
Yes I do, and if you were going to HTML5 validation, perhaps I’d buy into it but you’re not.
My point is you shouldn’t sacrifice visual/usability for semantics. It’s kind of like database normalization - there are forms past 3NF, but those forms often cause more harm then good, which is why people stop at 3NF (3rd normal form). Breaking up content into sections may make it more “semantic”, but it also can also make it harder to use and navigate because there are more pieces to navigate.
Nope - I’m saying let the content drive the pages. Talking about Lindy and talking about what the site are supposed to do are completely different topics/subjects, not separate sub-sections to a topic. As such, they don’t belong together.
And my experience is people don’t mind scrolling - they just don’t do it all that much. They’d rather click a well thought-out and clear subject link than to have to scroll for no apparent reason.
Nope, I’m saying provide the content which makes for complete topic coverage (see my previous comments). If someone’s researching the Lindy and happen on your site, how do they know what you’re talking about?
Kind of like the directional markers on your front page. I had no idea what those meant until I hovered over them with my mouse - that’s an important piece of information that I shouldn’t have to do extra work to get to - what if I visited your site with my smartphone which doesn’t do mouseovers? Oops…a small key somewhere on that page would have been nice.
The purpose of div and span is to allow content to be grouped together into meaningful chunks. The fact that they do not have meaning in themselves means that they can be assigned any meaning which there isn’t already a tag for, by giving them a meaningful class or ID.
(I’ll quietly ignore the “beginner” remark)
I’ll gracefully admit that I have mis-used the term Tag Soup. However, a quick search on Google for “div soup” shows multiple occurrences of the term, used precisely in the way I intended. Besides which that was an unnecessary cheap shot.
Ok, I can’t see us getting any further on this particular point: I Know I’m right on this point, and you presumably Know you’re right as well.
This is no longer required. It was used to give an ajax call something to populate. If I had needed to keep using it, I suppose the solution would be to insert something into the DOM on the fly (probably easier in Jquery))
