I have a form of width 450px with one item that has to take the full page's width (990px).
position:absolute is a problem because this wide item needs to fit in the flow of elements inside the form. margin-left:-270px seems a bit hackish and likely to break down with future rule changes. Is there a better solution?
How can I get an element in the form's flow that takes up the whole page's width?
If you're using fixed width layouts, I don't really see a margin-left of -270 as being hackish. If you hadn't posted it yourself, it would be the answer I would suggest.
To make it seem less hackish, an alternative might be to use Less - it's effectively a CSS based language that compiles to plain CSS. You could then specify the rule so that changes to the form or page width will automatically sort out your margin also:
#page_width: 990px;
#form_width: 450px;
...
.full_width_form_element {
margin-left: (#form_width - #page_width) / 2;
}
http://lesscss.org/
Use the overflow property of CSS. overflow: auto to cause scrolling, overflow: visible to allow it to leak out of the box. overflow: hidden to hide whatever part of it leaks outside the box.
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.
This probably was answered somewhere, but I can't find it :s
My question is about dynamic resizing of divs based in percentages.
Please look at code example below for the examples and possible solutions I made.
I ask if there is a better way to do resizing?
More detailed explanation:
Say I am writing a plugin that people can insert in their pages. (Imagine login form).
I go ahead and design the plugin's divs. I use media queries to achieve desired look for different devices. I work on a div straight inside of a 'body' element.
I use percentages for design (I like percentages). Say I set div to 80% width.
Now I give this plugin to the user. User goes ahead and puts the plugin's div inside of another
div that is 100px in width. Now everything looks awful. (80% of 100px is not a lot [80px]).
And of course I want user to put my plugin inside of whatever small-width divs that he have.
The solutions I saw so far to this problem was to create a holder div of certain width - say hardcode 300px. (ex - jQuery UI's Datepicker div; Meteor's login widget div). And then code to it always knowing the 300px width that I set before is not going to change.
But I don't know how good of a solution this is.
Moreover if I decide to go with hard-coding width, my plugin would need width of ~ 1000px. Because I want div to resize with media queries.
And if I go with hard-coding width (say holder div of 1000px width) and put it on a page, the page will have horizontal scrolling. And you cannot simply hide holder div (parent div) and have child to show at the same time. So this requires setting position:relative for holder (parent) div, putting it outside of window, and use same for child div - position:relative with same offset in opposite direction of parent offset.
I hope I am being clear so far and have not confused you!
A code example to illustrate what I am talking about:
http://jsbin.com/ifawez/18/edit
#cimmanon's comment cleared things out for me.
The problem is with lack of HTML/CSS "tools" available at the moment. Since responsiveness came into play fairly recently there are not a lot of CSS-native tools to accommodate changes in dimensions.
For instance media-queries exclusively work with width of window/document and not of other elements such as divs.
The solution I currently employ is using Javascript to determine width of a div and resize accordingly.
What I resize is the number of columns I want to display (I use Multi-Column module as suggested by cimmanon) which is pretty stable on webkit browsers. Since it is all done in Javascript (and jQuery's Sizzle) I keep an array of sizes like so:
var widthArray = [
{min:0, max:250, columns:1, secondary:false},
{min:251, max:350, columns:1, secondary:true },
{min:351, max:479, columns:1, secondary:true },
//more div sizes
];
// more code here
$(element).css({
"column-count": object.columns,
"-moz-column-count": object.columns,
"-webkit-column-count": object.columns
});
This is sort of like media-queries, but allows to work with width of html elements, not screen size alone.
Additionally I follow the way jQuery UI displays its components: using position relative/absolute.
.outer_div {
position: relative;
}
.inner_div_with_elements {
position: absolute;
z-index: 1010;
width: 99%;
float: left;
overflow: hidden;
...
}
.inner_components_displayable {
position: relative;
display: block;
}
.inner_components_hidden {
display: none;
}
So in Summary:
Media queries alone work with size of screen, and resizing of any inner element can be done in percentages to the screen size. They can be of huge help, but you turn into making your components work either with percentages based off screen, or specifying something like min-height and !important (as suggested by #Octavian)
Javascript manipulation of elements is currently easier, but is a costlier alternative (jQuery SIzzle is pretty slow)
A lot of libraries (ex. jQuery UI) use Javascript together with position relative/absolute to make sure their components/plug-ins will work nicely on all users' screen sizes.
I ended up combining position with javascript to emulate media-queries and multi-column design at the same time for responsiveness.
Thanks everyone who participated!
If I am reading this correctly, the main issue here is that it can potentially become too small based on where the code is located.
So why not just add a min-width property with !important? That way you can still base the size off of the parent container, but be sure that it doesn't get too small and ugly.
Potentially, you could even have a script to base the width off of the parent div and the min-width off of the screen size.
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.
I have a website at filmblurb.org.
The page-container of my site extends to the bottom of the window when you scroll out to make for a 100% CSS layout style, but for some reason even when the height is 100% for both the body and tag, those two elements go about halfway down the page and then stop when the viewport is zoomed out. When I'm profiling those elements in Google Inspect Element that is. My page-container is currently min-height: 100%, but that for some reason actually does extend to the bottom of the viewport when zoomed out.
I've also taken screenshots of what I'm seeing to give you a better idea. Here they are [link]i917.photobucket.com/albums/ad16/jtarr523/… (for the body) and
(for the HTML)...Both are not extending to the bottom.
Anybody know how to fix this?
I would appreciate it.
min-height: 100% on the html element means that that element will be at least as tall as the viewport. It does not mean that it will always extend to the bottom. If you scroll down, then you may still be able to scroll below the bottom of the <html> element.
The only way to prevent this (short of JavaScript) is to ensure that all elements on the page (that is, everything that could possibly cause a scrollbar) is kept within the html element. A simple way to force this is to put overflow: hidden on your html element:
body {
overflow: hidden;
}
If the problem is being caused by a float, then that will solve it. If the problem is caused by an absolute-positioned element or a negative bottom margin on the last element, then that will replace your problem with a more serious one: the page will be cut off at the bottom of the html element. You will then have to find the problem element some other way.
(The same applies to the body element; it will need its own overflow: hidden; to ensure that nothing can extend beyond it.)
Not sure exactly if it would work with browser zoom, but in my experience (and according to this question) you need to set the html tag height to 100% if you are setting container elements to min-height: 100%.
html { height: 100%; }
body { min-height: 100%; }
Replace body with a reference to your main container and it should still work. As far as I can tell there are no adverse reactions to setting html to 100%; it doesn't cut the page off or mess up any other styles.
Like I said, I'm not 100% sure this is related to your problem, but it's probably worth a shot.
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;.