Free Coder 24 Free Coder 24 - 4 months ago 10
HTML Question

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

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

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>

Comments