Having a vertical background for the menu, the content of which is leaving the container
I want to know the best way to get below image in CSS + HTML.
I find it difficult to explain in words what I want, so I think an image would make it clearer:
While the second and third parts are done. I am curious to know the best way to achieve the first (blue menu). If I split my page into three parts (depending on the menu), in the case of blue, my divs should float out of the horizontal width of the menu, but within the vertical.
Wise thoughts?
source to share
You can see what I used position:relative
for the parent and the position:absolute
child to get it out of that element li
.
ul {
list-style:none;
width:906px;
height:600px;
}
li {
float:left;
display:inline-block;
border:1px solid #ccc;
width:300px;
height:600px;
text-align:center;
position:relative;
}
.selected {
background:yellow;
}
.div {
position:absolute;
left:-150px;
width:600px;
height:80px;
border:1px solid #000;
background:#fff;
z-index:2;
}
#div-1 {
top:30px;
}
#div-2 {
top:140px;
}
#div-3 {
top:250px;
}
source to share
You can do it by position: absolute.
.blueDiv{
position:relative;
}
.innerDiv{
position:absolute;
top: (your choice);
left: 50%;
margin-left: -(innerDivSize / 2);
}
If you don't have the width of the elements inside ... you can try pushing them left and right:
.innerDiv{
position:absolute;
top: (your choice);
left: 0;
right: 0;
}
But this will only work if the parent is not in the leftmost or rightmost corner of the page.
source to share