Menu
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>
729
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!).
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;
}
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.
79
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
