What I need is put the content of a DIV, to overflow (I don't if this is the correct word) to left and top, and KEEP the DIV sizes always fixed. Here is an image I made:
The normal result, is the DIV become 70x76 (the size of its content), but i need to keep DIV's size FIXED.
Any suggestions?
If I understand your question correctly, this CSS should do the trick:
#myDiv {
width: 43px;
height: 43px;
position: relative;
overflow: hidden;
}
#myDiv img {
position: absolute;
bottom: 0;
right: 0;
width: 73px;
height: 70px;
}
You can see an example here: http://jsfiddle.net/sZ4AC/
or here: http://jsbin.com/arobuz/2/
Related
I am trying to add a fixed division to the left of the webpage that will keep the navbar information and on the right I am trying to add another division. It is currently not allowing me to put them side by side (the one I wanted to add to the right is overlapping with fixed). How can I align them side by side?
Here is my CSS:
.left_fixed {
position: fixed;
width: 16%;
top: 0px;
bottom: 0px;
left: 0px;
background-color: #041230;
z-index: 100;
min-width: 170px;
}
.right_side {
position: relative;
width: 100%;
height: 100vh;
}
since you set a width:16% for the fixed element you should set the rest 84% width:84% to the right element.
Next set a max-width to the right element since the left element has a min-width I have set this to max-width: calc(100% - 170px)
Align the right element to the right by adding float: right.
I have made the left element translucent so you can see that there is no overlap.
Read and run the snippet below to understand it in detail.
P.S : I have made the left element translucent so you can see that there is no overlap.
Hope it helps
.left_fixed {
position: fixed;
width: 16%;
top: 0px;
bottom: 0px;
left: 0px;
background-color: #0412303f;
z-index: 100;
min-width: 170px;
}
.right_side {
width: 84%;
background-color: green;
height: 100vh;
float: right;
max-width: calc(100% - 170px);
}
body {
margin: 0px;
}
<div class="left_fixed">
<h1>LEFT SIDE</h1>
</div>
<div class="right_side">
<h1>RIGHT SIDE</h1>
</div>
The reason that your styling fails is that the "Position: Relative" will not be relative to the "Position: fixed".
In order to accomplish the effect you are looking for I'd suggest you to use float:left on both elements instead.
You can wrap the two divs inside a parent div, and then add display flex to the parent div. This will make the two divs next to each other, and then you can add custom width to .left_fixed.
I have a div menu which has a fixed size (e.g. 100% of the height). The content could be larger. Then it would have to scroll.
div {
overflow-y: auto;
width: 10%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
There is also an :after element on the div which is positioned absolutely right outside the div.
div::after {
content: "";
position: absolute;
left: 10%;
top: 45%;
height: 10%;
width: 5%;
}
The problem is that once I add the overflow auto to the div the after element is hidden. How do I get a scrollbar AND have the after element outside the div?
Found some similar questions but none of the solutions seem to work for me.
I solved this for now by simply adding another div inside the original one
div.original div.inside {
overflow-y: auto;
position: relative;
width: 100%;
height: 100;
}
and remove the overflow from the original div. You need one more div, but this seems to be the easiest and cleanest solution.
I want an out put similar to this Image..!
following is what i've tried to do.JSfiddle
P.S: I cannot edit the structure of the content.
Since you can't edit the HTML, you can't use floating properly, which would be the perfect solution.
But then you can use absolute positioning:
div {
width: 500px;
min-height: 100px; /* image height */
position: relative;
text-align: justify;
}
img {
width:100px;
position: absolute;
top: 0;
right: 0;
}
p:first-child {
max-width: 400px; /* wrapper width - image width */
}
Demo
Given an absolutely positioned element with a certain size and overflow:auto and a child element that is also absolutely positioned, anchored to the bottom left corner of the parent element and exceeding it in size, like this:
#container {
position: absolute;
left: 0;
top: 0;
width: 100px;
height: 100px;
overflow: auto;
}
#content {
position: absolute;
bottom: 0;
left: 0;
width: 50%;
height: 200%;
}
Why does no vertical scrollbar appear on the parent element?
When I change the positioning of the child element to top instead of bottom, the scrollbar appears. It seems like the scrollbar is only visible if the content overflows on the bottom edge of the parent element. Why is this the case?
Here is the link to a JSFiddle that demonstrates the issue: http://jsfiddle.net/qGsd3/14/
I was hoping for a more interesting answer, but it seems to be: "Because the spec says so."
EDIT: I just realized that isn't the right section... But luckily I found the correct one so the answer stands.
http://www.w3.org/TR/2007/WD-css3-box-20070809/#abs-non-replaced-width
At the bottom there are the rules that dictate when height is calculated and how and it states only when there is overflow on the bottom does it extend the height. There is more reading there about how this affects overflow, so just poke around.
Absolute elements don't take up any space, that's why. Absolute positioning isn't needed for your content, change it to static, I can't understand what you are trying to accomplish there...
In my experience, nesting an absolute position inside another absolute position has given me nothing but headaches. Also, for heights, percentages can be hit or miss depending on the browser. Take a look here to see what I did on the 'bad' class to display the overflow.
#container {
position: relative;
width: 100px;
height: 100px;
overflow: auto;
background: green;
text-align: right;
top: 100px;
}
.left {
left: 100px;
}
.right {
left: 300px;
}
#content {
position: absolute;
width: 50%;
height: 100px;
background: red;
}
.good {
top: 0;
left: 0;
}
.bad {
bottom: -20px;
left: 0;
}
http://jsfiddle.net/qGsd3/39/
I'm just getting into HTML and CSS and I have a quick question. Is there any way to make a parent element grow in size to accommodate one of its children? I have the background set on <html>. Then inside the body I have a div which sets a different background color and isn't as wide/tall as the whole page. This leaves a two toned design. Then, I have a nested div containing all the content to be displayed. This all works fine, unless the page content is enough that a scroll bar is necessary. If that happens, both background colors are lost past the original bottom of the screen. This problem is extremely annoying and from what I've read there is no great way to handle it, but I wanted to see if anyone knew. I have the following properties set:
html {
background: [gradient code...]
height: auto;
min-height: 100%;
background-repeat: no-repeat;
background-size: 100%;
}
body {
height: auto;
width: 100%;
position: absolute;
bottom: 0;
top: 0;
margin: 0;
padding: 0;
border: 0;
}
div.background {
background-color: #D0D0D0;
text-align: center;
height: auto;
width: 70%;
position: absolute;
top: 150px;
bottom: 30px;
left: 15%;
margin: 0;
padding: 0;
border-radius: 7px;
}
div.container {
height: auto;
width: 70%;
position: absolute;
left: 15%;
bottom: 0;
top: 0;
}
Where div.background has the second background color and div.container has the content displayed on the page.
Thanks for your help.
How about not using position: absolute? Remove that (and the associated top, left, bottom...) and replace them with correct margins instead.
I believe if you specify size (width, height) auto on the parent (or just leave it without specifying size) it grows/shrinks to fit the children's size (it doesn't work recursively, so you may want to go up to the last parent in the tree). Avoiding absolute positioning (http://www.w3schools.com/Css/css_positioning.asp) could also do the trick, and float element or a different z-index could probably do the workaround too, but overgrowing the parent, I think...
If you get rid of the width and position absolute div.background and change position absolute to relative for div.container you should be good