How to make vertical line in css

Question

How to make this footer? example in this foto

Possible duplicate of http://stackoverflow.com/questions/3148415/how-to-make-a-vertical-line-in-html — M.S., Mar 19 '16 at 16:24

score 1 · Answer 1 · answered Mar 19 '16 at 16:36

If you must, you can do it using a background image with fixed lines.

If you want to do it the right way, you'll definitely need multiple divs to do that. Here's one way:

.column{
  width:30%;
  height:100px;
  padding:1.5%;
  float:left;
  border-right:1px solid grey;
}

.column:last-child{
border-right: none;
}

.footer{
  border:1px solid grey;
  overflow:auto;
}

<div class="footer">

  <div class="column" >
    blah
  </div>
  
  <div class="column" >
    blah
  </div>

  <div class="column" >
    blah
  </div>
  
</div>

score 0 · Answer 2 · answered Mar 19 '16 at 16:36

Easiest way I can think of. You'd need to customise the code around it to suit the responsive design you require.

Jsfiddle.

HTML

<div></div>
<div></div>
<div></div>

CSS

div {
  width: 200px;
  height: 100px;
  background-color: gold;
  border-left: solid 2px #cdcdcd;
  float: left;
}

score 0 · Answer 3 · answered Mar 19 '16 at 16:36

0

Try this sample:

<div style="background-color: green; width: 100%;float: right">
    <div style="width: 20% ;height: 90px; border-left: 2px solid #000;float: right">
    </div>
    <div style="width: 20% ;height: 90px; border-left: 2px solid #000;float: right">
    </div>
    <div style="width: 20% ;height: 90px; border-left: 2px solid #000;float: right">
    </div>
</div>

answered Mar 19 '16 at 16:36

Farshid

497
1
6
20

1

It's a bad habit using in-line CSS – Rhys Towey Mar 19 '16 at 17:15

score 0 · Answer 4 · answered Mar 19 '16 at 17:21

0

Firt you add class in to these three divs..

<div class='border'>AAAA</div>
<div class='border'>BBB</div>
<div class='border'>CCC</div>

then you add css part

.border{

border-left: solid 2px #cdcdcd;

}

you arrange margins also...

answered Mar 19 '16 at 17:21

Sameera Madushanka

87
5

score 0 · Answer 5 · answered Mar 19 '16 at 17:53

this will solve your problem.try this and try the preview with full page

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<style type="text/css">
 body{
  margin: 0;
  padding: 0;
 }

div.myfooter{
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 300px;
  background-color:#81C41D; 
  color: white;
  font-family: monospace;
  font-size: 20px;
}

div.one{
  width:35%;
  height:100%;
  border-right: 1px solid green;
  position: absolute;
  left: 0;
  text-align: right;
}
div.two{
  width: 20%;
  height: 100%;
  border-right: 1px solid green;
  position: absolute;
  left: 35%;
  text-align: center;
}
div.three{
  width: 22.5%;
  height: 100%;
  border-right: 1px solid green;
  position: absolute;
  left: 55%;
  text-align: center;
}

div.four
{
   width: 26.5%;
  height: 100%;
  position: absolute;
  left: 72.5%;
  text-align: center;

}

</style>
<body>

<div class="myfooter">
 <div class="one"><h3>Section One</h3></div>
 <div class="two"><h3>Sectioin Two</h3></div>
 <div class="three"><h3>Section Three</h3></div>
 <div class="four"><h3>Section Four</h3></div>
</div>


</body>
</html>

score 0 · Answer 6 · answered Mar 19 '16 at 22:27

If you are ok with using css3, here's your solution:

HTML:

<div id="footer">
  <div></div>
  <div></div>
  <div></div>
</div>

CSS:

#footer div { display: block; float: left; background: #eee; height: 220px; width: 33%; }
#footer div:not(:first-child) { border-left: 1px solid #ccc; }

https://jsfiddle.net/6zto4dg5/

How to make vertical line in css

6 Answers6