CODEWITHSUNDEEP
css
coobit
coobit

Reputation: 257

Children over parent with dynamic spacing between them in pure CSS

My css skills are quite low right now and I need to make some hard thing for my website. Any help will be appreciated. Thanks.

In the picture "parent" div (with width equal to some constant value) might have any number (that is the crux of my problem) of children with some long words in them. 

.wrap{
   position: static;
}

.parent{
    position: absolute;
    width:100%;
}

.child{
    float: left;
    visibility: hidden;
}
<div class="wrap">
  <div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
</div>

The children must "float" above the parent and the spacing between children shoud be so as to not make loooooong words to overlay above eachover.

I have no Idea how to make it in pure css. Is this possible? enter image description here

P.S. I want to stress: the children must fly over parent just like in the picture, with some spacing between them. I know "relative absolute" positioning, but this is not enought to make children fly like in the picture.

Upvotes: 0

Views: 328

Answers (4)

user3277192
user3277192

Reputation:

I added a bit of background colours so you can see what's where. Essentially: I added a children div that simply contains the children and moved that to sit higher than the parent. Inside the "children", the "child"s are floated and have a bit of margin to keep them separated.

But a lot of this depends on assumptions and wishes you have ...

The min-height in there is just there to make sure they don't collapse to nothing, but as I said, a lot depends on what's actually in these in real life.

Position:relative gives the element "position" as well as makes nudging it possible. The "position" is what we're after: it means the children that have absolute position can position relative to it. The children div then uses position absolute to move its top upwards with top and a negative value (positive value would be down) To accommodate as many children as you can fit on a line: they're floated inside the children div. When will this break apart?

  • too many child divs to fit on a line
  • Unpredictable and uneven height of the child divs -> maybe a solution is to move the bottom of the children div up instead of its top, but again, it's all depending on what you want to happen in each of these cases.

.wrap{
   min-height: 5em;
}

.parent{
    position:relative;
    margin-top: 2em;
    width:100%;
    background-color: orange;
    min-height: 2em;
}

.child{
    float: left;
    background-color: yellow;
    min-height: 1em;
    margin-right: 1em;
}
.children {
   position:absolute;
   top: -1em;
}
<div class="wrap">
  <div class="parent">
    <div class="children">
      <div class="child">child 1</div>
      <div class="child">child 2</div>
      <div class="child">child 3</div>
    </div>
  </div>
</div>

Upvotes: 1

reda khaidar
reda khaidar

Reputation: 1

.wrap{
  margin-top:200px;
}


.parent{
  position: relative;
  width:300px;
  height:200px;
  background-color:blue;
  margin:0 auto;
  top:-50px;

}

.child{
  position: relative;
  width:100px;
  height:100px;
  background-color:red;
  margin:0 auto;
  display:inline-block;
  z-index:5;
  margin:20px
}
.containerchid{
  width:100%;
  text-align:center;
  z-index:5
}
<div class="wrap">

  <div class="containerchid">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
    <div class="parent"></div>
</div>

Upvotes: 0

Danny
Danny

Reputation: 1113

You can set the child elements to be positioned relative and then set their top offset to some negative value, this will pull them up above the parent. To create the spaces between each child you can set the left and right offsets of the first and last child to some value.

See demo below:

/*IGNORE STYLES FROM HERE.....*/

body {
  display: flex;
  height: 100vh;
}

.container {
  border: 5px solid navy;
  width: 500px;
  margin: auto;
}

.box {
  background: white;
  border: 5px solid navy;
  overflow: auto;
  padding: 40px;
  position: relative;
  top: -100px;
}

/*....UNITL HERE*/

.container {
  display: flex;
}

.box {
  overflow: auto;
  position: relative;
  top: -100px;
}
.box:first-child {
  left: -50px;
}
.box:last-child {
  right: -50px;
}
<div class="container">
  <div class="box">
    <h2 class="box__title">Child</h2>
    <p class="box__word">LooooooooooooooongWorrrrrrrrrrd</p>
  </div>
  <div class="box">
    <h2 class="box__title">Child</h2>
    <p class="box__word">LooooooooooooooongWorrrrrrrrrrd</p>
  </div>
  <div class="box">
    <h2 class="box__title">Child</h2>
    <p class="box__word">LooooooooooooooongWorrrrrrrrrrd</p>
  </div>
</div>

Upvotes: 1

reda khaidar
reda khaidar

Reputation: 1

Change the position of children to absolute and the parent to relative

.parent{position:relative}
.children{position:absolute}

Upvotes: 0

Related Questions