Troubleshooting problems with the height of nested DIV elements

Issue

I am attempting to replicate the layout depicted in the image below. The black area represents the body with id="library", the grey div is id="body" (which is not visible due to lack of margins for inner divs), the light blue div is id="sideBar", the red div is id="content", the blue div is id="navBar", and the green div is id="contentWindow".

Image:

https://i.sstatic.net/A3EBU.png

I am facing difficulties in containing the green div within the red div (its parent). I would like to adjust only the green div's margins in relation to the red div without having to explicitly set the height. Here is my current implementation:

http://jsfiddle.net/efntL/

My goal is to ensure that all divs adjust to the screen width and height so that everything remains visible at all times, even on smaller browser windows.

I have reviewed several links but have not found a solution:

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 have also provided 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>Hey</p>
      <p>Hey</p>
      <p>Hey</p>
      <p>Hey</p>
    </div>

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

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

csshtml

Answer №1

If you have a fixed height navBar, the following code snippet may be helpful:

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;
}

Feel free to view the fiddle - http://jsfiddle.net/taneleero/8TQKW/

Answer №2

Snippet of HTML Code:

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

Cascading Style Sheets (CSS) Section:

#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%;
}

To view an illustration, visit my sample on jsFiddle

Answer №3

Experience a fully adjustable 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Implement jQuery to close multiple div elements

My dilemma involves a series of divs with different manufacturer IDs listed as follows: manufacturer[1], manufacturer[2], manufacturer[3], ... etc ... In attempting to create a JavaScript for loop to hide each div, I discovered that it was not achievab ...

javascriptjqueryhtmlcss

Struggling to determine if the checkbox has been ticked?

I have integrated a like button on my website using socket io to ensure that it updates for all users when the like button is clicked. I have successfully implemented a like() function that emits liked, increments a counter, and displays it on the page. Ho ...

javascripthtmlnode.jscheckboxsocket.io

Utilizing jQuery for serializing unorganized lists

I have created multiple lists within a list and I need to pass the IDs using jQuery to another PHP file (updateDB.php). I attempted to serialize the list data but was unsuccessful. I'm not certain if I have implemented it correctly, I searched extens ...

javascriptjqueryhtml

Unable to locate template or render function for Vue Draggable Next component

Looking to incorporate Vue Draggable Next into a Vue 3 example page but encountering some challenges. I've attempted to follow the instructions in the repository. However, I ran into issues when importing the Vue Draggable Next component and had to re ...

javascripthtmlvue.jsvuejs3vuedraggable

Arrange two divs on either side of the center div when on a smaller screen

Looking for a straightforward approach to achieve this. Imagine it as follows: [A][__B_][A] to [A][A] [__B_] I hope that explanation is clear, but I'm happy to provide more details if necessary. Thank you in advance! ...

htmlcss

Break down the organization of CSS

While exploring a website, I came across this CSS code that sets the font family to "Open Sans," Helvetica, Arial, and sans-serif. However, I am having trouble understanding this structure. Any assistance would be greatly appreciated. Thank you in advanc ...

htmlcss

What is the best way to insert space between spans in HTML when designing email templates?

I am currently designing email templates, which means I have some limitations. Although I have used align="center", I still require some spacing between the two spans. How can I achieve this? CODE: <td width="659" height="28" bgcolor="#999999" align= ...

htmlcssemailhtml-email

Is it possible to dynamically assign and call functions through an Object in Angular 6?

I implemented a click handler for a button that is generated dynamically. Within the click handler function, I am invoking a callback function. However, I encountered an issue where an error message popped up stating that "Callback function is not a fu ...

javascripthtmlangularthis

Loading screen for specific content within the current WordPress theme

I am trying to display a preloader only in the 'content' div, but it ends up hiding the entire page. The structure of the site is as follows: Title Menu Content (where I want the preloader) Footer I'm having trouble figuring out where exa ...

javascriptjquerycsswordpresspreloader

Encountering issues with accessing image files located in the public folder of my Next.js project - Receiving a 404 Error message

I am currently facing an issue with my Next.js project where I am unable to use image files from the public folder. Despite checking that the file paths, names, and extensions are correct, as well as ensuring my configurations are accurate, I keep encounte ...

javascriptcssnext.js

Modifying Label text dynamically using jQuery on Click event

My website HTML contains the following code snippet: <script src="js/jquery.flexslider.js"></script> <script src="js/jquery.rings.js"></script> The contents of jquery.rings.js are as follows: $('input[type="image"]') ...

javascriptphpjqueryhtml

The Angular Material date picker unpredictably updates when a date is manually changed and the tab key is pressed

My component involves the use of the Angular material date picker. However, I have encountered a strange issue with it. When I select a date using the calendar control, everything works fine. But if I manually change the date and then press the tab button, ...

javascripthtmlangulartypescriptangular-material

Looking to display or conceal a text box with a date picker based on the selection of a specific value from a drop-down menu

I have a dropdown with two options: Indian and Others. When I select Others, I want to display three textboxes - two with date pickers and one with a simple text input field. I have tried writing the following HTML code but I am unable to get the date pick ...

javascriptjqueryhtml

The loading indicator is not appearing inside the designated box

I have successfully implemented a loader using jQuery and CSS to display a gray background during an AJAX call. However, I am encountering an issue where the loader and background are being displayed across the entire page instead of just within a specific ...

javascriptjqueryhtmlcss

Angular Bootstrap Datepicker provides us with a date object, but I need it in the Date format

My desired date format is "Wed Aug 07 2019 16:42:07 GMT+0530 (India Standard Time)", but instead I am receiving { year: 1789, month: 7, day: 14 } from ngbDatepicker. Any assistance on resolving this issue would be greatly appreciated. ...

htmlangulartypescriptbootstrap-4angular6

What is the process for embedding JQuery within the <body> tags in Joomla 3.1?

I inserted the following code into my default.php file in Joomla 3.1. <?php JHtml::_('jquery.framework'); JFactory::getDocument()->addScript(JURI::root().'template/mytemplate/js/jquery.min.js'); ?> However, this code only pl ...

javascriptphpjqueryhtmljoomla

Image broken on default bootstrap navbar

On my computer where I am developing a Ruby on Rails app, I have a relative link to an image. To customize the style, I am using Bootstrap and have used their code to source the image for the top left brand placement. You can view the Bootstrap link here. ...

htmlcssruby-on-railstwitter-bootstrap

Overflowing HTML Table Spills Over into Neighboring Div

Is there a way to make the data in a table that spans across multiple pages overflow into a separate div on the initial page without using JavaScript since I am generating it as a PDF? See the images below for reference. Current layout: https://i.stack.im ...

htmlcsshtml-tableoverflow

Is there a potential issue with descender tags causing the malfunction of HTML and CSS tags?

Having some trouble with my <p> tag in the CSS. Can't seem to figure out why it's not working correctly. Any help is appreciated. Here's the HTML: <body> <section> <section id="pictures"> <div> < ...

htmlcsstags

Angular JS causing text alignment issues in table cells when viewed on mobile devices

I have created a web application that requires both desktop and mobile views, utilizing Angular JS. Everything is functioning as expected except for the text alignment within tables. I attempted using <td align="left">, but it did not produce any cha ...

javascripthtmlcssangularjs