<div class="fvertical">
<div><img src="img/henry_ford.png" alt=""></div>
<div class="vertical_inline">
<div>One</div>
<dive>two</dive>
</div>
</div>
.fvertical {
display: inline-block;
}
.vertical_inline {
display: block;
}
I want that these two items labeled as 1 and 2 should fall in one line, but that is not happening.
In short child element of fvertical should fall in one row/line.
display:block does not accept vertical alignment
Only inline (including inline-block) and table elements accept vertical-align
Try this
<div class="fvertical">
<img src="img/henry_ford.png" alt="">
<div class="v-align">
<div>One</div>
<dive>two</dive>
</div>
</div>
.fvertical img,
.v-align {
display: inline-block;
vertical-align: top;
}
Inline-blocks without a width set on them are ‘shrink to fit’ elements. They will stretch as wide as the content inside of them.
So, the two divs in <div class="v-align"> are currently block level elements and if you get more content in them they will stretch their parent.
That would cause <div class="v-align"> to drop down below the image. So as a safegaurd you will probably want to set a max-width on .v-align
If all else fails, try this:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="css/stylesheet.css">
<title>template</title>
<!--
https://www.sitepoint.com/community/t/display-inline-block-items-not-coming-inline/283021
codeispoetry
-->
<style>
.fvertical,
.fvertical > div {
display: inline-block;
vertical-align:middle;
outline:1px solid red;
}
.vertical_inline {
display: inline-block;
vertical-align:middle;
outline:1px dashed lime;
}
img {
display:block;
}
</style>
</head>
<body>
<div class="fvertical">
<div>
<img src="img/henry_ford.png" alt="" width="200" height="300">
</div>
<div class="vertical_inline">
<div>One</div>
<div>two</div>
</div>
</div>
</body>
</html>
EDIT: slight improvement.
MORE EDITs: If you delete the colored outlines, you will see that the selector, .vertical_inline, could be combined with .fvertical and .fvertical > div … the properties are the same for both groups.
It is a very good idea to include the width and height attributes with img elements even if the CSS changes those values.
After adding more text, this falls apart. 
In that situation, I believe I would just float my image and the let my divs flow naturally around the image.
Or you can set overflow:hidden to keep the block divs from wrapping around the image
I have created a codepen →
exacting the similar situation.
Objective →
The image div and the div with a class . tworows needs to be in one line/row.
looking forward with more discussion and more alternative solutions(hopefully not using floats)
Here is what I had in mind with my last post
The BG colors, borders, img dimensions, etc. are just there for testing. You should be able to see the concept through all the misc. styles
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<style>
.fvertical {
overflow:hidden;/*contain the floats*/
background:yellow;
}
.fvertical img {
float:left;
width:300px;
height:300px;
border:1px solid;
background:lime;
margin-bottom: 1em;
}
.foo {
overflow:hidden;/*restrict from sliding under floated img (This Is Optional) */
/*remove overflow rule to let divs wrap around image*/
}
.foo div {
background:red;
margin: 0 1em 1em;
}
.foo p {margin:0;}
</style>
</head>
<body>
<div class="fvertical">
<img src="img/henry_ford.png" alt="">
<div class="foo">
<div>
<p>Lorem ipsum dolor sit amet consectetuer laoreet turpis Cum Phasellus semper.
Nulla nec in vitae tortor id vel netus amet Fusce nibh. Tellus ut lacus sagittis
egestas justo hendrerit interdum consectetuer vel condimentum.</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet consectetuer laoreet turpis Cum Phasellus semper.
Nulla nec in vitae tortor id vel netus amet Fusce nibh. Tellus ut lacus sagittis
egestas justo hendrerit interdum consectetuer vel condimentum.</p>
</div>
</div>
</div>
</body>
</html>
EDIT: Here is the same code using the real image now
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<style>
.fvertical {
overflow:hidden;/*contain the floats*/
background:#ccc;
padding:5px;
}
.fvertical img {
float:left;
margin: 0 1em 1em 0;
}
.foo {
/*overflow:hidden;/* use to restrict text from sliding under floated img*/
}
.foo div {
margin: 0 1em 1em 0;
text-align: justify;
}
.foo p {margin:0;}
</style>
</head>
<body>
<div class="fvertical">
<img src="http://codepen.trafficopedia.com/html01/img/henry_ford.png" width="402" height="469" alt="Henry Ford Image">
<div class="foo">
<div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and
scrambled it to make a type specimen book.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and
scrambled it to make a type specimen book.</p>
</div>
<div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and
scrambled it to make a type specimen book.</p>
</div>
</div>
</div>
</body>
</html>
Hi Ron,
That was the problem I mentioned in post #5. There is also a whitespace node to contend with so it has to be accounted for.
I was able to get it to work using a calc() expression on the text div width.
Alternative solution using inline-blocks … 
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Henry Ford - V-Align Divs</title>
<style>
.fvert {
max-width: 1200px;
margin: 0 auto;
background: #ccc;
padding: 5px 0;
text-align: center;
}
.image-wrap,
.v-inline {
display: inline-block;
vertical-align: top;
width: 402px; /*override below for .v-inline*/
}
.image-wrap img {
display: block;
width: 100%;
height: auto;
}
.v-inline {
width: calc(100% - 414px); /*px offset accounts for img width + 12px for whitespace node & text-zoom cushion*/
}
.v-inline p {
margin: 0 0 1em;
padding: .25em .5em;
background: #fff;
text-align: justify;
}
@media screen and (max-width: 780px) {
.image-wrap {width: 50%;}
.v-inline {width: calc(50% - 12px);}
}
</style>
</head>
<body>
<div class="fvert">
<div class="image-wrap">
<img src="http://codepen.trafficopedia.com/html01/img/henry_ford.png" width="402" height="469" alt="Henry Ford Image">
</div>
<div class="v-inline">
<div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and
scrambled it to make a type specimen book.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and
scrambled it to make a type specimen book.</p>
</div>
<div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and
scrambled it to make a type specimen book.</p>
</div>
</div>
</div>
</body>
</html>
I am beside myself with frustration/embarrassment about my previous post. I looked at it after I slept a bit and it looked like an experiment in progress. Don’t know why I posted it. My apologies to @codeispoetry and thanks to @Ray.H.
This is a very workable version similar to inline-block only better, IMHO. There are some things that display:table/table-cell do very weil and this is one of them. And it should be cross-browser compatible. IE11+ friendly.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Henry Ford - V-Align Divs</title>
<style>
.fvert {
display:table;
width:100%;
max-width:1200px;
border-spacing:.5em .5em; /* Sets "border" space around cells. There is no inline node and no "magic math". */
background-color:#ccc;
margin:0 auto;
outline:1px solid red; /* TEST Outline. To Be Deleted */
}
.image-wrap,
.v-inline {
display:table-cell;
vertical-align:middle; /* middle or top; both do not have to be the same. use v-inline (next) for separate vertical alignments. */
width:402px; /* max width of image box */
outline:1px dotted blue; /* TEST Outline. To Be Deleted */
}
.image-wrap img { /* 402x469 */
display:block;
max-width:100%; /* image will resize from its native width smaller; it will not become larger than its native dimensions. */
height:auto;
outline:1px dashed red; /* TEST Outline. To Be Deleted */
}
.v-inline {
width:auto; /* The rest of the table width is given to the cell with the text */
}
.v-inline p {
background-color:#fff;
text-align:justify;
padding:.25em .5em;
margin:.5em 0 0; /* margin is added to the top of paragraphs, not the bottom. (coder's choice) */
outline:1px dashed magenta; /* TEST Outline. To Be Deleted */
}
.v-inline div:first-of-type p:first-of-type { /* The div around the paras makes this selector lengthy; assigning a classname to the top paragraph (in this example) might be easier */
margin-top:0;
}
/* breakpoints chosen to demonstrate possibilities */
@media screen and (max-width:780px) {
.image-wrap {width:50%;} /* image and text columns become equal width */
}
@media screen and (max-width:620px) { /* "columns" become full width rows (blocks) */
.fvert, .image-wrap, .v-inline {
display:block;
width:auto;
}
.fvert {padding:.5em;}
.image-wrap img {margin:0 auto;}
.v-inline div:first-of-type p:first-of-type {margin-top:.5em;}
}
</style>
</head>
<body>
<div class="fvert">
<div class="image-wrap">
<img src="http://codepen.trafficopedia.com/html01/img/henry_ford.png" width="402" height="469" alt="Henry Ford Image">
</div>
<div class="v-inline">
<div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
</div>
<div>
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
Lorem Ipsum is simply dummy text of the printing and typesetting industry,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
</div>
</div>
</div>
</body>
</html>
There is a reason I have a love for flex. Let us do it for the sake of discussion with the flex.
However, our original objective is something else and that is to do it w/o the flex.
Check Here →
Do I now understand correctly that you wanted a flex solution all along?
No, I knew the flex solution, but the focus of this thread is by block method. I just showed that as an example.
Is the code that I posted in #12 satisfactory or do you have something else in mind?
You are absolutely right about display:table doing some things better, and page layout is one of them.
To be honest I think inline-blocks have no place in page layout, mainly due to the whitespace nodes that are created when formatting the html properly, in a readable manner. There are ways to eliminate those whitespace nodes, but tag chaining in the html is unacceptable.
I think inline-blocks should be used in small doses inside elements that have already become part of the page layout. Should an inline-block contain a heading tag and multiple paragraphs? Personally I don’t think so, that is going beyond a small dose. They are a very good alternative to floats and superior in some cases since they prevent the float snagging problem when heights are not the same. Then vertical-alignment also becomes a built in bonus.
In the end, I think simple is always best. I don’t have a problem using floats, and this situation with an image next to text is where floats really shine. Especially when you need the text to wrap around and under the image. That’s what floats were designed to do and why they are removed from the page flow.
If you don’t need/want text to wrap under the image then the overflow:hidden trick I posted earlier does that.
This is just one section of the OP’s page, I would do only what is necessary within that section to achieve the desired results. I’d probably reach for a float
Float + clearfix → Right?
No, you would not need the clearfix with the example I posted earlier.
It had overflow:hidden on the parent div which was containing the float.
I would probably go ahead and wrap the img in a div so you could scale the img down for a responsive page.
Give me a minute and I will adjust the code.
Here’s the floated version with adjustments
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Henry Ford - Image Beside Text</title>
<style>
.fvert {
max-width:1200px;
margin:0 auto;
overflow:hidden;/*contain the floats*/
background-color:#ccc;
}
.image-wrap {
float:left;
max-width:402px;
margin:.5em;
}
.image-wrap img { /* 402x469 */
display:block;
max-width:100%; /* image will resize from its native width smaller; it will not become larger than its native dimensions. */
height:auto;
}
.image-text {
overflow:hidden;/* use to restrict text from sliding under floated img*/
margin:.5em;
background-color:#fff;
}
.image-text p {
text-align:justify;
padding:.5em;
margin:0;
}
/* breakpoints chosen to demonstrate possibilities */
@media screen and (max-width:780px) {
.image-wrap {width:40%;}
}
@media screen and (max-width:520px) {
.fvert {padding:0 .5em;}
.image-wrap, .image-text {
display:block;
margin:.5em auto;
float:none;
width:auto;
overflow:visible;
}
}
</style>
</head>
<body>
<div class="fvert">
<div class="image-wrap">
<img src="http://codepen.trafficopedia.com/html01/img/henry_ford.png" width="402" height="469" alt="Henry Ford Image">
</div>
<div class="image-text">
<div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and
scrambled it to make a type specimen book.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and
scrambled it to make a type specimen book.</p>
</div>
<div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and
scrambled it to make a type specimen book.</p>
</div>
</div>
</div>
</body>
</html>