CODEWITHSUNDEEP
htmlcssresponsive-design
Luoruize
Luoruize

Reputation: 688

Make parent div with absolute position take the width of children divs

I have the following html structure:

<div class="parent">
    <div class="child1"></div>
    <div class="child2"></div>
</div>

The parent is positioned absolutely, child1 and child2 are displayed side-by-side using inline-block. I need this whole thing to be responsive based on the width of the 2 children divs. the problem is, if I increase the width of any of them, the parent's width remains the same. Changing its position to relative fixes this, but I have to have it in absolute. Is there anyway to get it to be responsive?

EDIT:

I was hoping for this to be simple, but apparently not so much... :( here's the actual HTML:

<div class="action_container">
    <div class="action_inner">
        <div class="action_title">Format Text</div>
        <div class="action_body">
            <div class="action_args_section"></div>
            <div class="action_output_section"></div>
        </div>
    </div>
</div>

And the CSS:

<style>
    .action_container {
        display: block;
        position: absolute;
    }

    .action_inner {
        border: 1px solid black;
    }

    .action_inner {
        min-width: 120px;
        min-height: 50px;
        background-color: white;
        border: 1px solid #666;
        border-radius: 5px;
    }

    .action_title {
        font-size: 12px;
        font-weight: bold;
        text-align: center;
        border-bottom: 1px solid #ccc;
        padding: 3px;
    }

    .action_args_section {
        display: inline-block;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        padding: 3px;
    }

    .action_output_section {
        display: inline-block;
        width: 50px;
        vertical-align: top;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        padding: 3px;
   }
</style>

Upvotes: 9

Views: 12801

Answers (8)

Nick
Nick

Reputation: 3281

.parent {
    position:absolute;
    height:50px;
    border:1px solid red;
}
.child1 {
    width:100px;
    height:30px;
    border:1px solid green;
}
.child2 {
    width:150px;
    height:30px;
    border:1px solid blue;
}
<div class="parent">
    <div class="child1"></div>
    <div class="child2"></div>
</div>

Is this what you're looking for?

JSFiddle

Upvotes: 3

mannyyysh
mannyyysh

Reputation: 339

see the sample solution here in jsfiddle link

using this css:

.parent{
    position:fixed;
    background-color:blue;
    height:auto;
    width:auto;
}
.child1{width:200px;background-color:black;height:200px;float:left;}
.child2{width:200px;background-color:red;height:200px; float:left;}

if it is not what you're looking for,you can edit your css here then we can help

Upvotes: 0

Bartek Cholewa
Bartek Cholewa

Reputation: 71

.parent{

  position: absolute;
  display: table;

}

.child{

  position: relative;
  display: table-cell;

}

Use this trick to set children in single line and parent to get width from them. Don't apply floats to nothing. And remember about white-space: nowrap; if You need to keep single line in child elements.

Here is fiddle.

Upvotes: 7

Samer Allahham
Samer Allahham

Reputation: 76

.parent{
  float: left;
  posetion: absolute;
background-color: yellow;
  width:auto;
  height: auto;
}
.parent div{
  float: left;
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: red;
  }
<div class="parent">
    <div class="child1">this</div>
    <div class="child2">this</div>
</div>
Here's The Code You Need :)

Upvotes: -2

Brian
Brian

Reputation: 4344

If you want a responsive design, make sure you're using percentages, and not pixel values because the size of the divs will be calculated by the viewport width.

If you just want the parent to resize based on the absolute sizes of the child divs, add height:auto; width:auto to the parent. Then, change the child divs to display:block; float:left. The parent will resize accordingly.

Updated CodePen Demo

CSS

.action_container {
    display: block;
    position: absolute;
    height:auto;
    width:auto;
}
.action_inner {
    border: 1px solid black;
}
.action_inner {
    min-width: 120px;
    min-height: 50px;
    background-color: white;
    border: 1px solid #666;
    border-radius: 5px;
}
.action_title {
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    border-bottom: 1px solid #ccc;
    padding: 3px;
}
.action_args_section {
    display: block;
    float:left;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    padding: 3px;
    width:300px;
    border: 1px solid red;
}
.action_output_section {
    display: block;
    float:left;
    width: 150px;
    vertical-align: top;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    padding: 3px;
    border: 1px solid blue;
}

Upvotes: 0

Ian Hazzard
Ian Hazzard

Reputation: 7771

I did this easily. Changing the width of the divs changes the parent as well.

<div class="parent">
    <div class="child1"></div>
    <div class="child2"></div>
</div>

<style>

div{border:1px solid black;}

.parent{

position:absolute;
width:auto;
height:auto;
}

.child1{
display:inline-block;
width:40px;
height:40px;
}

.child2{
display:inline-block;
width:30px;
height:40px;
}

</style>

Upvotes: 0

user2934155
user2934155

Reputation:

Try use a max-width to set a maximum width for the parent div so it doesn't get wider than specified.

Upvotes: 0

Gurkan İlleez
Gurkan İlleez

Reputation: 1573

.parent{
            position:absolute;
            left : 60px;
            top : 60px;
            width : auto;
            height:auto;
            border:1px solid black;
        }
        .parent .child{
            display:inline-block;
            border:1px solid blue;
        }

<div class="parent">
    <div class="child">aaaaaassssssssssssss</div>
    <div class="child">sssssssccccccccccccccccccc</div>
</div>

Upvotes: 0

Related Questions