CODEWITHSUNDEEP
htmlcss
JackRoster
JackRoster

Reputation: 1663

CSS displaying elements vertically down instead of hortizontal straight

I have elements which are wrapped inside a div . The elements are displayed in a horizontal direction inside the div. The problem is , I can't figure out how to display the elements vertically down direction. I done some research and one solution was to use vertical-align but it doesn't seem to work.

Here an example of what I"m trying to accomplish

http://s9.postimg.org/6i34jzazz/save.jpg

My CSS

  .container {height:500px; width: 700px; background-color:#00B358}

My HTML

  <html>
  <head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/navigation.css">
  </head>

  <div class="container ">
  <img border="0" src="download.jpg" alt="Pulpit rock" width="304" height="228">
  <img border="0" src="1.jpg" alt="Pulpit rock" width="304" height="228">
  <img border="0" src="2.jpg" alt="Pulpit rock" width="304" height="228">
  </div>

Upvotes: 16

Views: 60506

Answers (3)

dsdev
dsdev

Reputation: 1124

I don't think you will be able to achieve what you are trying to do without re-organizing your markup. You will likely have to put your divs in column containers (at least until flexbox is widely used!).

Quick Example:

HTML:

<div class="container">
    <div class="col-1">
        <img border="0" src="download.jpg" alt="Pulpit rock">
        <img border="0" src="1.jpg" alt="Pulpit rock">
    </div>
    <div class="col-2">
        <img border="0" src="1.jpg" alt="Pulpit rock">
    </div>
</div>

CSS:

img {
    display: block;
}

.container > div {
    float: left;
}

Explaination:

The natural flow, if elements are inline, is to appear beside one another until a line break is needed. If elements are block level they will always appear below the former element. The other option is to float the elements, but again it will appear beside the former element if there is room, not below.

That's why you would have to adjust your markup to group the elements that you want in a vertical line together--then float the next group beside it.

Upvotes: 10

Class
Class

Reputation: 3160

I did some research and found column-count which works if you have a modern browser

-moz-column-count
-webkit-column-count
column-count

you might want to fiddle with the column-count, but it should work for your purpose, as well you might want to mess with column-width to achieve the desired outcome you want.

-moz-column-width
-webkit-column-width
column-width

jsFiddle example

browsers that support column-count

A List Apart: Multi-Column

you might have to implement a js/html conditional check for older browsers to create the same effect

Upvotes: 0

MaxOvrdrv
MaxOvrdrv

Reputation: 1916

You need to set the images within your div to display:block; not sure if this below is the correct format for "element type" within "class", but it should point you in the right direction.

This will put the images one under the other.

.box1 img {display:block;}

Upvotes: 0

Related Questions