html - Make parent div same width as child, and ignore parent -

-

i have parent, child, , grandchildren divs. grandchildren need displayed in rows, not columns. i'm trying child have same width grandchildren, (the child's children,) @ same time, want parent retain height of grandchildren.

i tried making child position: absolute, problem is, parent doesn't retain child, , grandchildren's height.

how can make parent have same height descendants, while having different width. , have child have same width grandchildren?

jsfiddle

*,  *:before,  *:after {    margin: 0;    padding: 0;    box-sizing: border-box;  }  #wrapper {    background-color: lightblue;    width: 220px;  }  #innerwrapper {    display: flex;    background-color: blueviolet;  }  .item {    background-color: tomato;    width: 100px;    height: 100px;    border: 1px solid blue;    margin: 5px;    flex: 1 0 auto;  }  #other {    background-color: yellow;    width: 300px;    height: 250px;  }
<div id="wrapper">    <div id="innerwrapper">      <div class="item">item - 1</div>      <div class="item">item - 2</div>      <div class="item">item - 3</div>      <div class="item">item - 4</div>      <div class="item">item - 5</div>      <div class="item">item - 6</div>    </div>  </div>    <div id="other">i'm element</div>

update

op wanted:

  1. grandma @ 220px gave max-width:220px
  2. mom fitting kids shrink-wrap extending past grandma. gave position:relative escape grandma's flow, min-width: 635px total of kids width margins included, min-height:110px height of kid plus margins.

  3. kids display: inline-block, position: absolute. gave them left of interval of accumulative values of 105px using nth selector:

    div div div:nth-of-type(x) {     left:105px++ }

    see snippet clearer picture.

mom has semi-transparent background can see grandma in black.

#other given position:relative , top:110px move out of way.


i think understand after. in snippet, gave:

1. grandma display:table , table-layout:fixed 2. mom display:table-row 3. kids display:table-cell

i added dashed border, border-spacing, , semi-transparent background show presence of grandma , mom. additions optional. removed flexbox properties well.

snippet (revised)

*,  *:before,  *:after {    margin: 0;    padding: 0;    box-sizing: border-box;  }  #wrapper {    background-color: black;    max-width: 220px;    float: left;  }  #innerwrapper {    background-color: rgba(0, 0, 200, .5);    display: inline-block;    position: relative;    display: flex;    min-width: 635px;    min-height: 110px;  }  .item {    background-color: tomato;    width: 100px;    height: 100px;    border: 1px solid blue;    margin: 5px;    display: inline-block;    position: absolute;  }  div div div:nth-of-type(2) {    left: 105px;  }  div div div:nth-of-type(3) {    left: 210px;  }  div div div:nth-of-type(4) {    left: 315px;  }  div div div:nth-of-type(5) {    left: 420px;  }  div div div:nth-of-type(6) {    left: 525px;  }  #other {    background-color: yellow;    width: 300px;    height: 250px;    position: relative;    top: 110px;  }
<div id="wrapper">    <div id="innerwrapper">      <div class="item">item - 1</div>      <div class="item">item - 2</div>      <div class="item">item - 3</div>      <div class="item">item - 4</div>      <div class="item">item - 5</div>      <div class="item">item - 6</div>    </div>  </div>    <div id="other">i'm element</div>


Comments

Post a Comment

Popular posts from this blog

jsf - "PropertyNotWritableException: Illegal Syntax for Set Operation" error when setting value in bean -

-
this question has answer here: how send form input values , invoke method in jsf bean 1 answer i error when trying send values jsf page bean. i want set values fields in bean, create airplane instance , add database. error telling me use illegal syntax setter part of bean. why error? didnt find on site helped me problem. here jsf part: <h4>add plane</h4> <c:if test="#{not empty listairplanebb.error}"> <div class="alert alert-danger"> <span class="glyphicon glyphicon-remove"></span> <h:outputtext value="#{listairplanebb.error}" /> </div> </c:if> <h:form> <table class="table"> <thead> ...
Read more

arrays - Algorithm to find ideal starting spot in a circle -

-
so problem have been debating such: your given array of integers representing circle. then, have pick spot in circle start. place start, compare value @ array number of steps took there , if steps less or equal number, include in final set. find place start have elements in set. ex, a=[0, 1, 2] if start @ index=0, then: a[0]=0 < =0 0 included a[1]=1 < =1 1 included a[2]=2 < =2 2 included final set: {0,1,2} if start @ index=1, then: a[1]=1 > 0 1 not included a[2]=2 > 1 2 not included here loop around a[0]=0 > 2 0 included final set: {0} if start @ index=2, then: a[2]=2 > 0 2 not included, here loop around a[0]=0 < = 1 0 included a[1]=1 < = 2 1 included final set: {0,1} so in trivial case, starting position index=0 best position results in final set elements. brute force method of finding obvious, trying find more efficient method. attempts far have been examine trying find max intersect of viable starting ranges calculated each element in arr...
Read more

php - Autoloader issue not returning Class -

-
problem? bootloader (autoloader) not seem working properly, or i'm missing something. here simplified code. the code below returns class "skeleton" not exist. on index.php file. index.php <?php include 'bootloader.php'; use skeleton\html\loginheader; $tool = new skeleton/html/loginheader(); bootloader.php <?php function boot($classname) { $filename = ''; $namespace = ''; // sets include path "src" directory $includepath = dirname(__file__).directory_separator.'src'; if (false !== ($lastnspos = strripos($classname, '\\'))) { $namespace = substr($classname, 0, $lastnspos); $classname = substr($classname, $lastnspos + 1); $filename = str_replace('\\', directory_separator, $namespace) . directory_separator; } $filename .= str_replace('_', directory_separator, $classname) . '.php'...
Read more