how come this makes the width to be 100%?
.test {
width: (50%;);
}
I already know how to fix it so it becomes 50% and that the statement is more or less redundant, I'd just like to know why this behavior happens.
EDIT: http://jsfiddle.net/k57z9/
I am assuming .test here is a <div> or other block level element. These elements by default have a 100% width (well, auto really, which means 100% minus padding). The broken CSS rule is ignored because it's, well, broken. So the element is 100% wide by default. You'd get the exact same result by not writing any CSS at all.
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 need to make ui controls panel, that has 100% width and gradient background. UI elements on this control panel should have width 1000px and should be centered.
For a moment i have two elements:
panel (width 100%, gradient background), global wrapper
panel-wrapper (width 1000px, transparent background), is placed inside "panel" element, contains UI elements.
It works brilliant in all browsers i need, but i really don't like to use two HTML elements, when logically it should be just one. Perhaps it is possible to have one element "panel" with fixed width (1000px) and auto-padding, that will cover all free space to the left and to the right? (i've made an image to show it if my explanation is crazy :))
It is possible?
You could potentially use the calc() function, though it isn't highly browser compliant.
Here is a quick example and more information on compatibility and usage can be found here.
*I made the example in Firefox, didn't test it elsewhere.
Just for a quick code example, the following shows one solution:
div {
width: 100px;
background-color: blue;
height: 100px;
padding-left: calc(50% - 50px);
padding-right: calc(50% - 50px);
}
The challenge is you can't really combine percentages and fixed widths with padding in the traditional sense, since the padding is added to the total width.
If the total width is 100%, and you want the content in the center to be 500px, you can't calculate the padding.
With CC3, though, you can use the box-sizing to change 'where' the padding is placed in the box model.
http://www.css3.info/preview/box-sizing/
Alas, I still don't think that will give you want you want simply due to there still being an unknown variable in play (the width of the container that the 100% width object is in).
In the end, we can sometimes over think these solutions in the name of over-optimization. IN this case, an extra div seems perfectly acceptable and, likely, the proper solution.
Why padding ?
You could set left and right margins to auto and that would make the div centered..
So just set
.panel{
width:1000px;
margin:0 auto;
}
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 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.
In my page there's only one image. Kind of 1500x3000 px.
In the printer, I need that this image's maximum width to be the width of the page, so I did: width 100% in the css, and it works.
But the height... the old bullshit of height 100% will never work. Because it always will be 100% of the parent container, then someone must have height defined. Or html or body.
So, my question is: make this image fit in one page.
Any ideas?
One way to do it would be to perform some calculations to find out what width would cause the length to be exactly one page, and then set your width in the CSS accordingly.
If I understand this right, could you do
.OnePageImage { height: 100%; width: 600px; }
Where 600px (the width) is the total width of the page. Then the image would fit on one page (albeit with some distortion potentially). You could also add a css page break style to a div before and after the image, which is done like this:
.break { page-break-after:always; }
Then the code would look like this:
<div class="break"></div>
<img src="[your image src]" class="OnePageImage" />
<div class="break"></div>
The only thing that limited the print output to a single page for me was setting the height in cm of a container element that wrapped the entire page, and also setting it's overflow to hidden. For some reason this didn't seem to work on the body element.
body > section {
padding:0 !important;
margin:0 !important;
height:25.7cm !important;
overflow:hidden !important;
}
Incidentally, I had hoped that setting page-break-inside to avoid on the body or the container element might have been the solution to limiting to a single print page but that doesn't seem to have any effect at all.
Ok sorry for putting the "solution" as a comment:
What I've ended up doing was assume that 99% of the clients (that's true) they use a single page size. So I put some warning in the print interface that will only work with the page size "X". too bad. but it's working out so far