Satinder Singh Satinder Singh - 16 days ago 16
CSS Question

How can we make horizontal UI in html?

My screen size is 1366x768 , I trying make horizontal UI for my application but did not get success . My application is a large UI which is made for drag & Drop application . I share some code of html please see . In this code there have three div elements , left-div , center-div and right div .
I want center-div have my screen size so I fix it 1366x768 but my all three div elements showing top to bottom I want show these div elements left to right with scroll because size of UI is more that screen resolution , So please anyone help me . See my below mentioned code :



.left-div {
width:500px;
height:700px;
background-color: orange;
display:inline-table;
}
.center-div {
width: 1366px;
height:700px;
display:inline-table;
background-color: #47E83D;
}
.right-div {
float:right;
width: 500px;
height:700px;
display:inline-table;
background-color: aquamarine;
}





<div class="left-div">Left Div........</div>
<div class="center-div">Center Div......</div>
<div class="right-div">Right div........</div>




Answer

Try like this, i think this will satisfy your requirement, if i am wrong then please let me know.

.main-parent{
  width: 2383px;
  height: 700px;
  overflow-x: scroll;
}
.left-div {
  width:500px;
  height:700px;
  background-color: orange;
  float: left;
}

.center-div {
  width: 1366px;
  height:700px;
  float: left;
  background-color: #47E83D;
}
.right-div {
  float:left;
  width: 500px;
  height:700px;
  background-color: aquamarine;
}
<div class="main-parent">
  <div class="left-div">Left Div........</div>
  <div class="center-div">Center Div......</div>
  <div class="right-div">Right div........</div>
</div>