First of all, I am searching for a pure CSS solution. I can do it really easily with JavaScript, so don't bother giving me hint on how to do it in JS.
I have a web page with 3 container. 2 of them are fixed, the other one is static.
I want to give the static container a padding top and bottom equal to the fixed container.
The first fixed element have a fixed height, so that's not a problem, i give a padding equal to the height :
#header{
height : 100px;
position : fixed;
}
#content{
padding-top : 100px;
}
But the second fixed element is dynamic since we are using a CMS. Some element can be added by the client and we want the layout to adjust automatically.
You can easily see what i'm trying to do in this Fiddle, just uncomment the JS to see the desired Result.
P.S.: I support iE8 and older.
P.P.S.: I am totally aware that it may be impossible w/o JS. If so, just tell me in comment.
Since #header and #footer are fixed positioned, they are taken out of the document flow and have no relationship to #content anymore.
Therefor you have to options (imho).
1) give the footer a fixed height, so you can do the padding trick, same as with your header.
2) use Javascript, since there is no pure CSS solution (except for 1. point).
Related
What is major differences in using these css rules
div{width:100px; overflow:hidden;}
And
div{max-width:100px; overflow:hidden!important;}
Is there going to be any cross-compatibility Issues.
max-width is great for stating "don't go any bigger than this, but it's OK if it's smaller".
This might be great if you were doing say a speech bubble that could be dynamic in size (depending on content) and you wanted the div surrounding speech bubble to vary.
width on the other hand says "the must be 100px", which means even if the content within the div is smaller, the surrounding div will still be 100px.
Example:
http://cdn.gottabemobile.com/wp-content/uploads/2013/10/photo1.png
max-width: 100px is not different from width: 100px if you do not have width specified. And the !important flag only prevents from overriding the property, so it depends on the context if that makes a difference.
I want to set the left postition of n-th div to (n-1)*250px, for e.g:
1st child: left = 0px
2nd child: left = 250px
...
is it possible to do so in css? I am using Javascript to set this. Thanks.
The CSS3 calc() method comes to mind, but it doesn't support using the index (n) as an operand, so that will not work.
Recommended solution: You could potentially design your layout such that the widths of each of the elements is 250px. Give each of the elements display: inline-block or float: left and they'll line up as you intend. If the width of the content of the elements needs to be larger than 250px, ensure overflow: visible (default value) is set on the elements and allow the content to overflow. Without more information, this should achieve the effect you are intending.
However, if you need to use a more direct method of positioning, you should stick with JavaScript to set the position of these elements. Likely, you'll want to take into account screen width, element width, and more, and CSS will leave you unable to do so.
Take a look at this JSFiddle for inspiration. If you post a sketch of what you're looking to achieve, I can help you further.
You can use:
div:nth-of-type(an+b)
// or
div:nth-child(an+b)
to address your divs.
div{
position:absolute;
}
div:nth-child(2){
left: 250px;
}
div:nth-child(3){
left: 500px;
}
without preprocessor you need to write every rule by hand because there is no possibility for a dynamic way when setting the left property.
Another possiblity (depending on what you really want to do) would be to introduce nesting and set padding-left:250px. But that only works if you can alter your markup accordingly.
Javascript probably is the easiest way here.
Have a look at this fiddle: http://jsfiddle.net/h4VS7/
How do I make the yellow element align (horz) with the grey background no matter how the window is resized? I refuse to believe it can't be done with css. Yes, js hacks and Scroll Follow plugin works but lags.
Please, anyone?
Edit:
Found a solution. If the container margins are expressed as percentages the content part can be expressed as the remainder percentage. See here: http://jsfiddle.net/h4VS7/1/
Though not sure why it doesn't align perfectly. It should I think. Could be jsfiddle margin/padding related.
It's not particularly difficult if you don't mind adding an extra element to wrap .top:
http://jsfiddle.net/Ud3ZQ/
And also, a properly aligning (well, almost) version of your solution:
http://jsfiddle.net/h4VS7/3/
The problem was that jsFiddle loads http://fiddle.jshell.net/css/result-light.css:
body {background: white; padding: 10px; }
Anything is more specific than * (including body), so the padding was being applied, regardless of * {padding:0; margin:0}
recently i asked this question: overflow (scroll) - 100% container height about how to achieve a vertically scrolling div with variable height.
a very helpful user provided a solution using absolute positioning and height:100%, here: http://jsfiddle.net/TUwej/2/. in this fiddle, you can see the basic desired behavior - the scrolling div will fill the height of the main container as is determined by the content in the '#main' element.
i modified this somewhat and used top:0 bottom:0 instead of height:100% to accommodate an element above the scrollable area. the modified version can be seen here: http://jsfiddle.net/N6muv/3/ (i realize there is a little extra markup and class definitions that are empty, and an adjacent sibling combinator that appears redundant - these are vestiges of the actual structure)
everything is fine, except that i had to supply a fixed top coordinate for the scrolling div (note the top:120px declaration for the '.sidebar-list' selector). i'd like this to be relative to the '.sidebar-options' element above it, so that the options container above can have any number of options and the scrollable div will position itself appropriately. using fixed coordinates, if any options are added or removed, either overlap occurs or unnecessary space develops - i'd like to avoid this. the exact number of options that should appear varies between views.
i had thought to wrap the scrolling div in a relatively positioned container, but doing that creates a conflict with bottom:0 no longer indicating the height of the main '.wrapper' container (which it should do). similarly, using height:100% will use the computed height of the '.wrapper' container so the scrollable div will extend beyond the boundary of the '.wrapper'.
is there a way to keep the functionality shown in the second fiddle, but with the top of the scrollable div relative to the bottom of the options div (which will be of variable height)?
thanks in advance for any suggestions.
EDIT: S.O. asked if i wanted to start a bounty, so i did (first time) - hopefully 100 pts isn't considered too low. still looking for a no-script, pure-css solution that doesn't involve fixed coordinates or dimensions for the y-axis (width and left assignments are OK). thx
UPDATE:
Import JQuery:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
New Demo:
http://jsfiddle.net/Mutant_Tractor/N6muv/28/
Add this nice little JQuery script to your page:
var contentColHeight = $('.content').height();
var optionColHeight = $('.sidebar-options').height();
var newHeight = contentColHeight - optionColHeight;
$('.sidebar-list').height(newHeight);
OLD
How does this suit your needs?
http://jsfiddle.net/Mutant_Tractor/N6muv/4/
I changed position:absolute; to position:relative and added a static height:190px as well as adding background:pink; (so the bg always looks right)
You can try adding and removing Options from the list above to demo this.
Full code:
.sidebar-content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background : pink;
}
I believe you should remove absolute positioning on the inner elements and try overflow:auto.
You need to define the height of the sidebar list coz you have to set this content to scroll-able and min or max height must be defined. And you could set .sidebar-list{position: relative;} See this Fiddle
Edit Your .sidebar-content should also be relatively positioned See this Fiddle whatever your 'options' content contains.
I have been using a lot of position:relative; in my design, I just find it the easiest way to get everything where I need them to be.
However, the more items I add on my site (each one with their individual div) each one ends up further and further at the bottom of my page, so I have to manually position them higher.
This leaves a lot of empty space at the bottom, and I thought that adding height: 1000px; would limit the scrolling a bit, but this method doesn't seem to work.
I've even tried adding height: 1000px; to the wrapper and it's still not working.
How can I limit vertical scrolling, to the number of pixels I choose?
Thanks so much in advance.
Wait, so you are creating a div, using position relative to move the content of the div to the correct location, and the issue being that the div tag itself is still in the same place and creating a vertical scroll even though there is no content there?
If so you should look into floats.
Here are some tutorials.
Floatutorial
Learn CSS Positioning in Ten Steps
You can specify both the height and the overflow:
.someClass
{
height:1000px;
overflow:scroll;
}
The most common values for overflow are scroll, auto, and hidden.
To limit the distance someone can scroll, I think you'd need to use JavaScript. I'm not sure how, but I can't think of anything in CSS that would do that.
If you are looking to set when something should scroll instead of just be cut off or expand the tag, use overflow:auto;.