2013-08-26 4 views
0

Я пытаюсь получить крикбокс на www.talkjesus.com (форум vBulletin), чтобы плавать влево, в то время как стих дня (оранжевый), чтобы плавать в правой части крикбокса. Я пробовал так много вариаций, но он не работает, я застрял. Ваша помощь была оценена.проблема выравнивания div бок о бок

forumhome код шаблона Я использую сейчас:

<div class="blockbody formcontrols floatcontainer"> 

    <div id="wgo_onlineusers" class="wgo_subblock"> 
        <h3 class="blocksubhead" style="background-color:#82BA1B; color: #fff !important; font-size: 22px; font-weight: 300">shoutbox</h3> 
     <div style="text-align: center; line-height: 0" class="blockrow"> 
     <div><iframe frameborder="0" width="100%" height="200" src="http://www.cbox.ws/box/?boxid=439&amp;boxtag=7868&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain1-439"" id="cboxmain1-439" style="border-bottom: 1px solid #e4e4e4;"></iframe></div> 
     <div style="position:relative"><iframe frameborder="0" width="350" height="70" src="http://www.cbox.ws/box/?boxid=439&amp;boxtag=7868&sec=form&nme={vb:raw cboxnme}&nmekey={vb:raw cboxkey}&pic={vb:raw cboxav}&lnk={vb:raw cboxav}" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform1-439" id="cboxform1-439"></iframe></div> 
     </div> 
    </div> 
    </div> 

    <br /> 

    <div class="blockbody formcontrols floatcontainer"> 
    <div id="wgo_onlineusers" class="wgo_subblock"> 
    <h3 class="blocksubhead" style="background-color:#E66B1B; color: #fff !important; font-size: 22px; font-weight: 300">verse of the day</h3> 
    <div> 
    <div style="font-size:16px; line-height:28px; padding:10px; color: #797979"> 
    <script type="text/javascript" src="http://www.christnotes.org/syndicate.php?content=dbv&amp;type=js2&amp;tw=auto&amp;tbg=ffffff&amp;bw=0&amp;bc=000000&amp;ta=L&amp;tc=43A6DF&amp;tf=Open Sans&amp;ts=14&amp;ty=B&amp;va=L&amp;vc=43A6DF&amp;vf=Open Sans&amp;vs=12&amp;tt=3&amp;trn=NASB"></script> 
    </div> 
    </div> 
    </div> 
    </div> 

соответствующий код CSS ...

/* Auto-clearing of floats */ 
    .floatcontainer:after, 
    .formcontrols .blockrow:after, 
    dl.stats:after { 
     content:"."; 
     display:block; 
     height:0; 
     clear:both; 
     visibility:hidden; 
    } 
    .floatcontainer, 
    .formcontrols .blockrow, 
    dl.stats { 
     display:inline-block; 
     font-weight:normal; 
    } 
    /* IE-Mac hide \*/ 
    * html .floatcontainer, 
    .formcontrols .blockrow, 
    dl.stats { 
     height:1%; 
    } 
    .floatcontainer, 
    .formcontrols .blockrow, 
    dl.stats { 
     display:block; 
    } 


    .blockrow { 
     padding:12px; 
    } 


    .blocksubhead { 
     padding:12px; 
    } 


    .blockhead_info, .blocksubhead_info { 
     float:right; 
     font-weight:normal; 
    } 
+1

У вас есть CSS, что вы не были включены в вопрос? – htxryan

+0

ok просто обновлен, чтобы добавить код css – Bashed

+0

Это целый код, и мы вряд ли это выясним, просто посмотрев на него. Как насчет создания jsFiddle, чтобы мы могли немного экспериментировать? – Marconius

ответ

0

Вы пробовали применять свойство поплавка к .floatcontainer элементу?

.floatcontainer { 
    width: 50%; 
    float: left; 
} 

Установка width свойства необходимо будет здесь, потому что выход из сценария во втором .floatcontainer блоке добавляет Div элемент в документ, который имеет ширину 100%. Взгляните на вывод здесь: http://goo.gl/Bw7iaD (см. Встроенные стили первого элемента). Это делает коробку стиха полной шириной, если только у родительского контейнера указанная ширина.

Вот пример рабочего кода: http://cdpn.io/0dfce502ffdc99f54a159f7a563ed4fe

Смежные вопросы