CODEWITHSUNDEEP
css
graxia
graxia

Reputation: 271

how to add vertical line between two divs

I want to make a vertical line between two divs. we have hr for horizontal line but none for vertical line as I know. Is there anyway to make it without using border? 

<style>
#wrapper_1 {
    background-color:pink;
    height:100px;
    float:left;
    width: 100px;
}

#wrapper_2 {
    background-color:brown;
    height:100px;
    width: 100px;
    float:right;
}
</style>

<div id="wrapper_1">
    Creating slideshows PHP
</div> 

<div id="wrapper_2">
    Creating slideshows with WordPress 
</div>

Upvotes: 14

Views: 100675

Answers (6)

Vladimir Jovanović
Vladimir Jovanović

Reputation: 5551

If you are using flex element and you are having issues with element(s) transforming to columns because of the display: flex; property, use the box-shadow property on the element as it does not add up to the container space.

Upvotes: 0

Zibellino
Zibellino

Reputation: 1433

You can use <hr>, as it is semantically correct, and then use CSS to convert it to a vertical line.

hr.vertical {
    height:100%; /* you might need some positioning for this to work, see other questions about 100% height */
    width:0;
    border:1px solid black;
}

Upvotes: 10

vikrantnegi
vikrantnegi

Reputation: 2472

You can also use pseudo elements to make a vertical separator. You don't need an extra div to make a separator just use the pseudo elements and style it according to your needs. 

#wrapper_1 {
  background-color: pink;
  height: 100px;
  float: left;
  width: 100px;
}
#wrapper_1:after {
  content: "";
  background-color: #000;
  position: absolute;
  width: 5px;
  height: 100px;
  top: 10px;
  left: 50%;
  display: block;
}
#wrapper_2 {
  background-color: brown;
  height: 100px;
  width: 100px;
  float: right;
}
<div id="wrapper_1">
  Creating slideshows PHP
</div>

<div id="wrapper_2">
  Creating slideshows with WordPress
</div>

PS: Beware of the absolute positioning of the pseudo elements. Thanks.

Upvotes: 21

user2917245
user2917245

Reputation:

I am not a css hacker but this is how would I do it.. Please notice that you should use clear: both; after floating elements.

HTML:

<div class="container">

  <div id="wrapper_1">
      Creating slideshows PHP
  </div> 

  <div class="seperator"></div>

  <div id="wrapper_2">
      Creating slideshows with WordPress 
  </div>

  <div class="clearfix"></div>

</div>

CSS:

#wrapper_1 {
    background-color:pink;
    height:100px;
    float:left;
    width: 100px;
}

#wrapper_2 {
    background-color:brown;
    height:100px;
    width: 100px;
    float:right;
}

.seperator {
  height: 100%;
  width: 1px;
  background: black;
  top: 0;
  bottom: 0;
  position: absolute;
  left: 50%;
}

.container {
  position: relative;
}

.clearfix {
  clear: both;
}

DEMO: jsfiddle

Upvotes: 1

Crack_David
Crack_David

Reputation: 2843

sure you can:

just wrap the elements into a wrapper and make that one display:table-cell.

.bigwrapper{
  display:table;
  width:100%;
}

second: create another div width class "vr" between your two wrappers and style it as follows:

.vr{
  width:1px;
  display:table-cell;
  background-color:black;
  height:100%;

}

Final Demo at:

https://plnkr.co/edit/uJsmrCaF9nns49J5RcYj?p=preview

Upvotes: 0

Simone Sessa
Simone Sessa

Reputation: 873

Create a new div between your two div and add this class:

.vertical-row {
 Float:left;
 height:100px;
 width:1px; /* edit this if you want */
 background-color: your color
}

Upvotes: 4

Related Questions