Question How to position 2 divs side by side

[raysefo]

Hello,

In my application, I am printing a razor page and I want to display 2 divs side by side. (Contact and Delivery Information) I want the grid to start from the left and closer to the others.

Here is my sample razor:

@page "/dialogcard/{Order}"
@using IMS.CoreBusiness
@using IMS.UseCases.Interfaces.OrderDetail
@inject IViewOrderDetailsByOrderIdUseCase ViewOrderDetailsByOrderIdUseCase
@inject DialogService DialogService
@inject IJSRuntime JsRuntime


@if (orderDetails != null)
{
    <div class="row my-4">
        <div class="col-md-12">

            <RadzenCard>
                <h3 class="h5">
                    Order @Order.OrderId Details
                </h3>
                <RadzenTabs>
                    <Tabs>

                        @{
                            var detailVendorId = 0;
                        }
                        @foreach (var detail in orderDetails)
                        {
                            @if (detailVendorId != detail.VendorId)
                            {
                                <RadzenTabsItem Text="@detail.Vendor.Name">
                                    <div id="printarea1">
                                        <div class="float-container row">
                                            <div class="col-lg-6 d-flex float-child">
                                                <RadzenCard Style="width: 100%; overflow: hidden;">
                                                    <h3 class="h5">Contact</h3>
                                                    <div class="d-flex flex-row">
                                                        <div>
                                                            <div>Responsible</div>
                                                            <b>@detail.Vendor.MainResponsibleName</b>
                                                            <div class="mt-3">Company</div>
                                                            <b>@Order?.CustomerName</b>
                                                        </div>
                                                    </div>
                                                </RadzenCard>
                                            </div>
                                            <div class="col-lg-6 d-flex float-child">
                                                <RadzenCard Style="width: 100%; overflow: hidden;">
                                                    <h3 class="h5">Delivery Information</h3>
                                                    <div class="row">
                                                        <div class="col">
                                                            <div>Address</div>
                                                            <b>@(detail?.ShippingNumber), @(detail?.TrackingNumber)</b>
                                                            <div class="mt-3">Vendor</div>
                                                            <b>@detail?.Vendor.Name</b>
                                                        </div>
                                                    </div>
                                                </RadzenCard>
                                            </div>
                                        </div>
                                    </div>

                                    <div id="printarea">
                                        <div id="wrapper">
                                            <RadzenBadge BadgeStyle="BadgeStyle.Secondary" Text=@($"{string.Format(new System.Globalization.CultureInfo("en-US"), "{0:C}", orderDetails?.Where(x => x.VendorId == detail.VendorId).Select(x => x.TotalBuyPrice).Sum())}") style="margin-bottom: 5px"/>
                                        </div>
                                        <RadzenDataGrid AllowFiltering="true" AllowPaging="true" AllowSorting="true" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive"
                                                        Data="@orderDetails.Where(x => x.VendorId == detail.VendorId)" TItem="OrderDetail" Class="mt-3">
                                            <Columns>
                                                <RadzenDataGridColumn TItem="OrderDetail" Property="Id" Title="Number" Width="100px"/>
                                                <RadzenDataGridColumn TItem="OrderDetail" Property="ProductCode" Title="Code" Width="130px"/>
                                                <RadzenDataGridColumn TItem="OrderDetail" Property="ProductName" Title="Name" Width="130px"/>
                                                <RadzenDataGridColumn TItem="OrderDetail" Property="Currency" Title="Currency" Width="95px"/>
                                                <RadzenDataGridColumn TItem="OrderDetail" Property="Quantity" Title="Quantity" Width="95px"/>
                                                <RadzenDataGridColumn TItem="OrderDetail" Property="BuyUnitPrice" Title="Unit Price" Width="95px"/>
                                                <RadzenDataGridColumn TItem="OrderDetail" Property="TotalBuyPrice" Title="Total Price" Width="95px"/>

                                            </Columns>
                                        </RadzenDataGrid>
                                    </div>
                                </RadzenTabsItem>
                            }
                            detailVendorId = detail.VendorId;
                        }

                    </Tabs>
                </RadzenTabs>
            </RadzenCard>
        </div>

    </div>
}


<div class="row">
    <div class="col-md-12 text-right">
        <RadzenButton Click="@((args) => DialogService.Close(false))" ButtonStyle="ButtonStyle.Secondary" Text="Close" Style="width: 120px" Class="mr-1"/>
        <RadzenButton Click="PrintDocument" Text="Print" Style="width: 120px" />
        @*<button type="button" class="btn btn-primary btns" @onclick="PrintDocument">Print</button>*@
    </div>
</div>

@code {
    [Parameter] public ReportViewModel Order { get; set; }
    IEnumerable<OrderDetail> orderDetails;

    protected override async Task OnInitializedAsync()
    {
        orderDetails = await ViewOrderDetailsByOrderIdUseCase.ExecuteAsync(Order.OrderId);
        
    }
    private void PrintDocument()
    {
        JsRuntime.InvokeVoidAsync("print");
    }
}

And here is my related CSS:

@media print {
    body * {
        visibility: hidden;
    }
    #printarea, #printarea1, #printarea *, #printarea1 * {
        visibility: visible;
    }
    #printarea {
        position: absolute;
        left: 0;
        top: 0;
        
    }
    #printarea1 {
        position: fixed;
        left: 0;
        top: 0;
    }
    @page {
        size: A4 landscape;
    }
    .float-child {
        width: 50%;
        float: left;
        /*padding: 20px;*/
        
    }

And the result which is not even close what I want:

 

[Skydiver]

Sounds like a CSS question rather than a C# question.

 

[raysefo]

I posted in the CSS section tagged with CSS

 

[Skydiver]

And hopefully someone responds. The typical answer involves using float, but since it also looks like you are using Bootstrap, there is likely the Bootstrap way of doing things.

 

[Skydiver]

Perhaps this will get you started the right direction:

Columns

Learn how to modify columns with a handful of options for alignment, ordering, and offsetting thanks to our flexbox grid system. Plus, see how to use column classes to manage widths of non-grid elements.

getbootstrap.com

 

[raysefo]

Maybe it is easier to just remove the not-active tabs instead. (vendor 3)