Floating menu content height

Question

I have a default Sharepoint 2013 master page that has floating menu on the left. The problem is I cannot use floating items in the content area. The simplified layout excerpt looks like this:

<style>
    .leftMenu{height: 400px;width: 200px;float:left;border: 1px solid Red;}
    .content{border: 1px solid Blue;margin-left: 200px}
    .floatingItem{float:left;border: 1px solid Green;margin-left: 10px;}
</style>
<div class="leftMenu">LeftMenu</div>
<div class="content">
        <div class="floatingItem">floatLeft</div>
        <div class="floatingItem">floatLeft</div>
        <div class="floatingItem">floatLeft</div>
        <div class="floatingItem">floatLeft</div>
        <div style="clear:both"></div>
        I want to appear just bellow floating items
</div>

I need the template to be 100% width. The template behaves fine unless I put floating items in the content block. Then I get unexpected behavior - the clearing div and any content bellow floating items appears below the left menu's bottom line.

Is it possible to make content block behave normally? I expect the content block height to be no more than two line heights: ~30px. BTW, I want to solve it without using JavaScript tricks.

score 1 · Answer 1 · edited May 23 '17 at 12:10

1

just remove <div style="clear:both"></div> from HTML

for more information check this out: What is the use of style="clear:both"?

edited May 23 '17 at 12:10

Community

1
1

answered Oct 21 '13 at 09:38

Mohsen Safari

6,669
5
42
58

Floating menu content height

1 Answers1