clear both and divs - html

Question

This is my css
#site-content{
margin:25px 0 0 260px;
}
.site-content{
width:740px;
margin:auto;
}
#site-menu{
float:left;
width: 260px;
padding: 20px 0;
overflow:hidden;
}
HTML
<div id="site-menu">
<ul>
<li class="menu"><a id="menu-glxavor" class="menu" href="/"></a></li>
<li class="menu"><a id="menu-mermasin" class="menu" href="/arm/about-us"></a></li>
<li class="menu"><a id="menu-usucich" class="menu" href="/arm/for-teachers"></a>
<ul id="menu-usucich-sub">
<li class="sub-menu"><a class="a-sub-menu usucich" href="/arm/for-teachers/teacher-schedule">Դասացուցակ</a></li>
<li class="sub-menu"><a class="a-sub-menu usucich" href="/arm/for-teachers/homeroom-teachers">Դասղեկներ</a></li>
<li class="sub-menu"><a class="a-sub-menu usucich" href="/arm/for-teachers/exemplary-lessons">Օրինակելի դասեր</a></li>
<li class="sub-menu"><a class="a-sub-menu usucich" href="/arm/for-teachers/teacher-training">Վերապատրաստում</a></li>
</ul>
</li>
<li class="menu"><a id="menu-ashakert" class="menu" href="/arm/for-pupils"></a></li>
<li class="menu"><a id="menu-shrjanavartner" class="menu" href="/arm/graduates"></a></li>
<li class="menu"><a id="menu-norutyunner" class="menu" href="/arm/news"></a></li>
<li class="menu"><a id="menu-mankapartez" class="menu" href="/arm/kindergarten"></a></li>
<li class="menu"><a id="menu-nyuter" class="menu" href="/arm/materials"></a></li>
<li class="menu"><a id="menu-bajanortagrvel" class="menu" href=""></a></li>
<div id="subscribe">
<input type="text" id="subscribe-name" placeholder="email" name="subscribe-name" />
<button class="large awesome blue" id="sub-button" type="submit">բաժանորդագրվել</button>
<div id="sub-notification"></div>
</div>
</ul>
</div>
<div id="site-content">
<div class="site-content">
<div class="pages-content-top"></div>
<div class="pages-content-center">
<h2>Համագործակցություն 1</h2><div><span class='img'><img src=/views/admin/uploads/hands.jpg></img></span><span class='text'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus rutrum aliquet erat tempus lacinia. Fusce congue enim lacus, adipiscing sollicitudin libero feugiat sed. Phasellus suscipit, lorem ac bibendum pharetra, sem neque commodo nulla, in dignissim dolor leo eu nulla. Maecenas eu faucibus turpis. Maecenas in nulla at nisl varius commodo. In facilisis enim mattis eros bibendum pulvinar. Phasellus congue odio quis diam viverra, eu aliquam dui consequat. Etiam massa arcu, condimentum vel rutrum a, ultrices quis felis.</span><span class='read-more'><a href='/arm/read?category=about-us&id=37'>Ավելին...</a></span></div><div style='clear:both'></div>
<h2>Համագործակցություն 2</h2><div><span class='img'><img src=/views/admin/uploads/hands.jpg></img></span><span class='text'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus rutrum aliquet erat tempus lacinia. Fusce congue enim lacus, adipiscing sollicitudin libero feugiat sed. Phasellus suscipit, lorem ac bibendum pharetra, sem neque commodo nulla, in dignissim dolor leo eu nulla. Maecenas eu faucibus turpis. Maecenas in nulla at nisl varius commodo. In facilisis enim mattis eros bibendum pulvinar. Phasellus congue odio quis diam viverra, eu aliquam dui consequat. Etiam massa arcu, condimentum vel rutrum a, ultrices quis felis.</span><span class='read-more'><a href='/arm/read?category=about-us&id=38'>Ավելին...</a></span></div><div style='clear:both'></div>
<h2>Համագործակցություն 3</h2><div><span class='img'><img src=/views/admin/uploads/hands.jpg></img></span><span class='text'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus rutrum aliquet erat tempus lacinia. Fusce congue enim lacus, adipiscing sollicitudin libero feugiat sed. Phasellus suscipit, lorem ac bibendum pharetra, sem neque commodo nulla, in dignissim dolor leo eu nulla. Maecenas eu faucibus turpis. Maecenas in nulla at nisl varius commodo. In facilisis enim mattis eros bibendum pulvinar. Phasellus congue odio quis diam viverra, eu aliquam dui consequat. Etiam massa arcu, condimentum vel rutrum a, ultrices quis felis.</span><span class='read-more'><a href='/arm/read?category=about-us&id=39'>Ավելին...</a></span></div><div style='clear:both'></div>
</div>
<div class="pages-content-fot"></div>
</div>
</div>
site-content got all width except the menu (that why #site-content{margin:0 0 260px 0}). #site-content contains div .site-content which got fixed width (740px). It is centered in #site-content (that why .site-content{width:740px;margin:auto;}). .site-content contains articles, which should have spaces right after next articles. That why i used clear both, but its getting the next articles after menu, so it clears all floats (the menu float). Solution please!
http://jsfiddle.net/isherwood/WP66N/1/

Answer 1

I'd just take out the clearing divs and be happy:
http://jsfiddle.net/isherwood/WP66N/2/
<div class="pages-content-center">
<h2>Համագործակցություն 1</h2>
<div><span class='img'>
...

Answer 2

I guess that the real problem is that .img or .text still need to be floated and the headings after them need clearance. I'd suggest to add overflow: hidden to .site-content to isolate its contents (floated or not) in the separate block formatting context:
.site-content {
width:540px;
margin:auto;
overflow: hidden;
}
Fiddle (with example floated images)

Answer 3

If I were you I would just avoid to use float. I would recommend you to use some divs with fix dimension and
display: inline-block;
This way the divs will just be positioned besides each other and you will need tricks as clear:both and so on. The only thing, pay attention the display: inline-block; will not work fine with IE7. Just use display: inline with that.