Два вертикальных меню рядом - Вопросы по CSS

<div class="row">

    <div class="col" style="width: 50%; display: block; float: left;">
        <div id="mod114" class="moduletable _usl" data-id="114"></div>
        <!-- end module -->
    </div>

    <div class="col" style="width: 50%; display: block; float: left;">
        <div id="mod115" class="moduletable " data-id="115"></div>
        <!-- end module  -->
    </div>

</div>

.bghelper { width:20%; display: block; float: left;}

		<footer id="footer">
			
			<?php if ($this->countModules('footer1')): ?>
			<div id="footer1" class="container">
				<div class="row">
					<jdoc:include type="modules" name="footer1" style="default" heading="h3" />
				</div>
			</div><!-- end #footer1 -->
			<?php endif; ?>
			
			<?php if ($this->countModules('footer2')): ?>
			<div id="footer2" class="container">
				<div class="row">
					<jdoc:include type="modules" name="footer2" style="default" />
				</div>
			</div><!-- end #footer2 -->
			<?php endif; ?>

<div class="row">
  <jdoc:include type="modules" name="footer1" style="default" heading="h3" />
</div>

<div class="row">
  <div class="col">
    <jdoc:include type="modules" name="footer11" style="default" heading="h3" />
  </div>
  <div class="col">
    <jdoc:include type="modules" name="footer12" style="default" heading="h3" />
  </div>
</div>

<position>footer1</position>

<position>footer11</position>
<position>footer12</position>

#footer1 .col { /* действительно будет только для .col внутри #footer1 */
  width:50%; /* каждый блок по ширине будет 50% от ширины родителя */
  float:left; /* это позволит выровнять блоки влево в одну строку */
  margin:0;padding:0;border:0; /* значения этих свойств, отличные от нуля, изменят фактическую ширину блоков, и они будут - скорее всего - более 50% ширины, а значит не уместятся рядом: не умещающийся будет выведен ниже */
}