css float problems - clear:both gap - html

Question

I need and menu div from left with fixed width(260px). Then Content div with relative width(the whole width - except the menu div) where will be an container always at center of content div(margin:auto)
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;
}
Everything seems ok, but there is problem with floats. When i set in .site-content 2 divs (floated) then use clear:both to clear the float, there is big gap and the other elements go down after menu ends. Can you give me solution? (sorry for bad english)
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>

Answer 1

You should make .site-content establish new block formatting context, in order that clear inside it affected only floats inside it, not those outside it. The most appropriate options for it seem to be overflow: hidden and display: table (since the width is fixed and the layout won't change because of display change).

Answer 2

Trojan is right...
I removed the float propety
ANd used width auto in the CSS for site-content since you have stated that its not fixed..
I dont know if this is what u want but check out this fiddle
WORKING FIDDLE
CSS
h2{
margin:0;
}
EDIT: OK, I believe your problem is in the site-content section.There is a big gap between the end of the first Para and 2nd heading. At least this is what I understood and this is what your code shows when I run it in a fiddle like this.
I just removed one line from your code. i.e line no 46
<div style='clear:both'></div>
Now there is no gap between the first and second paragraph. Ideally you should be using the "clear:both" property as You have a menu on the right side. So if you use the "clear:both" property, automatically the div will align downwards as it will find the menu on the right side.
Hope you are getting my point. Check this example. Here you will see that the gap between the two para's is due to the "clear:both" property. Remove that and the gap disappears.
FINAL Solution to your problem(I Hope).