Expandable absolute positioned child divs

Question

I have two absolute positioned child divs inside a relative positioned div. I am having troubles making the two absolute positioned child divs expandable without overlapping each other. I've tried a variety of different ways already. I also looked at this position absolute but resize parent but I need my child divs to be absolute positioned not relative.

Also this is for mobile to tablet sized browsing so all width's are already 100%.

Edit: I only need .child2 to be expandable in height because .child1 is an image and it will always be 200px in height.

My Sample Code:

<div class="parent">
    <div class="child1">
        <h2>Client</h2>
        <h4>Client Name</h4>
    </div>    
    <div class="child2">
        <img src="imageurl" />
    </div>
</div>
<div class="parent">
    <div class="child2">
        <img src="imageurl" />
    </div>    
    <div class="child1">
        <h2>Skills</h2>
        <h4>Skill Utilized</h4>
    </div>
</div>
<div class="parent">
    <div class="child1">
        <h2>Project URL</h2>
        <h4><a href="#">Link to Project</a></h4>
    </div>    
    <div class="child2">
        <img src="imageurl" />
    </div>
</div>

My Sample CSS:

.parent {
    position: relative;
    width: 100%;
    height: auto;
}

.child1 {
    position: absolute;
    top: 50px;
    width: 100%;
    height: 200px;
}

.child2 {
    position: absolute;
    top: 250px;
    width: 100%;
    height: auto;
}

score 0 · Answer 1 · answered Jul 22 '13 at 20:32

0

You can set a max-height for both divs or use Javascript to detect if the sum of the div heights is bigger than the parent div's height.

answered Jul 22 '13 at 20:32

Pieter

1,823
1
12
16

How would I go about using JS to detect this under 767px viewport? I don't know JS so please dumb it down for me. I know how to create a JS file and link it accordingly but not how to write the code, just to clarify. – Anthony Russo Jul 23 '13 at 15:59
`document.getElementById('ID of parent div').style.height = 200 + parseInt(document.getElementById('ID of expanding div').style.height)`. Remember that you should use the ID, not the class to select the element. You can place this code between script tags in the head. – Pieter Jul 23 '13 at 19:05
I added to my wordpress header.php file. --- I created options.js --- Now do I just post your code in there or does it need to be written a certain way? Also do I input # in front of the id or just the id name? – Anthony Russo Jul 23 '13 at 19:30
In that case it's not doing anything. I have your code in a js file and the script in the header to call it. Any certain CSS settings or am I doing something wrong in the js file? – Anthony Russo Jul 23 '13 at 19:46
Try this: `document.getElementById('ID of parent div').style.height = (200 + parseInt(document.getElementById('ID of expanding div').style.height) + 'px'` – Pieter Jul 23 '13 at 19:54
This can be just pasted into a .js file? I did just that but nothing happens when testing it. – Anthony Russo Jul 23 '13 at 20:01
I've tried both nothing registers when testing. Something has to be missing here. My code is above. – Anthony Russo Jul 23 '13 at 20:21

Bucthree · Answer 2 · 2013-07-22T20:58:34.147

0

You need to give the parent a height otherwise the code doesnt realize what is top position and what is bottom position.

CSS

.parent {
    position: relative;
    width: 100%;
height: 300px;
}

.child1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.child2 {
     position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

edited Jul 22 '13 at 20:58

answered Jul 22 '13 at 20:36

Bucthree

261
1
3
9

I did forget to mention this is for mobile to tablet size browsing. So the width's are already set at 100%. – Anthony Russo Jul 22 '13 at 20:39
Do you want the child divs to be side by side or one on top of the other? – Bucthree Jul 22 '13 at 20:44
On top of one another. – Anthony Russo Jul 22 '13 at 20:50
I tried this but then if your content expands over 300px it starts overlapping the child divs. – Anthony Russo Jul 22 '13 at 21:01
where is the parent positioned? does it need to have the relative attribute? you can remove the relative attribute and the content will height will change automatically. – Bucthree Jul 22 '13 at 21:17
I have two more of those stacked on top of each other. I edited the code so you can see. – Anthony Russo Jul 22 '13 at 23:04

score 0 · Answer 3 · answered Jul 23 '13 at 13:54

I think youre going to have to look into another option besides html and css to solve this. Using css position will take its applied element outside of the normal markup flow. Using position:relative on an element doesnt take into consideration any positioning you may have applied to other elements. You have position relative on multiple elements, but dont actually call out where or what you want them positioned relative to, hence why they stack.

If youre trying to create a completely dynamic and responsive site that will resize to any tablet and mobile resolution, perhaps look into using the meta tag "viewport".

This is an example:

HTML

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum=-scale=1.0, initial-scale=1.0" />
        <title>Responsive Web Design</title>
        <link rel="stylesheet" type="text/css" href="css/screenStyles.css" />
        <link rel="stylesheet" type="text/css" href="css/screenLayoutLarge.css" />
        <link rel="stylesheet" type="text/css" media="only screen and (min-width:50px) and (max-width:500px)" href="css/screenLayoutSmall.css" />
        <link rel="stylesheet" type="text/css" media="only screen and (min-width:501px) and (max-width:800px)" href="css/screenLayoutMedium.css" />
        <!--[if lt IE 9]>
            <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>

Using the viewport meta tag allows you to call out min-max widths and then reference different style sheets to be used with different screen resolutions.

This website is already responsive and uses viewport. I edited the code a little does it help if I only need .child2 to be expandable in height? — Anthony Russo, Jul 23 '13 at 15:46
It would be more helpful if you had a mock up image to show what you're wanting to accomplish. — Bucthree, Jul 23 '13 at 16:05
http://i39.tinypic.com/29dkbp3.jpg to http://i41.tinypic.com/2i7y6oi.jpg --- It looks how I want it to look right now but if the content on the bottom part extends the height of the parent div does not. — Anthony Russo, Jul 23 '13 at 16:18
I updated code, it's not exact but it's a clean example and is arranged accordingly now. — Anthony Russo, Jul 23 '13 at 16:59
This is the only way I would know how to do this: http://fiddle.jshell.net/BkAYd/ It'll completely expand no matter how much content goes in. — Bucthree, Jul 23 '13 at 17:36
You're using position relative though so the images aren't always on top. That's probably why it's expanding. — Anthony Russo, Jul 23 '13 at 17:47

Expandable absolute positioned child divs

3 Answers3