Почему я не могу пополам div с вертикальной линией

Question

У меня есть один большой контейнер, и внутри у меня есть два div, я хочу разделить эти внутренние div с вертикальной линией, я отправил то, что я пробовал, в другом примере, который имеет код CSS работают правильно, но в этом случае не работают. HTML

<div class="rowFrame"> 
    <div class="col-sm-6"> 
     <h3>Info:</h3> 
     <p>About</p> 
     <p>About</p> 
    </div> 

    <div class="col-sm-6 rightcontact" > 
     <h3>Contact us</h3> 
    </div> 
</div> 

CSS

.container2{ 
    border-style: solid; 
    border-width: 3px; 
    display: inline-block; 
    width:100%; 
    } 

.rowFrame{ 
    top: 0; 
    bottom: 0; 
    left: 50%; 
    border-left: 2px; 
} 

Answer 1

Итак, вам нужна вертикальная линия между двумя разделителями? Просто добавьте границу к одному из двух div. Если вы хотите получить полную ширину, вам нужно сделать жидкость для вашего контейнера. Вот пример, показывающий как полную ширину, так и нормальный контейнер.

полная ширина пример (контейнер для жидкости)

jsfiddle demo

HTML

<div class="container-fluid" id="mycontainer"> 
    <div class="col-sm-6" id="one"> 
    <h3>Info:</h3> 
    <p>Ukoliko imate neko pitanje budite slobodni i pitajte nas!</p> 
    <p>Podelite sa nama Vase misljenje.</p> 
    </div> 



    <div class="col-sm-6" id="two" > 
    <h3>Kontaktirajte nas</h3> 
     some text here... bla bla bla 
    </div> 
</div> 

CSS

#mycontainer{ 
    border:1px solid black; 
    overflow: hidden; 

} 

#one{ 
    border-right:1px solid black; 
} 

нормальный контейнер

jsfiddle demo

HTML

<div class="container" id="mycontainer"> 
    <div class="col-sm-6" id="one"> 
    <h3>Info:</h3> 
    <p>Ukoliko imate neko pitanje budite slobodni i pitajte nas!</p> 
    <p>Podelite sa nama Vase misljenje.</p> 
    </div> 



    <div class="col-sm-6" id="two" > 
    <h3>Kontaktirajte nas</h3> 
     some text here... bla bla bla 
    </div> 
</div> 

CSS

#mycontainer{ 
    border:1px solid black; 
} 

#one{ 
    border-right:1px solid black; 
} 

Answer 2

Я сделал несколько изменений, но вот простой пример того, что вы можете сделать:

HTML

<div id="container"> 
    <div id="one"> 
    <h3>Info:</h3> 
    <p>Ukoliko imate neko pitanje budite slobodni i pitajte nas!</p> 
    <p>Podelite sa nama Vase misljenje.</p> 
    </div> 
    <div id="two"> 
    <h3>Kontaktirajte nas</h3> 
    </div> 
</div> 

CSS

#container { 
    height: 500px; 
    border: medium black solid; 
    } 
    #container div { 
    height: 100%; 
    padding-left: 20px; 
    } 
    #one { 
    width: 50%; 
    float: left; 
    border-right: thin black solid; 
    } 
    #two { 
    overflow: hidden; 
    border-left: thin black solid; 
    } 

View on Codepen

Answer 3

Если вы делаете то, что @ primeape91 предлагает, вам также необходимо включить clearfix хак, чтобы получить поплавок, чтобы действовать как блок снова.

div.rowFrame:after { 
    content: ""; 
    display: table; 
    clear: both; 
} 

div.rowFrame > div { 
    width:50%; 
    float:left; 
}