Question 45321 in Html Question posted in
Some basic documentation can be found here.

How to position child div right below parent when the parent has no height specified? – Html

I want to position a div right below parent, so it will look like a menu opening below it.
Right now I tried to use right and top but it ends up covering the parent.

I could have used top with the height of the parent, if it had one (instead of top: 0 as in the example below). But is it possible to do it without given parent height?

.container {
  width: 350px;
  height: 200px;
}

.parent {
  -moz-appearance: textfield;
  -webkit-appearance: textfield;
  border: 1px solid darkgray;
  box-shadow: 1px 1px 1px 0 lightgray inset;
  font: -moz-field;
  margin-top: 5px;
  padding: 2px 3px;
  width: 120px;
  display: flex;
  align-items: center;
  position: relative;
  direction: rtl;
  float:right;
  background-color: red;
}

.child {
  position: absolute;
  background-color: blue;
  width: 150px;
  height: 200px;
  margin: 3px auto;
  box-sizing: border-box;
  overflow: hidden;
  right: 0;
  top: 0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<div class="container">
  <div class="parent">
    <i class="fa fa-calendar"></i>
    <div class="child">
    </div>
  </div>
</div>
Tags:

2

Answers


  1. 0 
    .container {
  width: 350px;
  height: 200px;
  display: flex;
  flex-direction: column;
}

.parent {
  -moz-appearance: textfield;
  -webkit-appearance: textfield;
  border: 1px solid darkgray;
  box-shadow: 1px 1px 1px 0 lightgray inset;
  font: -moz-field;
  margin-top: 5px;
  padding: 2px 3px;
  width: 120px;
  align-items: center;
  direction: rtl;
  float:right;
  background-color: red;
}

.child {
  background-color: blue;
  width: 150px;
  height: 200px;
  box-sizing: border-box;
}
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<div class="container">
  <div class="parent">
    <i class="fa fa-calendar"></i>
  </div>
  <div class="child">
  </div>
</div>

    You can restructure your HTML like this and just use display: flex on the.container.

    Did this answer your question?

    Login or Signup to reply.
  2. 0

    Just use top:100% for the child.

    .container {
  width: 350px;
  height: 200px;
}

.parent {
  -moz-appearance: textfield;
  -webkit-appearance: textfield;
  border: 1px solid darkgray;
  box-shadow: 1px 1px 1px 0 lightgray inset;
  font: -moz-field;
  margin-top: 5px;
  padding: 2px 3px;
  width: 120px;
  display: flex;
  align-items: center;
  position: relative;
  direction: rtl;
  float:right;
  background-color: red;
}

.child {
  position: absolute;
  background-color: blue;
  width: 150px;
  height: 200px;
  margin: 3px auto;
  box-sizing: border-box;
  overflow: hidden;
  right: 0;
  top: 100%; /* That's all */
}
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<div class="container">
  <div class="parent">
    <i class="fa fa-calendar"></i>
    <div class="child">
    </div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search