How to keep sub div from considering height of its cousin?

Question

I'm almost sure this is going to be a clear: both answer, but the trouble I'm having is where to put it, or how to wrap my head around understanding it.

I have divs within divs, and this particular one (sectioncut) is taking into consideration the height of its cousin ul (subnav). I've tried encapsulating the ul in its own div, but I must not understand how position and clear works yet.

This is my first time posting on Stackoverflow, so any feedback is welcome =D

http://jsfiddle.net/JustJinxed/d62eLh4o/

HTML

<div id="pagecut">
  <div id="pagebg">
    <div id="nav">
      <ul id="subnav">
      <li><a href="index.html">Home</a></li>
      <li><a href="about.html">About</a></li>
      </ul>
      <div id="sectioncut">
        This is a test. 
      </div>
    </div>
  </div>
</div>

CSS:

body,html { 
    border: 0px;
    margin: 0px;
    height: 100%;
    background-color: #2200FF;

}

#pagecut {
    width: 95%;
    height: 100%;
    margin-right: auto;
    margin-left: auto;
    margin-top: 0;
    margin-bottom: 0;
    background-color: #2200FF;
    outline-style: solid;
    outline-color:#FF0004;


}

#pagebg {
    width: 100%;
    height: 100%;   
    margin-left: auto;
    margin-right: auto;
    background:url(Img/bg1.png);
    background-size: 100% auto;
    background-repeat:no-repeat;
}


#nav {
    width: 98%;
    height: 100%;
    margin-right: auto;
    margin-left: auto;
    outline-style: solid;
    outline-color:#00FF00;
}

#subnav {
    margin: 0px;
    padding: 0px;
}

#subnav li {
    display:inline;
    background-color: #7DA5EB;
    border-color: #7DA5EB;
    color: #FFF;
    border-top-right-radius: 7px;
    border-top-left-radius: 7px;
    border-style: solid solid none;
    padding-right: 7px;
    padding-left: 7px;
    margin-left: 2px;
    margin-right: 2px; 
    font-size: x-large;
}

#sectioncut {
    height: 100%;
    background-color: #7DA5EB;
}

Well for a first question you did pretty well :) Can you explain what you mean by 'considering the height'. Is it being the same height? What height do you want it to be? — Bobo, Aug 26 '14 at 00:48
The container div takes the entire height of the views port, which is what I want. the subnav section doesn't have a set height, it takes roughly maybe 75px of space. Which is what I want. Ideally I'd like the div under subnav to take the remaining space of the container div, but it does this and more. It seems to use the height of the container with no regards to what else is in it, and then #sectioncut extends beyond the border of the div and causes the browser to display scroll bar on the side. I'd like to stay away from using a messy overflow restriction or jquery to handle a css job. — JustJinxed, Aug 26 '14 at 02:12

score 1 · Accepted Answer · edited May 23 '17 at 12:27

1

If I understand correctly, your problem is that #sectioncut is overflowing its container because it is taking the whole container's height and being pushed down by the other div (#subnav) inside the container.

If that's the problem and you want to fill only the space left by the subnav div, I think How can I make a DIV take up the rest of the height of a container div? will help you.

It's my first time answering aswell so I hope I did it right and this was helpful to you.

edited May 23 '17 at 12:27

Community

1
1

answered Aug 26 '14 at 01:27

GoLoT

26
3

There's a lot of suggestions in that thread and I think (along with numerous other Q/A here) matches what I'm going through. It'll take some time to try these (there's like 4-5 suggestions there with some explanations) The one chosen was jquery driven, which I'm trying to stay away from, even though I use it. – JustJinxed Aug 26 '14 at 02:14
Never mind, confused your link with another. I'm almost certain the jquery answer will work, but I'd hate setting a layout using a script hack that won't be available in the mobile version of the site. The other answer of using overflow: hidden isn't ideal either, as it would cut out the border style on the bottom of this particular div. – JustJinxed Aug 26 '14 at 02:22
1

Just wondering, did you think about setting a fixed height for the menu (#subnav)? That would allow you to use absolute positioning for the 2nd div (top: Xpx; bottom: 0px;) or using calc(100% - Xpx) for the 2nd div's height. Also using a table might solve the issue. – GoLoT Aug 26 '14 at 04:02
I'm thinking that's the route I'll end up going. Seems very odd to me that there isn't a real dynamic way to do this without jScript or setting a div absolute. I'm going to mark this answered by the end of today if no one else weighs in. – JustJinxed Aug 26 '14 at 23:45

How to keep sub div from considering height of its cousin?

1 Answers1