Positioning a relative div in another relative div with dynamic height

Question

I have a simple problem that made me waste two days without any success. I am a beginner with CSS, so excuse me if I am asking silly questions.

JSFiddle

• http://jsfiddle.net/0npx527e/

Problem

I have a webpage with three main divs 'header', 'contentContainer' and 'footer'. In the contentContainer there is one div called "content". The content div should contains multiple sections (I use purecss to represent each section in the grid)

A section should contain two divs 'divA' and 'divB'. Now 'divA' should have dynamic height and divB should be have fixed height. Meaning if I resize the browser, 'divA' should be resized along with the section ofc. The screenshot below visually shows what I described.

Now what I don't understand is the following:

1. Why 'divB' is not at the bottom of the 'section' div although bottom is 0?

2. Why can't I position 'divA' with top/bottom? It didn't work so I had to position it with height property.

   .divA{
       position: relative;
       top: 0;
       bottom: 100px;
       ............
   }
   

   instead of

   .divA{
       position: relative;
       height: 85%;
       ...........
   }
   

   3. Why does 'divB' go outside the 'section' div? It doesn't make sense for me! 'divA' should be positioned relative to 'section' so why doesn't it respect the boundaries of the parent div? Following screenshot shows what I mean.

• Note_1 I read somewhere that I can use absolute positioning instead of relative positioning for both divs: 'divA' and 'divB'. However with absolute positioning I won't have dynamic height for 'divA'

• Note_2 I won't have elements in 'divA' and 'divB'. Just a background color or image. So basically I want the 'section' div to fill the 'content' area although it has no children with a specified height.

Please, I would really appreciate if someone explains to me the reason behind this behavior. I thought positioning elements with CSS will be logical but it turned out that its not ^^ (I am missing something for sure)

UPDATE

Thanks @Florian for your answers. I found one problem with your suggestion. After I added

overflow:hidden;

to the contentContainer like you suggested, 'divB' is going under the 'section' div. The behaviuor that I want to achive is that 'divB' should stay in the same position with the same height "100px" in the section. And 'divA' should just resize with the container. http://jsfiddle.net/oqe3bjxe/

How can this be fixed?

Regarding your answers,

1. Ok.
2. Makes sense I guess after reading "3"
3. I wasn't sure if the child knows about the parent's width and height. Thanks for clarifying.
4. Why? What is wrong with using relative positioning?
5. Why?

Sorry for asking many questions. I just really want to understand.

If using relative position is not recommended, then I guess there is for sure a better way to achieve this. Could someone please show me using JSFiddle the best practice how to do it?

Thanks in Advance, Tefa

Answer 1

The problem is that you don't have a height to the contentContainer class.

You can fix this with adding the following CSS:

.contentContainer{
    overflow:hidden;
}

There are a lot of mistakes.

1. Margin: 0 auto, doesn't work if you have position fixed.

2. Position: relative only takes top and left property that means that bottom and right won't affect it.

3. Make sure that you have a height of the container (for example 1500px) if you want to give a height of % of the child elements. The % will calculate from the height of the parent, and if you have no height for the parent that won't work.

4. I wouldn't recommend using that much position:relative. What you want to achieve is easier with margin-top of the container.

5. If you have a fixed footer, make sure you add some padding-bottom to the body.

Answer 2

As I understand your question you want to display divB inside of section. For that you need to make some change in css.

.divA {
    background-color: green;
    max-width: 1000px;
    max-height: 1080px;
    height: 100%;
    position: relative;
    top: 0;
    margin: 0 7px 0 7px;
}

add new css

.divA{
    margin-bottom: -100px;
}

.divB,
.divA:after {
    height: 100px;
}