CODEWITHSUNDEEP
css
erdeepak
erdeepak

Reputation: 415

Custom css divs overlapping each other

I wish to create a dynamic page as per the attached blueprint but divs are somewhere overlapping and also need some improvements. Need responsive layout and text of divs will not overlap each other while resizing.

html,
body {
  margin: 0;
  overflow: hidden;
}
.top-bar {
  position: absolute;
  width: 100%;
  height: 5%;
  bottom: 95%;
  border-style: dotted;
}
.right-panel-main {
  position: absolute;
  height: 90%;
  bottom: 5%;
  width: 20%;
  right: 0;
  background-color: red;
  border-style: dotted;
  position: absolute;
}
.left-panel-main {
  position: absolute;
  height: 90%;
  bottom: 5%;
  width: 80%;
  right: 20%;
  background-color: pink;
  border-style: dotted;
  position: absolute;
}
#section-panel-main {
  width: 100%;
  height: 8%;
  border-style: dotted;
}
#response-button-panel {
  width: 100%;
  height: 8%;
  border-style: dotted;
  bottom: 0;
  position: absolute;
}
.bottom-bar {
  width: 100%;
  height: 5%;
  top: 95%;
  border-style: dotted;
  position: absolute;
  bottom: 0;
}
<div id="container">
  <div class="top-bar">j</div>
  <div class="left-panel-main">
    <div id="section-panel-main"></div>
    <div id="response-button-panel"></div>

  </div>
  <div class="right-panel-main">j</div>
  <div class="bottom-bar">j</div>
</div>
\

    <html>
<head> 
<style>
html, body {
    margin: 0;
overflow:hidden;

}

.top-bar
{
position: absolute;
width:100%;
height:5%;
bottom:95%;
border-style: dotted;
}

.right-panel-main
{
position: absolute;
height:90%;
bottom:5%;
width:20%;
right: 0;
background-color: red;
border-style: dotted;
position:absolute;
}
.left-panel-main
{
position: absolute;
height:90%;
bottom:5%;
width:80%;
right:20%;
background-color: pink;
border-style: dotted;
position:absolute;
}

#section-panel-main
{
width:100%;
height:8%;
border-style: dotted;
}

#response-button-panel
{
width:100%;
height:8%;
border-style: dotted;
bottom : 0;
position: absolute;
}
.bottom-bar
{
width:100%;
height:5%;
top:95%;
border-style: dotted;
position: absolute;
bottom: 0;

}
</style>

</head>
<body>
<div id="container">
    <div class="top-bar">j</div>
    <div class="left-panel-main">
        <div id="section-panel-main"></div>
        <div id="response-button-panel"></div>

    </div>
    <div class="right-panel-main">j</div>
    <div class="bottom-bar">j</div>
</div>
</body>
</html>

Description

Upvotes: 0

Views: 427

Answers (1)

user5660692
user5660692

Reputation:

try this layout, perfectly responsive, of course for small devices you have to use media queries

body{
  margin: 0;
}

*{
box-sizing: border-box;
}

#header {
  position: absolute;
  top: 0;right:0;left:0;
  height: 40px;
  background: red;
}

#content{
  position: absolute;
  top: 40px;
  left:0;right:0;
  bottom: 40px;
}

#container{
  position: relative;
  margin-right: 140px;/*width of sidebar*/
  height: 100%;
  background: green;
}

#section{
  height: 40px;
  background: coral;
}

#main {
  position: absolute;
  top: 30px;
  left:0;right:0;
  bottom: 30px;
  overflow: auto;
  background-color: green;
}

#buttom-panel {
  position: absolute;
  right:0;left:0;bottom: 0;
  height: 30px;
  background-color: lightblue;
}

#sidebar{
  position: absolute;
  top: 0;
  right: 0;
  width: 140px;/*width of sidebar*/
  height: 100%;
  background-color: yellow;
}

#footer{
  position: absolute;
  left:0;right:0;bottom:0;
  height: 40px;
  background-color: blue;
  
}
<html>
  <head>
  
  </head>
  
  
  <body>
  <div id="header">header</div>
  <div id="content">
    <div id="container">
      <div id="section">section</div>
      <div id="main">scrollable</div>
      <div id="buttom-panel">buttom panel</div>
    </div>  
    <div id="sidebar">sidebar</div>
  </div>
  
  <div id="footer">footer</div>
  
  
  
  
  </body>  
</html>

Upvotes: 1

Related Questions