Make parent div with absolute position width of child 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 an inline block. I need all of this to be responsive to the width of two children. the problem is that if I increase the width of any of them, the width of the parent stays the same. Changing its position to relative fixes, but I have to have it in absolute. Is there any way I can get it to be responsive?
EDIT:
I was hoping it would be simple, but apparently not 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>
source to share
.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 are looking for?
source to share
.parent{
position: absolute;
display: table;
}
.child{
position: relative;
display: table-cell;
}
Use this trick to set children to the same line and parent to get the width from them. Do not apply floats to zero. And remember the white space: nowrap; if you need to keep one line in children.
Here is a fiddle .
source to share
see a sample solution here at 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 this is not what you are looking for, you can edit your css here, then we can help
source to share
.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>
source to share
I made it easy. Changing the width of the divs also changes the parent.
<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>
source to share
If you want a responsive design, make sure you use percentages and not pixel values, because the divs will be sized by the viewport width.
If you just want the parent to resize based on the sizes of the absolute 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 demo version of CodePen
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;
}
source to share
.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>
source to share