Why I can't halve div with vertical line

Question

I have one big container, and inside I have two div, I want to separate these internal divs with vertical line, I posted down what I tried, on another example thats CSS code work correctly, but in this case not working. 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;
}

If you want a vertical line between the two chidren you would be better to use a border on one of those. — Paulie_D, Mar 14 '15 at 19:35
Also I tried that, but without success. For the right children div I set class "rightcontact" and in CSS write this code: .rightcontact{ border-style: solid; border-left: 3px; display: inline-block; } — RS92, Mar 14 '15 at 19:37
Perhaps you could demo the problem...I'm not sure why you need `display:inline-block` though. — Paulie_D, Mar 14 '15 at 19:43
@Paulie_D This is ilustrationhttp://i.imgur.com/8CszdD7.png . picture 1 is how to look after this code: .rightcontact{ border-style: solid; border-left: 3px; } I want to make like picture 2 — RS92, Mar 14 '15 at 19:53
possible duplicate of [How to make a vertical line in HTML](http://stackoverflow.com/questions/3148415/how-to-make-a-vertical-line-in-html) — Paulie_D, Mar 14 '15 at 20:00
@Paulie_D I don't understand thats accepted answer, look at jsfiddle thats answer http://jsfiddle.net/phcjmqk2/ this is my jsfiddle html and css http://jsfiddle.net/2pjoo19e/1/ — RS92, Mar 14 '15 at 20:04
So where is the vertical line supposed to be and what purpose does it serve? In other words...what is the **result** supposed to look like? — Paulie_D, Mar 14 '15 at 20:14
@Paulie_D I using bootstrap, and on jsfiddle not show correctly. I wan't to make like this, i wan't to put this vertical line before senteces "Kontaktirajte nas" http://i.imgur.com/boCVuWl.png Thank you man! — RS92, Mar 14 '15 at 20:20
You're using the wrong column classes i suspect...those are usually for mobile. — Paulie_D, Mar 14 '15 at 20:38
@Paulie_D Those would be the right classes. Bootstrap cascades upward. So if you have col-sm-6, that will also translate to col-md-6 and col-lg-6. — disinfor, Mar 14 '15 at 21:12

score 1 · Accepted Answer · answered Mar 14 '15 at 21:11

So you want a vertical line between the two divs? Just add a border to one of the two divs. If you want full width you need to make your container fluid. Here is an example showing both full width and normal container.

full width example (fluid container)

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;
}

normal container

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;
}

hohoho thank you man, thats it. Too short and great. Can you explain me what is : overflow: hidden; — RS92, Mar 14 '15 at 21:27
I'm glad I helped! You need `overflow: hidden;` on the fluid container to get it's height matching the content height. Remove the style in the example to see what I mean. — kasper Taeymans, Mar 14 '15 at 21:31
Hey man, I have problem with your code, when I added more paragraphs and tags in child divs I have problem with vertical line, line is not full height, look picture http://i.imgur.com/vpfzmHe.png here is and code jsfiddle http://jsfiddle.net/c01nmn3k/ — RS92, Mar 14 '15 at 23:35
Just give div two a left border and remove the right border of div one. — kasper Taeymans, Mar 15 '15 at 09:47

lsissoko · Answer 2 · 2015-03-14T21:15:10.153

0

I made a few changes but here's a basic example of what you can do:

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

edited Mar 14 '15 at 21:15

answered Mar 14 '15 at 20:17

lsissoko

91
3

Check my latest edit. You'll have to change the height in #container to add more text. – lsissoko Mar 14 '15 at 20:32
Try now. I took out the bootstrap classes though. – lsissoko Mar 14 '15 at 21:15

score 0 · Answer 3 · answered Mar 14 '15 at 20:58

If you do what @primeape91 is suggesting you'll also need to include the clearfix hack to get the float to act like a block again.

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

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

Why I can't halve div with vertical line

3 Answers3