CODEWITHSUNDEEP
csshtml
Oscar Nalin
Oscar Nalin

Reputation: 57

DIVs inside DIV height issue

Problem

I'm trying to make something similar to the image below, where black is the body with id="library", grey div id="body" (is not visible due to lack of margins for inner divs), light blue div id="sideBar", red div id="content", blue div id="navBar" and green div id="contentWindow".

Image:

http://i.imgur.com/wplyfqJ.png?1

I'm having trouble containing the green div inside the red div (the greens parent). Basically I would like to configure only the greens margins with respect to the red div and not have to set the height explicitly. This is my implementation:

http://jsfiddle.net/efntL/

I would like all divs to adjust to the screen width and height so that everything is visible at all times (down to small browser windows).

I've looked at the following links but they haven't provided anything useful:

Resizable DIV inside DIV 100% height with margin around not working well! Some help please?

How to push a div inside this div structure?

Parent div expand with children Div

The code can be seen in the fiddle above but I've also included it here:

body.library,
html {
  background: black;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0 none;
}

div#body {
  /*display:block;*/
  background: #E6E6E6;
  max-width: 400px;
  display: block;
  height: 90%;
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: auto;
  margin-right: auto;
}

div#sidebar {
  /*display:block;
    position:relative;*/
  background: #94DBFF;
  float: left;
  width: 50px;
  height: 100%;
}

div#content {
  /*display:block;
    position:relative;*/
  background: #FF0000;
  min-width: 70px;
  margin-right: 0px;
  margin-left: 50px;
  margin-top: 0px;
  margin-bottom: 0px;
  height: 100%;
}

div#contentWindow {
  display: block;
  position: relative;
  height: auto;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  margin-top: 20px;
  margin-bottom: 20px;
  margin-right: 80px;
  margin-left: 80px;
  background-color: green;
  height: 100%;
  overflow: auto;
}

div#navBar {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  text-align: center;
}
<body class="library">
  <div id=body>
    <div id="sidebar">
      <p>Hej</p>
      <p>Hej</p>
      <p>Hej</p>
      <p>Hej</p>
    </div>

    <div id="content">
      <div id="navBar">
        <p>Hey</p>
      </div>

      <div id="contentWindow">
        <p>Hej</p>
      </div>
    </div>
  </div>
</body>

Upvotes: 2

Views: 13153

Answers (3)

Arun Aravind
Arun Aravind

Reputation: 1318

Here is a completely resizable solution.

html {
  height: 100%;
  width: 100%;
}
#library {
  margin: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  overflow: hidden;
}
#library #body {
  width: 90%;
  height: 90%;
  background-color: gray;
  margin: 3% 5%;
}
#library #body #sidebar {
  display: inline-block;
  width: 20%;
  height: 90%;
  background-color: #8eeeff;
  margin: 2%;
}
#library #body #content {
  display: inline-block;
  width: 70%;
  height: 90%;
  background-color: red;
  margin: 2%;
}
#library #body #content #navbar {
  width: 90%;
  height: 20%;
  background-color: blue;
  margin: 3% 5%;
}
#library #body #content #contentwindow {
  width: 90%;
  height: 70%;
  background-color: green;
  margin: 3% 5%;
}

markup

<body id="library">


        <div id="body">

            <div id="sidebar"></div>

            <div id="content">

                <div id="navbar"></div>

                <div id="contentwindow"></div>

            </div>

        </div>


</body>

Upvotes: 0

Dvir
Dvir

Reputation: 3339

Html Part:

<div id="wrapper">
    <div id="inside-left"></div>
    <div id="inside-right">
        <div id="top"></div>
        <div id="bottom"></div>
    </div>
</div>

Css Part:

#wrapper {    
    box-sizing: border-box;
    overflow: hidden;
    background-color: black;
    padding: 7%;
}
#inside-left {
    box-sizing: border-box;
    background-color: cyan;
    float: left;
    width: 30%;
    height: 400px;
}
#inside-right {
    overflow: hidden;
    box-sizing: border-box;
    background-color: red;
    width: 70%;
    float: right;
    padding: 10px;    
    height: 400px;
}
#inside-right #top {
    box-sizing: border-box;
    background-color: blue;
    height: 70%;
    width: 100%;
}
#inside-right #bottom {
    margin-top: 10px;
    box-sizing: border-box;
    background-color: green;
    height: 28%;
    width: 100%;
}

Look in my example on jsFiddle

Upvotes: 1

Tanel Eero
Tanel Eero

Reputation: 652

If your navBar has a fixed height then this might work for you:

body.library, html {
    background:black;
    height:100%;
    margin: 0; 
    padding: 0; 
    border: 0 none;
}

div#body {
     /*display:block;*/
    background:#E6E6E6;
    max-width:400px;
    display:block;
    height:90%;
    margin-top:20px;
    margin-bottom:20px;
    margin-left:auto;
    margin-right:auto;  
}

div#sidebar{
    /*display:block;
    position:relative;*/
    background:#94DBFF;
    float:left;
    width:50px;
    height:100%;    
}

div#content{
    display:block;
    position:relative; //position relative to contain the absolutely positioned element
    background:#FF0000; 
    min-width:70px;
    margin-right:0px;
    margin-left:50px;
    margin-top:0px;
    margin-bottom:0px;
    height:100%;
}

div#contentWindow{
    display: block;
    position:absolute; //set the position to absolute
    height:auto;
    bottom:0;
    top:0;
    left:0;
    right:0;
    margin-top:50px; //increase margin top to have the navBar visible
    margin-bottom:20px;
    margin-right:20px;
    margin-left:20px;
    background-color: green;
}

div#navBar {
    list-style-type:none;
    margin:0;
    padding:0;
    overflow:hidden;
    text-align:center;
}

Check out the fiddle - http://jsfiddle.net/taneleero/8TQKW/

Upvotes: 1

Related Questions