Two column DIV with CSS simply not working for me :(

Question

I have the following code in a WordPress page. I want it laid out like a two column table. However I simply cannot get it to do that. It's always putting the "left" column on one line, left aligned; then the second div with the picture it always puts on another line below the first one, but right aligned.

What CSS do I need to get this so it's:

| here is the first | second div with pic and centered text over pic |

<div>
<div style="vertical-align:top;display:inline-block;float:left;">
<p>Travel</p>
<p>Pictures, videos, and other information to some places visited including:
Australia, New Zealand, and America. <a href="/adventures/">See more...</a>
</p>
</div>
<div style="vertical-align:top;display:inline-block;text-align:center;float:right;width:160px;">
Boogie-Woogie Piano
<a href="/interests/Piano/"><img style="margin-top:0px;" class="aligncenter" src="/interests/Piano/spook_piano_small.jpg" alt="Rock'n'Roll Piano! Click to see!"></a>
</div>
</div>

EDIT: The DIV that's left align needs to take up all the remaining space that the div I have as "float right" doesn't use.

Answer 1

Try this, you can see there is no space between div as I have added background-color you could notice that.

    <div>
    <div style="width:50%;height:auto;vertical-align:top;display:inline-block;float:left;background:#f22;">
    <p>Travel</p>
    <p>Pictures, videos, and other information to some places visited including:
    Australia, New Zealand, and America. <a href="/adventures/">See more...</a>
    </p>
    </div>
    <div style="vertical-align:top;display:inline-block;text-align:center;float:right;width:50%;height:auto;background:#f2f;">
    Boogie-Woogie Piano
    <a href="/interests/Piano/"><img style="margin-top:0px;" class="aligncenter" src="https://source.unsplash.com/random" alt="Rock'n'Roll Piano! Click to see!"></a>
    </div>
    </div>
img{
  width:100%;
  min-height:100%;
}

Answer 2

Here goes how to achieve a two column, you can change the width to match what you want to achieve.

<div>
<div style="width:400px;float:left;display:inline-block;">
    <p>Travel</p>
        <p>Pictures, videos, and other information to some places visited including:
        Australia, New Zealand, and America. <a href="/adventures/">See more...</a>
        </p>
</div>
<div style="margin-left:400px;">
    Boogie-Woogie Piano
        <a href="/interests/Piano/"><img style="margin-top:0px;" class="aligncenter" src="/interests/Piano/spook_piano_small.jpg" alt="Rock'n'Roll Piano! Click to see!"></a>
</div>

Answer 3

Add right column before the left one. And give width and float to right column. It is not need to give float to left column

<div style="width:100%">
 <div style="text-align:center;float:right;width:160px;">
Boogie-Woogie Piano
<a href="/interests/Piano/"><img style="margin-top:0px;" class="aligncenter" src="/interests/Piano/spook_piano_small.jpg" alt="Rock'n'Roll Piano! Click to see!"></a>
</div>
<div style="width:auto;">
<p>Travel</p>
<p>Pictures, videos, and other information to some places visited including:
Australia, New Zealand, and America. <a href="/adventures/">See more...</a>
</p>
</div>

</div>

Answer 4

what you could do is not putting your text part in the <div> tag and just using your second <div> which is right aligned and all the text part which you have mentioned in the first div will wrap around it and it will look like a table with two columns just like you want it.you can check my code below to understand what I am trying to say

<div>
<div style="vertical-align:top;display:inline-block;text-align:center;float:right;width:160px;">
Boogie-Woogie Piano
<a href="/interests/Piano/"><img style="margin-top:0px;" class="aligncenter" src="/interests/Piano/spook_piano_small.jpg" alt="Rock'n'Roll Piano! Click to see!"></a>
</div>
<p>Travel</p>
<p>Pictures, videos, and other information to some places visited including:
Australia, New Zealand, and America. <a href="/adventures/">See more...</a>
</p>
</div>

I hope this helps and solves your problem.please comment for any query.

Answer 5

as what i understand that you need to separate the the section into 2 columns also don't work with inline css . cheers

	.try1{
		width: 50%;
		float: left;
	}
	.try2{
		width: 50%;
		float: right;
	}

<div class="all">

		<div class="try1">
			<p>Travel</p>
			<p>Pictures, videos, and other information to some places visited including:
			Australia, New Zealand, and America. <a href="/adventures/">See more...</a>
			</p>
		</div>
		  
		<div class="try2">
			Boogie-Woogie Piano
			<a href="#"><img  class="aligncenter" src="http://placehold.it/150x150" alt="Rock'n'Roll Piano! Click to see!"></a>
		</div>
	</div>

Answer 6

you can add a display:table; to parent element and change both child elements to display:table-cell; that way you'll be able to use vertical align if needed

as for the text over image the simplest way would be to remove the second div and apply the styles to <a> and set the image as background

Also try moving all the inline styles to a css file

<div style="display:table">
<div style="vertical-align:top;display:table-cel;">
<p>Travel</p>
<p>Pictures, videos, and other information to some places visited including:
Australia, New Zealand, and America. <a href="/adventures/">See more...</a>
</p>
</div>
<a style="vertical-align:middle;display:table-cell;width:160px; background-image: url(/interests/Piano/spook_piano_small.jpg)">
Boogie-Woogie Piano
</div>

Answer 7

try this one:

 <div class="one">
<div style="vertical-align:top;display:inline-block;float:left;width:360px;">
<p>Travel</p>
<p>Pictures, videos, and other information to some places visited including:
Australia, New Zealand, and America. <a href="/adventures/">See more...</a>
</p>
</div>
<div style="vertical-align:top;display:inline-block;text-align:center;float:right;width:160px;margin-top:25px;">
Boogie-Woogie Piano
<a href="/interests/Piano/"><img style="margin-top:10px;" class="aligncenter" src="/interests/Piano/spook_piano_small.jpg" alt="Rock'n'Roll Piano! Click to see!"></a>
</div>
</div>

DEMO HERE