I cant seem to be able to do this with relative and absolute positioning like I have with other things, but what I want to achieve is to have a div, with another div within it, however this inner div must appear outside the outer div on screen.
<div class="OuterDiv">
<span>Other things</span>
<div class="InnerDiv">
<span>Inner content</span>
</div>
</div>
EDIT : OK, so this I think is more complex than people are thinking. Using position relative and absolute I have already gotten other things on my page to work. What I have when I try this problem using positioning is
And then disappears completely when moved far enough outside of the outer div
More of my code,
<div class="Item Menu Active" style="display: inline-block;">
<div class="ItemList" style="left: -315.859375px;">
<div class="Item" style="display: inline-block;">
<span>N</span>
<div class="ItemList">
</div>
</div>
<div class="Item" style="display: inline-block;">
<span>O</span>
<div class="ItemList">
</div>
</div>
<div class="Item" style="display: inline-block;">
<span>P</span>
<div class="ItemList">
<div class="Item ClickItem">
<span>p1</span>
<div class="ItemList">
</div>
</div>
</div>
</div>
<div class="Item" style="display: inline-block;">
<span>Q</span>
<div class="ItemList">
</div>
</div>
</div>
</div>
.Item {
display: inline-block;
position: relative;
white-space: nowrap;
padding: 5px 10px 5px 10px;
cursor: pointer;
}
.ItemList {
display: none;
z-index: 1;
min-width: 75px;
position: absolute;
top: 100%;
left: 0px;
overflow-y: scroll;
overflow-x: hidden;
white-space: initial;
padding: 5px 5px 5px 5px;
background-color: white;
border: 1px solid black;
cursor: default;
}
EDIT 2 : Yes overflow:visible was my problem, issue is that overwrites the overflow-x and overflow-y that I am already using on the .ItemList for vertical scrolling on smaller screens. Any further suggestions?
You could position absolutely the inner div with the respect to the body as follows:
* { box-sizing: border-box; }
html {
height: 100% }
body {
position: relative;
padding: 10px;
min-height: 100%;
margin: 0;
border: 10px solid red; }
.OuterDiv {
width: 50%;
border: 10px solid green; }
.InnerDiv {
position: absolute;
width: 20%;
right: 10px;
border: 10px solid blue; }
<div class="OuterDiv">
<span>Other things</span>
<div class="InnerDiv">
<span>Inner content</span>
</div>
</div>
Note that in this case you must ensure that the body is high enough to contain the absolutely positioned inner div.
I feel like you shouldn't be structuring your HTML this way if this is the desired result: why not just have the inner div placed outside the parent's hierarchy? Either way, something like this should work:
<body>
<div id="outer">
<div id="inner">
</div>
</div>
</body>
And CSS
#body
{
position:relative;
}
#inner
{
position:absolute;
right:0;
top:30px;
}
You need to use position rule to set your elements to display within each-other.
#Outer {
position: relative;
width: 300px;
height: 180px;
border: 3px solid red;
}
#Inner {
position: absolute;
width: 50%;
height: 50%;
border: 3px solid blue;
margin: 5%;
}
<div id="Outer">
<div id="Inner"></div>
</div>
Try this out :
.OuterDiv{ position:relative; width:80px; height:80px; border:5px solid green }
.InnerDiv{ position:absolute; top:0; right:-100px; width:80px; height:80px; border:5px solid red }
<div class="OuterDiv">
<span>Other things</span>
<div class="InnerDiv">
<span>Inner content</span>
</div>
</div>
Edit:
It disappears because of overflow-x: hidden;
Previous:
http://jsfiddle.net/1k1rfrn3/
You should avoid hacking your DOM with CSS.
.OuterDiv{
border-style: solid;
border-width: 5px;
color: blue;
position:absolute;
overflow: visible;
}
.InnerDiv{
border-style: solid;
border-width: 5px;
color:red;
position:absolute;
left:500px;
}
Related
I have a container, and contents that I want to be horizontally scrollable. It's dynamically generated, so I can't know exactly how wide the contents will be.
So the problem is that the styling (background, border, etc) that I apply to the content only effects the area initially visible. When you scroll rightward, any additional content that comes into view is missing styling. This is because the elements they're applied to have 100% the width of the container, but the contents they contain extend past their limits.
This is an example of what I mean: fiddle
.wrapper {
position: relative;
width: 100px;
height: 100px;
border: 1px black solid;
overflow-x: scroll;
}
.slider {
position: relative;
height: 100%;
background: white;
}
.line {
height: 20px;
white-space: nowrap;
border-bottom: 1px solid black;
}
.line-item {
position: relative;
display: inline-block;
width: 30px;
}
<div class="wrapper">
<div class="slider">
<div class="line">
<div class="line-item">item</div>
<div class="line-item">item</div>
<div class="line-item">item</div>
<div class="line-item">item</div>
<div class="line-item">item</div>
</div>
</div>
</div>
In this example, the contents of .line extend past .line, so of course the border and background aren't applied. How can I get the border and background to extend to the entire contents of .line?
In other words, how can I get .line to take more than 100% width?
Make the slider display as an inline block
.wrapper {
position:relative;
width:100px;
height:100px;
border: 1px black solid;
overflow-x:scroll;
}
.slider {
display: inline-block; /* added */
position:relative;
height:100%;
background:white;
}
.line {
height:20px;
white-space:nowrap;
border-bottom:1px solid black;
}
.line-item {
position:relative;
display:inline-block;
width:30px;
}
<div class="wrapper">
<div class="slider">
<div class="line">
<div class="line-item">item</div>
<div class="line-item">item</div>
<div class="line-item">item</div>
<div class="line-item">item</div>
<div class="line-item">item</div>
</div>
</div>
</div>
EDITED:
I have the following HTML code:
<div class="div-table">
<div class="div-table-row">
<div class="div-table-first-col">
<div>11:00</div>
</div>
<div class="div-table-col">
<div style="height: 11"></div>
<div class="appuntamentoContainer">
<div class="appuntamento" style="height: 25px">11:12 - 12:35</div> //--> need to stretch to bottom
</div>
</div>
<div class="div-table-col">
<div style="height: 0"></div>
<div class="appuntamento">11:00 - 11:45</div>
<div class="appuntamento">11:00 - 12:00</div>
<div class="appuntamento">11:45 - 12:30</div>
</div>
<div class="div-table-col">
<div style="height: "></div>
</div>
<div class="div-table-col">
<div style="height: "></div>
</div>
</div>
</div>
and CSS:
.div-table div.appuntamento {
background-color: #f3f2de;
padding: 3px 5px;
border: 1px solid #d7dde6;
border-radius: 5px;
}
.div-table {
display:table;
width:auto;
}
.div-table-row{
display:table-row;
width:auto;
clear:both;
height: 45px;
}
.div-table-col {
float:left;/*fix for buggy browsers*/
display:table-column;
width:154px;
}
.div-table-row .div-table-col{
border-left: 1px solid #d7dde6;
border-right: 1px solid #d7dde6;
border-top: 1px solid #d7dde6;
min-height: 44px;
}
.div-table-first-col {
float:left;/*fix for buggy browsers*/
display:table-column;
text-align: right;
width: 45px;
}
.div-table-first-col div{
padding: 3px 5px;
}
Here the fiddler
Notice the vertical borders. On the left side how it actually is, on the right side how it should. How do i stretch the div to the bottom?
Use the flexbox layout model. Just add display: flex; to .div-table-row, and remove any float or display property.
Here's the JSFiddle.
add height: 100% on parents table and td.
table {
height: 100%;
}
td {
height: 100%;
}
for reference look here: Make div stretch to fit td height
Check this out for some dynamic behaviour:
jQuery
var a=$(".second").outerHeight();
$(".first").height(a);
$(".third").height(a);
https://jsfiddle.net/1cejh0dL/6/
I've got the following setup http://jsfiddle.net/47x60k4w/529/.
HTML
<div class="header">
header
</div>
<div class="inner_block">
<div class="column">
<img src="xxx" />
</div>
<div class="column">
<img src="xxx" />
</div>
<div class="column">
<img src="xxx" />
</div>
</div>
<div class="footer">
footer
</div>
The inner_block should overlap the header class and the footer should be placed right behind the inner_block.
In my solution I just don't get the footer behind the inner_block without doing not responsible stuff like calling a margin-top with x.xem on it. I just found some links with z-index stuff which didn't worked for me because the inner_block lost his passed height and width from the nested block.
The result should look like this beautiful mockup.
Do you have any ideas?
Thanks in advance.
So I made the following changes to your code:
Remove the position: absolute for the inner-block.
As you are floating the contents of the inner-block you have clear the floats so that the parent container will not lose height.
.inner_block:after {
content: '';
display: block;
clear: both;
}
Whenever using floats, remember to clear it.
Added position: relative to the inner_block to position it over the header and footer.
Added display: block to the img so that you can remove the small space below it characteristic on inline elements (the default display).
Also tinkered a bit with the margins and widths to achieve the layout.
.header {
position: relative;
background-color: black;
width: 100%;
height: 50px;
}
.footer {
clear: both;
background-color: red;
width: 100%;
height: 50px;
}
.inner_block {
position: relative;
/*width: 100%;*/
border: solid 1px black;
padding: 5px;
margin-left: 2.5%;
margin-top: -2.5%;
margin-right: 2.5%;
margin-bottom: 2.5%;
background-color: white;
}
.inner_block:after {
content: '';
display: block;
clear: both;
}
.column {
max-width: 30%;
float: left;
margin-right: 2.5%;
}
.column:first-child{
margin-left: 2.5%;
}
.column:last-child{
margin-left: 0;
}
.column img {
max-width: 100%;
height: auto;
display: block;
}
<div class="header">
</div>
<div class="inner_block">
<div class="column">
<img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088605.jpg" />
</div>
<div class="column">
<img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088607.jpg" />
</div>
<div class="column">
<img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088606.jpg" />
</div>
</div>
<div class="footer">
test
</div>
Hope this gives you a head-start. Check it out and let me know your feedback on this. Thanks!
Alternate Solution:
So here is a solution using a flexbox which is easier to set up:
First remove the floating container and the clearfix.
Now Wrap the inner_block with another div
.inner_block_wrapper {
margin: -2.5% 2.5% 2.5% 2.5%;
background-color: white;
position: relative;
}
.inner_block {
border: solid 1px black;
background-color: white;
padding: 5px;
display: flex;
justify-content: center;
}
.column {
margin: 5px;
}
Using display: flex allows the images to take the available space along the row and justify-content: center aligns it along the center. Check this out!
.header {
position: relative;
background-color: black;
width: 100%;
height: 50px;
}
.footer {
clear: both;
background-color: red;
width: 100%;
height: 50px;
}
.inner_block_wrapper {
margin: -2.5% 2.5% 2.5% 2.5%;
background-color: white;
position: relative;
}
.inner_block {
border: solid 1px black;
background-color: white;
padding: 5px;
display: flex;
justify-content: center;
}
.column {
margin: 5px;
}
.column img {
max-width: 100%;
height: auto;
display: block;
}
<div class="header">
</div>
<div class="inner_block_wrapper">
<div class=" inner_block ">
<div class="column ">
<img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088605.jpg " />
</div>
<div class="column ">
<img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088607.jpg " />
</div>
<div class="column ">
<img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088606.jpg " />
</div>
</div>
</div>
<div class="footer ">
test
</div>
You can even try something as below, your codes were fine just set your .footer margin-top equal to the height of .header and .inner_block using css calc() function.
.header{
position:relative;
background-color:black;
width:100%;
height:50px;
}
.footer{
background-color:red;
width:100%;
height:50px;
margin-top:calc(100% - 82%);
}
.inner_block{
position: absolute;
width:90%;
border:solid 1px black;
padding: 5px;
background-color:white;
margin:-2.5% calc(100% - 97%);
}
.column {
width:30%;
float:left;
margin:0 1.6%;
}
.column img {
max-width:100%;
height:auto;
}
<div class="header">
</div>
<div class="inner_block">
<div class="column">
<img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088605.jpg" />
</div>
<div class="column">
<img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088607.jpg" />
</div>
<div class="column">
<img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088606.jpg" />
</div>
</div>
<div class="footer">
test
</div>
is this what you were looking for ?
.header{
position:relative;
background-color:black;
width:100%;
height:50px;
}
.footer{
clear:both;
background-color:red;
width:100%;
height:50px;
}
.inner_block{
position: absolute;
width:100%;
border:solid 1px black;
padding: 5px;
margin-left: 2.5%;
margin-top:-2.5%;
background-color:white;
}
http://jsfiddle.net/8y4e8L08/
.header {
height: 200px;
width:800px;
background-color:#000;
margin:20px;
}
.header {
margin-bottom: -25px;
}
.inner_block {
width: 35%;
height: 150px;
margin: auto 200px;
background-color:#FFF;
border:1px solid #000;
margin-top: -45px;
}
.column{
max-width:20%;
float:left;
border: 2px soid #999;
margin:25px;
}
.column img{
max-width:100%;
height:auto;
}
.footer {
height: 100px;
margin-top: -25px;
margin:20px;
background-color:#F00;
width:800px;
}
.content {
position: relative;
z-index: 1;
}
<div class="header"></div>
<div class="inner_block">
<div class="column">
<img src="download.jpg"/>
</div>
<div class="column">
<img src="download.jpg"/>
</div>
<div class="column">
<img src="download.jpg"/>
</div>
</div>
<div class="footer">
</div>
Well just using the z-index won't always work. You also need to specify the 'position' property as well so as to define the z-index wrt some position of the frame.
Z-index is a property which defines the 'depth' or 'height' of an element. If your <header> has z-index of '100' and; <div> element defined inside the header, usually it would be shown above it but once you define the z-index:50; since 50<100, <div> element would be hidden behind it.
Example of z-index
1) http://www.w3schools.com/cssref/tryit.asp?filename=trycss_zindex
2) https://css-tricks.com/almanac/properties/z/z-index/
Hope it helps.
body {
position: relative;
}
.test {
position: absolute;
top: 10px;
left: 10px;
height: 200px;
border: 1px solid #ccc;
overflow-y: auto;
overflow-x: hidden;
white-space: nowrap;
}
.wrap {
display: inline-block;
}
.item {
padding: 10px;
border-bottom: 1px solid #ccc;
}
.item:last-child {
border-bottom: none;
}
<div class="test">
<div class="wrap">
<div class="item">Some</div>
<div class="item">Larger amount</div>
<div class="item">of text</div>
<div class="item">should go in</div>
<div class="item">these items to prove</div>
<div class="item">that this thing is gonna grow to whatever</div>
<div class="item">to whatever</div>
<div class="item">it needs to</div>
</div>
</div>
The problem is that when the vertical scroll bar appears the absolutely positioned div doesn't grow accordingly and some content on the longest item is cut off. If I take 'overflow-x: hidden' off a horizontal scroll bar appears and that's not what I want either.
When 'white-space: nowrap' is removed everything looks good but I want each item to be one line. Is there any way to have the absolutely positioned div grow according to the width of a 'white-space: nowrap' element?
I think this is what you want
body {
position: relative;
}
.test {
position: absolute;
top: 10px;
left: 10px;
height: 200px;
border: 1px solid #ccc;
overflow-y: auto;
overflow-x: hidden;
white-space: nowrap;
}
.wrap {
display: inline-block;
}
.item {
padding: 10px;
border-bottom: 1px solid #ccc;
padding-right:28px;
}
.item:last-child {
border-bottom: none;
}
<div class="test">
<div class="wrap">
<div class="item">Some</div>
<div class="item">Larger amount</div>
<div class="item">of text</div>
<div class="item">should go in</div>
<div class="item">these items to prove</div>
<div class="item">that this thing is gonna grow to whatever</div>
<div class="item">to whatever</div>
<div class="item">it needs to</div>
</div>
</div>
I added padding-right:28px; to accommodate for the width of the existing padding and the width of the scrollbar.
I have the following html markup:
.container {
border: 1px solid green;
}
.right {
border: 1px solid #000;
float: right;
width: 40px;
}
.left {
border: 1px solid red;
overflow: hidden;
}
<div class="container">
<div class="right">Right</div>
<div class="left-container">
<div class="left">
Left fluid
<br/>
multiple rows
</div>
</div>
</div>
As you can see right block looks ugly. How could I make right element fluid height 100%?
Add the rule height:100% the right div, and remove float:right. I changed it to position:absolute, so that you didn't need the container's height.
.container {
border: 1px solid green;
position: relative;
width: 100%;
}
.right {
border: 1px solid #000;
width: 40px;
height: 100%;
position: absolute;
right: 0;
}
.left {
display: block;
border: 1px solid red;
overflow: hidden;
margin-right:40px;
}
<br><br><div class="container">
<div class="right">Right</div>
<div class="left-container">
<div class="left">
Left fluid
multiple rows a really long sentence a really long sentence a really long sentence a really long sentence a really long sentence a really long sentence.
</div>
</div>
</div>
If your application will run in a modern browser, then using flexbox is a good way to go: http://jsfiddle.net/2hn9zgog/.
HTML:
<div class="container">
<div class="right">Right</div>
<div class="left">
Left fluid
<br/>multiple rows
</div>
</div>
CSS:
.container {
display: flex;
width: 100%;
outline: 1px dotted gray;
}
.right {
order: 2;
flex: 0 0 auto;
border: 1px solid green;
}
.left {
flex: 1 0 auto;
border: 1px solid red;
}
add clear: both; after floated element.
<div class="right"></div>
<div style="clear: both"></div>
Add
html, body{
height: 100%;
min-height: 100%;
}
.your-container{
height: 100%;
}