Positioning the div elements

Question

I am facing the problem to align the content div in a data div. The Data div was not fixed height. Because it was auto height when the content div increase.

But it was going to out of flow. How to solve it ?

.container
{
  position:relative;
  border:1px solid blue;
  margin:auto;
  width:200px;
}

.data
{
  position:relative;
  border:1px solid green;
  width:100px;
  top:10px;
  left:10px;
}

.hed
{
  position:absolute;
  border:1px solid orange;
  width:30px;
  height:10px;
  top:-5px;
  left:10px;
  border-radius:5px;
  background-color:orange;
  line-height:10px;
}

<div class="container">
  <div class="data"> This is absolute.</div>
  <div class="hed">xxx</div>
</div>

[link] (http://jsfiddle.net/sai070cm118/m08bL4cb/1/) – user3836476 Mar 06 '15 at 11:32 — user3836476, Mar 06 '15 at 11:32

score 0 · Answer 1 · answered Mar 06 '15 at 11:26

0

You can set

overflow:hidden;

to the "container" div

answered Mar 06 '15 at 11:26

Victor

893
1
10
25

It require to extend. – user3836476 Mar 06 '15 at 11:31
@user3836476: check my answer it will expand on addding more data – Sajad Karuthedath Mar 06 '15 at 11:41

sideroxylon · Accepted Answer · 2015-03-06T12:36:47.217

0

If you want to have the container expand as the data div expands, add <br style = "clear:both"> before the closing div tag.

FIDDLE

edited Mar 06 '15 at 12:36

answered Mar 06 '15 at 11:28

sideroxylon

4,338
1
22
40

I am confusing about the position property. could you please give any reference link to differentiate the relative and absolute. – user3836476 Mar 06 '15 at 11:44
[Position Relative vs Position Absolute?](http://stackoverflow.com/a/10426566/2851845) – Navid EMAD Mar 06 '15 at 12:20

Sajad Karuthedath · Answer 3 · 2015-03-06T11:38:47.620

0

change all css position to relative and use min-height then try

like this

.container {
    position:relative;
    border:1px solid blue;
    margin:auto;
    width:200px;
    min-height:10px; //added
}
.data {
    position:relative;
    border:1px solid green;
    width:100px;
    top:10px;
    left:10px;
}
.hed {
    position:relative;  //changed
    border:1px solid orange;
    width:30px;
    height:10px;
    top:-50px; //changed
    left:10px;
    border-radius:5px;
    background-color:orange;
    line-height:10px;
}

WORKING DEMO

edited Mar 06 '15 at 11:38

answered Mar 06 '15 at 11:33

Sajad Karuthedath

14,987
4
32
49

I am confusing about the position property. could you please give any reference link to when we use absolute and when we use relative. – user3836476 Mar 06 '15 at 11:45
@user3836476: did my answer give you the right answer ?? – Sajad Karuthedath Mar 06 '15 at 11:46
@user3836476: go through this https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/ and understand – Sajad Karuthedath Mar 06 '15 at 11:48
@user3836476 then please accept my answer by clicking the arrow to the left of my answer,thank you :) – Sajad Karuthedath Mar 06 '15 at 11:53

score 0 · Answer 4 · answered Mar 06 '15 at 11:40

Why are you using for div class="data":

top
left

You juste need to replace them by margin-top and margin-left.

.container
{
  position:relative;
  border:1px solid blue;
  margin:auto;
  width:200px;
}

.data
{
  position:relative;
  border:1px solid green;
  width:100px;
  margin-top:10px; // changed
  margin-left:10px; // changed
}

.hed
{
  position:absolute;
  border:1px solid orange;
  width:30px;
  height:10px;
  top:-5px;
  left:10px;
  border-radius:5px;
  background-color:orange;
  line-height:10px;
}

<div class="container">
  <div class="data"> This is absolute.</div>
  <div class="hed">xxx</div>
</div>

Positioning the div elements

4 Answers4