Div as wide as divs inside of it

Question

Is there a CSS Way to make a parent div as wide as all the divs are together inside of it. Like this:

+--------------------------------------------------+
|               DIV                                |
|                                                  |
|  +---------+    +---------+    +---------------+ |
|  |         |    |         |    |               | |
|  |         |    |         |    |               | |
|  |   DIV   |    |  DIV    |    |   DIV         | |
|  |         |    |         |    |               | |
|  |         |    |         |    |               | |
|  +---------+    +---------+    +---------------+ |
|                                                  |
|                                                  |
|                                                  |
|                                                  |
+--------------------------------------------------+


+---------------------------------------+
|                 DIV                   |
|  +-----------+    +---------------+   |
|  |           |    |               |   |
|  |           |    |               |   |
|  |           |    |               |   |
|  |   DIV     |    |     DIV       |   |
|  |           |    |               |   |
|  |           |    |               |   |
|  |           |    |               |   |
|  |           |    |               |   |
|  +-----------+    +---------------+   |
|                                       |
+---------------------------------------+

In the end I want to center the parent divs horizontally. Because of that, I have to get the summed up width of the child divs as the width of the parent div. I will center the parent div with display:table and margin:0 auto.

Any Ideas?

Thanks!

Basically, if the widths aren't set...NO. Related - http://stackoverflow.com/questions/34995740/css-when-inline-block-elements-line-break-parent-wrapper-does-not-fit-new-width — Paulie_D, Feb 19 '16 at 10:43

score 0 · Answer 1 · answered Feb 19 '16 at 11:57

Run the snippet below to see I have created a similar layout as per the image you provided,

using flexbox which is fully responsive, everything is centered and everything can be adjusted.

Also the parent divs are centered horizontally.

* {
  margin: 0;
  padding: 0;
}
html,
body {
  width: 100vw;
  height: 100vh;
}
.container {
  display: flex;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}
.parent_one,
.parent_two {
  display: flex;
  background-color: blue;
  height: 40%;
  justify-content: space-around;
  align-items: center;
}
.parent_one {
  width: 60%;
}
.parent_two {
  width: 30%;
}
.child {
  background-color: yellow;
  width: 30%;
  height: 90%;
}

<div class="container">
  <div class="parent_one">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>

  <div class="parent_two">
    <div class="child"></div>
    <div class="child"></div>
  </div>
</div>

score 0 · Answer 2 · answered Feb 19 '16 at 11:57

try this.I think this will help to you.try this code.

<!DOCTYPE html>
<html>
<head>
 <title></title>
</head>
<style type="text/css">
 div.parent{
  width: auto;
  height: auto;
  border:1px solid black;
  padding: 2%;
  position:absolute;
 }

 div.childone{
  width: 300px;
  height: 400px;
  margin:10px;
  background-color: orange;
 }

 div.childtwo{
  width: 300px;
  height: 200px;
  margin: 10px;
  background-color: red;
 }


</style>
<body>

<script type="text/javascript">
  var one = "<div class='childone'></div>";
  var two =  "<div class='childtwo'></div>";

  documemnt.write
</script>

<div class="parent">
  <div class="childone"></div>
  <div class="childtwo"></div>
</div>
  
</div>


</body>
</html>

score 0 · Answer 3 · answered Feb 19 '16 at 12:39

Here is an example using CSS3 translate property.

NOTE: the child divs will "line-break" on small screens.

.parent {
  display: inline-block;
  margin-left: 50%;
  padding: 20px;
  background-color: lightblue;
  -moz-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}
.child1 {
  display: inline-block;
  width: 150px;
  height: 100px;
  background-color: lightgreen;
}
.child2 {
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: orange;
}

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

score -1 · Answer 4 · answered Feb 19 '16 at 10:42

-1

use all div's width in % so that it fits on any device widths. make you parent div width of 100% and child width accordingly.

answered Feb 19 '16 at 10:42

Vicky Lahangeer

19
9

score -1 · Answer 5 · answered Feb 19 '16 at 10:44

/*  SECTIONS  */
.section {
 clear: both;
 padding: 0px;
 margin: 0px;
}

/*  COLUMN SETUP  */
.col {
 display: block;
 float:left;
 margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }


/*  GROUPING  */
.group:before,
.group:after {
 content:"";
 display:table;
}
.group:after {
 clear:both;
}
.group {
    zoom:1; /* For IE 6/7 */
}

/*  GRID OF THREE  */
.span_3_of_3 {
 width: 100%;
}
.span_2_of_3 {
 width: 66.1%;
}
.span_1_of_3 {
 width: 32.2%;
}

/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
 .col { margin: 1% 0 1% 0%;}
 .span_3_of_3, .span_2_of_3, .span_1_of_3 { width: 100%; }
}

<div class="section group">
 <div class="col span_1_of_3">
 This is column 1
 </div>
 <div class="col span_1_of_3">
 This is column 2
 </div>
 <div class="col span_1_of_3">
 This is column 3
 </div>
</div>

Div as wide as divs inside of it

5 Answers5