CODEWITHSUNDEEP
htmlcss
user9836106
user9836106

Reputation: 105

Divs Vertical in HTML

How to have div vertically in HTML.

When we use this code:

<div>Some Text 1 | </div>
<div>Some Text 2 | </div>
<div>Some Text 3 | </div>
<div>Some Text 4 | </div>
<div>Some Text 5 | </div>
<div>Some Text 6 | </div>
<div>Some Text 7 | </div>

The result is:

Some Text 1 |
Some Text 2 |
Some Text 3 |
Some Text 4 |
Some Text 5 |
Some Text 6 |
Some Text 7 |

How to get results like:

Some Text 1 | Some Text 2 | Some Text 3 | Some Text 4 | Some Text 5 | Some Text 6 | Some Text 7

Same as above with a vertical scroll

I tried this StackOverflow Question but it is not the same as I wanted, how to align divs vertically in html and css?

Upvotes: 2

Views: 16468

Answers (5)

b2ok
b2ok

Reputation: 536

Use responsive web design.

CSS:

.container{
  width: 90%;
  max-width: 1200px;
  padding: 0% 0; /* 0px/1200px = 0 */
  margin: 0 auto;
}
.grid1{ width:8.33333333333333%;float:left; }       /* 100px/1200px=0,0833333333333333=8,33333333333333% */
.grid2{ width: 16.66666666666667%;float:left; }         /* 200px/1200px=0,1666666666666667=16,66666666666667% */
.grid3{ width: 25%;float:left; }            /* 300px/1200px=0,25=25% */
.grid4{ width:33.33333333333333%;float:left; }         /* 400px/1200px=0,3333333333333333=33,33333333333333% */
.grid5{ width:41.66666666666667%;float:left; }      /* 500px/1200px=0,4166666666666667=41,66666666666667% */
.grid6{ width:50%; float:left; }                /* 600px/1200px=0,5=50% */
.grid7{ width:58.33333333333333%; float:left; }     /* 700px/1200px=0,5833333333333333=58,33333333333333% */
.grid8{ width:66.66666666666667%; float:left; }                 /* 800px/1200px=0,6666666666666667=66,66666666666667% */
.grid9{ width:75%; float:left; }            /* 900px/1200px=0,75=75% */
.grid10{ width:83.33333333333333%; float:left; }                /* 1000px/1200px=0,8333333333333333=83,33333333333333% */
.grid11{ width:91.66666666666667%; float:left; }            /* 1100px/1200px=0,9166666666666667=91,66666666666667% */
.grid12{ width: 100%; float:left; }             /* 1200px/1200px=1=100% */

   @media screen and (max-width : 705px) {
.grid1,
.grid2,
.grid3,
.grid4,
.grid5,
.grid6,
.grid7,
.grid8,
.grid9,
.grid10,
.grid11,
.grid12 {
  width: 100%;
}}

Web page:

  <div class="grid1">Some Text 1 | </div>
  <div class="grid1">Some Text 2 | </div>
  <div class="grid1">Some Text 3 | </div>
  <div class="grid1">Some Text 4 | </div>
  <div class="grid1">Some Text 5 | </div>
  <div class="grid1">Some Text 6 | </div>
  <div class="grid6">Some Text 7 | </div>

Upvotes: -2

Ivan
Ivan

Reputation: 40778

Instead of writing the separators in HTML there's an easy way around with only CSS selectors.

You can use the pseudo selectors: :after and :last-child to select the corresponding div and set | after the elements with the property content:

.item {
    display: inline-block;
}

.item:after {
    content: ' |';
}
.item:last-child:after {
    content: '';
}
<div class="items">
  <div class="item">One</div>
  <div class="item">Two</div>
  <div class="item">Three</div>
  <div class="item">Four</div>
  <div class="item">Five</div>
</div>

Alternatively, you could keep the content inside HTML and use span or just set the display property of .item to inline-block.

Edit: there's a shorthand version to set content: ' |' on the right elements (i.e. all of them but the last one) with the operator +. Heres the code:

.item {
  display: inline-block;
}

.item+.item:before {
  content: ' | ';
}
<div class="items">
  <div class="item">One</div>
  <div class="item">Two</div>
  <div class="item">Three</div>
  <div class="item">Four</div>
  <div class="item">Five</div>
</div>

Upvotes: 1

Carlos Moreira
Carlos Moreira

Reputation: 331

There are many ways to do that, but I think the most simple ones are:

  1. You can change your div tag to a span.
  2. Change the CSS 'display' property to 'inline-block' or 'inline'.

It might show you the result you're looking for.

To add the scroll, you might want to look on the parent tag of your divs/spans and add the CSS 'overflow-x' property and set it to 'scroll'.

Upvotes: 4

Raya Nasiri
Raya Nasiri

Reputation: 151

you just need define "display: inline;" attribute in style or css file. css: 

div{
display: inline-block;
}

Upvotes: 0

Nandita Sharma
Nandita Sharma

Reputation: 13417

Keep the divs in a wrapper div with display flex property;

<div style="display: flex;">
  <div>Some Text 1 | </div>
  <div>Some Text 2 | </div>
  <div>Some Text 3 | </div>
  <div>Some Text 4 | </div>
  <div>Some Text 5 | </div>
  <div>Some Text 6 | </div>
  <div>Some Text 7 | </div>
 </div>

Upvotes: 4

Related Questions