horizontally align and adding div items horizontally

Question

I am using following code

<div style="display: table; width: 50%; clear: both; ">
    <div style="width: 50%; float: left;">
        <h1 style="font-size: 30px; font-weight: 600; color: #000;">
            <span><?php echo $genericItem;?></span>
            <img style="margin-left: 20px; height: 50px; width: 50px;" src="<?php echo $genericItemPath;?>" alt=""> 
        </h1>
    </div>
    <div style="width: 50%; float: right; margin-left: 25px;">
            <span style="font-size: 20px; color: #000"><b>Reorder</b> in <?php echo $reorderDays;?> days</span>
            <span style="display: block;  font-size: 12px; color: #d3d3d3; max-width: 90%;"><?php echo $reorderDate;?></span>
    </div>
</div>

To create something like this

However the second reorder div is showing below but on right side. How can I modify the div.

Answer 1

I hope this helps. I think that using flex is the best way to make columns and it is the way that works for what you want to do. In addition to that flex is a property that is beginning to be used by modern websites.

 .table { display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; }.column { display: flex; flex-direction: column; flex-basis: 100%; flex: 1; justify-content: center; text-align: center; } /* extra */.column2 {background-color: #f8f8f8;}

 <div class="table"> <div class="column">Apple</div> <div class="column column2"> <p><b>Re-order:</b> in 3 days</p> <p>Tuesday 19-9-2018</p> </div> </div>

Update: You can remove justify-content and text-align as well as .column2 . I only have them so you can appreciate how the columns would look.

Answer 2

You have width: 50% but also have a margin-left: 25px which is making your second div exceed your screen width.

Try removing the margin-left and in this case the second div should float right. If you want to add spacing between them, increase the parent width or decrease each divs width.

Answer 3

TRY LIKE THIS.

<div style="display: table; width: 50%; clear: both; ">
    <div style="width: calc( 50% - 1px ); float: left;">
        <h1 style="font-size: 30px; font-weight: 600; color: #000;">
            <span><?php echo $genericItem;?></span>
            <img style="margin-left: 20px; height: 50px; width: 50px;" src="<?php echo $genericItemPath;?>" alt=""> 
        </h1>
    </div>
    <div style="width: calc( 50% - 25px ); float: right; margin-left: 25px;">
            <span style="font-size: 20px; color: #000"><b>Reorder</b> in <?php echo $reorderDays;?> days</span>
            <span style="display: block;  font-size: 12px; color: #d3d3d3; max-width: 90%;"><?php echo $reorderDate;?></span>
    </div>
</div>