The problem is simple:
http://jsfiddle.net/boblauer/wfLGG/
In the left example, I have the whole thing scrolling, which works fine because I can set the scrolling div's height to 100%. In the right example, it doesn't work, because I don't know what my scrolling div's height should be, because it's sharing that space with another element. If I set it to 100%, it overflows from its container, causing the 2nd scrollbar that you see in the example.
I know I can use javascript to set the .scroll-container's height to (container height - height of the header), but is there a pure css solution to this problem? I hate having to use javascript for this, especially because when the window resizes, I have to recalculate the size of the scrolling div.
Edit: Sorry, I wasn't very clear. What I want is for the header to remain static at the top, while the list itself is scrollable.
I think this is maybe helpful
.scroll-container {
overflow: auto;
padding-top:20px;
}
#ex2 span{
position:absolute;
background:white;
}
jsFiddle
Set overflow: y-scroll; on #ex2 and it will behave as #ex1.
#ex1, #ex2 {
float: left;
height: 100%;
width: 45%;
border: 1px solid black;
overflow: auto;
}
#ex2 { overflow: y-scroll; }
Demo
Related
I am trying to make some responsive cards. I have the cards completed and spaced out properly. On the front of the cards I want an image on the top of the cards and a title in the middle. The title is fine and the image is fine except for the right side of the image.
Here is the CSS code for the image (image is in an img tag in HTML page with a class of "image"):
div .image {
padding: 5%;
height: 45%;
width: 100%;
}
The right side for some reason is ignoring the padding and sticking out of the card parent div. Any ideas why?
did you already set div's width?
also as far i know is no need to set image's height if you already set it's width to 100%
anyway here some example
div { width: 200px; height: 150px; padding: 6px; }
div img { width: 100%; }
You set the width to be 100% and padding 5%. Make sure you have:
box-sizing: border-box;
for the parent.
Also without the full example of code, hard to answer. Can use overflow: hidden; on the parent to hide that part sticking out.
I want to make a div resizable with resize css property:
#foo{
overflow: hidden;
resize: both;
}
I can freely resize it with firefox.
with chrome/safari I can't resize it smaller than initial size.
their is a way to allow resize smaller with webkit? (min-width / min-height don't works)
see the live exemple from MDN (with 2 nested divs)
https://developer.mozilla.org/samples/cssref/resize.html
Better solution is to use :active pseudo class e.g:
div:active {
height: 0;
width: 0;
}
Example: http://jsfiddle.net/kronenbear/v4Lq5o09/1/
There is a small workaround that I found here, but it does work.
On hover, change the height and width to 1px
#foo:hover{
width: 1px;
height: 1px;
}
It sounds like this will cause a slight "flash" as the width and height are dramatically changing, but ... it is a hack.
I've been trying for hours but can't make it to work better than the hack, if I could just trigger a userresize I would be happy setting chrome's width to min-width then trigger resize to put it where I want, since it seems that you can move it back to original position after moving. But I don't find how to.
Using that live example as a reference, I was able to set the initial size to be equal to the width and height of the div, and the min-height and min-width to be the minimum dimensions allowable in Chrome.
#foo {
resize: both;
overflow: scroll;
width: 300px;
height: 300px;
min-width: 50px;
min-height: 70px;
}
div {
background-color: #acacac;
border: 1px solid #000;
}
<div id="foo"></div>
.mainCoverWrapper {
position: relative;
min-width:312px;
background:red
}
I'm trying to center a div with min-width of 312px and make it expand according to its dynamic content while keeping it centered.
Right now the min-with doesn't work at all because it needs a float. I can't use a float because I need the div centered on the page.
In other words, div starts out with margin auto with a width of 312px and expands with its added content while being centered. Is this possible?
Any help would be greatly appreciated.
http://jsfiddle.net/FVmvA/
Here's a working example of the parent to follow the width of the child, and the child will expand according to the text given in it.
.myCoverWrapper {
border: 1px solid Peru;
margin:auto;
min-width: 200px;
max-width: 100%;
display: inline-block;
background: red;
}
.test {
height: 100px;
margin: 10px;
background: cyan;
}
This makes the parent div follow the width of the kid.
This however, will disallow you to "center" it. There's no way you can have both. This is because you cant center an image without knowing the width of the element.
The solution is to use jQuery, to add CSS in when necessary.
Here's an example. There's some bugs, but well, you have the general idea.
If you want the width to be fluid, your best bet is to set display: inline-block; on the to-be-centered element, and text-align: center; to the parent element.
See: CSS center display inline block?
I have an image with float:left, and I’d like it to overflow its parent, but cut off the overflow. Here’s what it looks like without any overflow rules:
Here’s what I want:
Here’s a fiddle: http://jsfiddle.net/ZA5Lm/
For some reason, it was decided that overflow:hidden without an explicit height results in the element growing.
Can I somehow achieve the effect I’m after without setting an explicit height? An explicit height doesn’t work because I want this div to size automatically based on content length and browser width.
In my opinion using overflow: hidden without setting dimensions doesn't make sense. If you don't want to specify the height of the container and if your images have a fixed width you could use this solution: http://jsfiddle.net/ZA5Lm/11/
The image is positioned with absolute, taking it out of the text-flow. However - and I'm aware that this may be ugly - you need to specify a padding-left to move the text away from the image.
It's a bit tricky (I use relative + absolute positioning and a specific padding to position text) but it does the effect you asked without changing markup or setting height:
body {
padding: 10px;
}
img {
float: left;
position: absolute;
left : 10px;
}
div {
border: 1px solid black;
padding: 10px 10px 10px 280px;
position : relative;
overflow: hidden;
}
I just inserted style (even if float:left would be no longer necessary)
I seen a post over at CSS-Tricks and it talked about this. Go check it out at -
http://css-tricks.com/minimum-paragraph-widths/
It might be useful :) Good luck
Also just looked at your code and I added float: right to your div so it looks like this -
div {
border: 1px solid black;
padding: 10px;
float: right
/*overflow: hidden;*/
}
Not sure if that's what you want?
I'm trying to build a quick overview that shows the upcoming calendar week. I want it arranged horizontally so it can turn out to be quite wide if we show a full calendar week.
I've got it set up right now with an inner div with a fixed width (so that the floated "day" divs don't return below) and an outer div that's set to width: 100%. I'd LIKE for the outer div to scroll horizontally if the page is resized so that the inner div no longer fits in it, but instead the outer div is fixed larger at the width of the inner div and the page itself scrolls.
Gah I'm not good at explaining these things... Here's a bit of code that might clear it up..
The CSS:
.cal_scroller {
padding: 0;
overflow: auto;
width: 100%;
}
.cal_container {
width: 935px;
}
.day {
border: 1px solid #999;
width: 175px;
height: 200px;
margin: 10px;
float: left;
}
and the (simplified) structure:
<div class="cal_scroller">
<div class="cal_container">
<div class="day">Monday</div>
<div class="day">Tuesday</div>
<div class="day">Wednesday</div>
<div class="day">Thursday</div>
<div class="day">Friday</div>
</div>
</div>
So to try again - I'd like the cal_scroller div always be the page width, but if the browser is resized so that the cal_container doesn't fit anymore I want it to scroll WITHIN the container. I can make it all work if I set a fixed width on cal_scroller but that's obviously not the behavior I'm going for. I'd rather not use any javascript cheats to adjust the width of the div if I don't have to.
Your cal_scroller class is 100% + 20px (padding) wide. Use a margin on cal_container instead, like so:
.cal_scroller {
padding: 10px 0;
overflow: auto;
width: 100%;
}
.cal_container {
margin: 0 10px;
width: 935px;
}
See here for a description of how the box model works (in short, the everything is outside the width/height of an element).
Also, block elements (like <div>s) are 100% width by default, making your 100% width declaration redundant.
One problem I see is your width: 100% rule. div.cal_scroller is already a block-level element, so it'll default to filling the entire page width. (Not to mention that padding is added on top of width, so you end up with that div being bigger than the page.)
Just get rid of that width rule, and you should be golden. (I just tried myself, and it worked like a charm.)
I didn't read your question very carefully, but when you have width: 100% and padding, that's generally not what you want.
100% + 20px > 100% - that might be the problem.
I struggled with this a lot but the simplest solution I found was adding:
.cal_container { white-space: nowrap; }
This way you don't have to give it a width at al. It just makes sure everything stays in one line.