Under HTML5 one should not use any more HTML Table-Row-TD elements, since these would allegedly slow down the rendering.
But how do you get it when you want to arrange child elements in a row in a div container then in a row
The trick is the CSS style setting style = "display: flex; flex-direction: row"
Bad situation:
This HTML construct contains a comprehensive div container: divTop, which is to arrange two child elements (divBreadcrumb and divNext) in a table.
As already seen above, the second div region is always arranged below the first div region.
<div id="divTop" class="divTop" style="height:40px;flex-flow:row"> @*-----< Breadcrumb >-----*@ <div id="divBreadcrumb" class="divBreadcrumb"> <a id="btnUserNotes" class="btn path_link" title="User Notes" href="~/user/User_Page/@Model.Project.IDOwner"> @Model.Ownername </a> </div> @*-----</ Breadcrumb >-----*@
@*-----< Breadcrumb >-----*@ <div id="divNext" class="" style="position:absolute;float:right;"> <a class="lnkPrev" onclick="goto_Image_Left(-1)">▶ ❮</a> <a class="lnkNext" onclick="goto_Image_Right(1)">⯇❯</a> <a id="lnkGoto" class="path_link" title="Goto" href=""> Open⭜⮣ </a> </div> @*-----</ Breadcrumb >-----*@ </div> @*-------< divTop >-------*@ |
Solution:
The trick is to enter the parent HTML element with the display: flex and flex-direction: row styles
style="height:40px;display:flex;flex-direction:row" |
OK
Solved HTML CSS style problem
@*-------< divTop >-------*@ <div id="divTop" class="divTop" style="height:40px;display:flex;flex-direction:row"> @*-----< Breadcrumb >-----*@ <div id="divBreadcrumb" class="divBreadcrumb"> <a id="btnUserNotes" class="btn path_link" title="User Notes" href="~/user/User_Page/@Model.Project.IDOwner"> @Model.Ownername </a> </div> @*-----</ Breadcrumb >-----*@
@*-----< Breadcrumb >-----*@ <div id="divNext" class="" style=""> <a class="lnkPrev" onclick="goto_Image_Left(-1)">▶ ❮</a> <a class="lnkNext" onclick="goto_Image_Right(1)">⯇❯</a> <a id="lnkGoto" class="path_link" title="Goto" href=""> Open⭜⮣ </a> </div> @*-----</ Breadcrumb >-----*@ </div> @*-------< divTop >-------*@ |