why is a simple DIV positioning kicking my butt??

Question

User1137322238 posted

The goal:   simply place two controls in a horizontal line, within a DIV.

I've tried ...everything: clearly I'm not getting how it works..

I'm using asp.net in VS.NET 2019, & a css page

Ideally, I want two gauges side by side in a DIV.

Currently, here's the code:

.GaugeuserCount {

}
.GaugeP21Emails {
    float: right;
    ;
    top: 0px;
    height: 100px;
    width: 100px;
}
.gaugeDiv {
    ;
    width:300px;
    height:150px;
    border:3px solid green;
}

            <div id="gaugeDiv" runat="server" class="gaugeDiv">
                <telerik:RadRadialGauge ID="GaugeuserCount" runat="server" Scale-MinorUnit="1" Width="150px" Height="150px" Scale-Min="0" BorderColor="#CC9900" Scale-MinorTicks-Color="SteelBlue" Scale-MajorTicks-Color="SteelBlue" Scale-MajorTicks-Size="18" CssClass="GaugeuserCount"></telerik:RadRadialGauge>
                <telerik:RadRadialGauge ID="GaugeP21Emails" runat="server" Scale-MinorUnit="1"  Scale-Min="0" BorderColor="#CC9900" Scale-MinorTicks-Color="SteelBlue" Scale-MajorTicks-Color="SteelBlue" Scale-MajorTicks-Size="18" CssClass="GaugeP21Emails"></telerik:RadRadialGauge>
            </div>

And here's what it looks like(Firefox on Windows 10):

Answer 1

User475983607 posted

Placing divs side by side is very common in response websites.  The Bootstrap grid system is good example; https://getbootstrap.com/docs/4.0/layout/grid/.    Other examples is the CSS Flexbox; https://www.w3schools.com/css/css3_flexbox.asp

With that being said, these options might not work with the Telerik styles.  Telerik is a paid for framework which makes it difficult for ASP.NET support members to test layouts.  Your best option is Telerik support.  The getting started docs show side-by-side gauges so seems possible; https://docs.nativescript.org/angular/ui/ng-components/ng-gauge/getting-started

Answer 2

User1137322238 posted

wow, superb!

The flexbox way just got me back on track.

Thank you!!