CSS styling on relative divs inside absolute div, height not taking

Question

Ok, so this is a simple css question, but I can't seem to find a straight answer on the web to save my life. I've got this set up:

<div id="app">
    <div id="header_div"></div>
    <div id="menu_div"></div>
    <div id="content_div"></div>
</div>

and then some css:

@mixin relPos {
  position: relative;
  margin-top: 5px;
  width: 100%;
}

/*** App level ***/
#app {
  position: absolute;
  word-wrap: break-word;
  height: 100%;
  width: 100%;
}

/*** Landing Page ***/
#header_div {
  @include blackBorder;
  @include relPos;
  left: 0;
  height: 30%;
}

#menu_div {
  @include blackBorder;
  @include relPos;
  height: 10%;
}

#content_div {
  @include blackBorder;
  @include relPos;
  height: 56%;
  overflow: scroll;
}

but the dang divs are not responding to the percentage height style element... any ideas?

For context, I'm building a React.js site so I'm actually using scss files for my styling elements after rending them with React elements. Pretty sure that doesn't matter but just because I don't actually know everything, I'll mention that here. :) Thanks in advance for any help!

- Jon

[Working with the CSS `height` property and percentage values](http://stackoverflow.com/a/31728799/3597276) — Michael Benjamin, May 01 '17 at 17:19
Based on what I've read in the post you guys are referencing, the code I put up there should work. But it's not. Also, this idea works in web editors or "try it" things like the W3schools editor... not sure why it's not working on my site is the problem. — Jon Sansoucie, May 01 '17 at 17:22
The question is fundamentally different now. The comments and answers posted no longer apply. Also, the new problem you describe cannot be reproduced with the code provided. — Michael Benjamin, May 01 '17 at 17:32
So because I"m using react elements, I had to return one div with the three I'm trying to style in it for my LodaingPage element... so my structure was actually
... and so on. Because of this, the container div was not app and there for it didn't matter if I did my styling on app, I needed to do it on the other div in the middle. Once I did, it was all good! Thanks guys! — Jon Sansoucie, May 01 '17 at 17:39
@X-Ray Specs, Mostly so that they will float around and look decent no matter the size of the screen... I've also been looking into redirecting to a .m type version of my site, but if I can avoid that, I will... lol. — Jon Sansoucie, May 01 '17 at 17:44
use multiple floats instead for cleaner code. https://www.w3schools.com/css/css_float.asp — fred randall, May 01 '17 at 17:47
I suggest you close this then as _a problem that can no longer be reproduced_ — Ason, May 01 '17 at 20:24

score 2 · Accepted Answer · answered May 01 '17 at 17:26

#top {
    position:absolute;
    top:0;
    left:0;
    height: 100%;
    width: 100%;
}

#one {
    position:relative;
    margin-top:1%;
    height: 30%;
    width: 100%;
    background-color:red;
}

#two {
    position:relative;
    margin-top:1%;
    height: 10%;
    width: 100%;
    background-color:green;
}

#three {
    position:relative;
    margin-top:1%;
    height: 57%; /* not 60% to account for the 5px margin */
    width: 100%;
    background-color:blue;
}

<div id="top">
    <div id="one"></div>
    <div id="two"></div>
    <div id="three"></div>
</div>

score 1 · Answer 2 · answered May 01 '17 at 17:58

1

Instead of using multiple position: relative; use the float: property across for cleaner code.

You can achieve this cleanly with 3 float:left;. Keep the parent div position:relative; and the 3 inner, float:left;. Nest another div around all these elements with your position:absolute; if still necessary.

answered May 01 '17 at 17:58

fred randall

7,023
18
73
167

Floats is not meant for general layouts, and is a really bad idea – Ason May 01 '17 at 20:22
I really disagree. Especially for a responsive layout. But, I appreciate the argument. – fred randall May 01 '17 at 20:28
I was just about to say the opposite, it is bad for responsive layout since _it change the normal flow of a document_ :) – Ason May 01 '17 at 20:32

Jon Sansoucie · Answer 3 · 2017-05-01T17:53:52.490

So here's my React code:

import React from 'react';
import ReactDOM from 'react-dom';

class LandingPage extends React.Component
{
  render()
  {
    return(
      <div>
        <div id="header_div">
          <h1> Header picture goes here </h1>
        </div>
        <div id="menu_div">
          <h2> here's for the menu buttons </h2>
        </div>
        <div id="content_div">
          <h3> and... the content to be loaded based on first load or menu button mash </h3>
        </div>
      </div>
    );
  }
};

export default LandingPage;

And because I'm using react elements, I had to return one div with the three I'm trying to style in it for my LandingPage element... so my structure was actually ... and so on. Because of this, the container div was not app and there for it didn't matter if I did my styling on app, I needed to do it on the other div in the middle. I added a id="main" to the middle div and styled it as I had my #app styled... Once I did, it was all good! Thanks guys!

CSS styling on relative divs inside absolute div, height not taking

3 Answers3