How to make a higher div inside a div

Question

i have two divs , one is higher than other , what i want is to put the first one that's higher inside the other .

#bottom {
    overflow-x:scroll ;
    overflow-y: hidden;
    white-space: nowrap;    
    position:fixed;
    height:45px;
    width:864px;
    background-color:yellow;
    bottom:0px;
    margin-left:144px;
}
.box {
display: inline-block;
cursor: pointer ;
vertical-align: middle;
width:200px; height:525px; 
background:blue;
left:144px; 
margin-right: 16px
}

Simon L · Answer 1 · 2014-04-19T18:55:57.893

0

From what I understand, you want to put one div inside another? You do that in your markup, not the css.

Can you please post your HTML as well, and your question might be a bit clearer.

Edit: http://jsfiddle.net/gF8ch/1/ Jsfiddle with div inside div.

edited Apr 19 '14 at 18:55

answered Apr 19 '14 at 15:10

Simon L

36
3

'
' this is the html , – user3546035 Apr 19 '14 at 15:21
Just switch them around then if you want bottom inside box?

– Simon L Apr 19 '14 at 15:56

score 0 · Answer 2 · answered Apr 19 '14 at 15:12

0

You can't do it only with CSS and HTML You can use jQuery:

$('#whereToPut').appendTo('#whatToPut');

answered Apr 19 '14 at 15:12

nicael

18,550
13
57
90

score 0 · Answer 3 · edited May 23 '17 at 11:49

Try this...You want to set the position of the divs..

.box {
position: absolute;
display: inline-block;
cursor: pointer ;
vertical-align: middle;
width:200px; height:525px; 
background:blue;
left:144px; 
margin-right: 16px
}

#bottom {
    position: relative;
    overflow-x:scroll ;
    overflow-y: hidden;
    white-space: nowrap;    
    position:fixed;
    height:45px;
    width:864px;
    background-color:yellow;
    bottom:0px;
    margin-left:144px;
}

You want to make the higher Position:absolute and the second div Position:relative and after that you can place the second div inside the higher div..

You can refer the following links for clarifications..

Positioning two divs..

Positioning html controls..

Please feel free to ask for clarifications and mark as answer if it satisfies,Regards... — Jameem, Apr 19 '14 at 15:32

score 0 · Answer 4 · answered Apr 27 '14 at 11:48

Try this (My Understanding is that you want change the child to parent and parent to child)

var bottom = document.getElementById("bottom");
var box = document.getElementById("box");

bottom.parentNode.appendChild(box); // appending box to the bottom's parent
bottom.innerHTML = "";              // clearing bottom's children
box.appendChild(bottom);            // appending bottom to box

score 0 · Answer 5 · answered Apr 27 '14 at 12:15

0

Try to add this in the div's style that you want to be the top :

z-index:10000;

If not enough change 10000 to something you want.

answered Apr 27 '14 at 12:15

Jamie

1,096
2
19
38

How to make a higher div inside a div

5 Answers5