On the site I am working on, I have some elements that I want the background to fill the entire width of the browser, but I also want there to be a max-width on the elements.
I can accomplish this, but I feel like maybe there is a 'better' to do it than I am currently.
Here is the fiddle with a raw example: http://jsfiddle.net/5KJf5/
As you can in the fiddle, the class max_w is solely there to put the max-width on the element; if I put max-width on the .row class, at the max-width the background-color will stop.
So, my question is this:
Is there a better way to have an element's background-color span the whole screen while still being able to maintain a max-width, other than creating a special class just to do this?
Thanks in advance.
I think there is no direct way to expand the background outside the actual area of an element. To achieve what you really want, we can use relative padding with the help of calc() function, we also have to set the box-sizing to border-box so that the container's size includes the borders (not the content by default):
.row {
...
padding: 10px calc((100% - 300px)/2);
box-sizing:border-box;
}
Now you don't need the wrapper max_w, here is the fiddle demo
You can use :before for that background.
.row:before{
content:'';
width:100%;
height:100%;
position:absolute;
background-color:aqua;
top:0;
left:0;
}
My example : http://jsfiddle.net/5KJf5/5/
Related
I have a bunch of classes, here are 3 as example:
.col-1-3{
width:calc(100%/(3/1));
}
.col-2-3{
width:calc(100%/(3/2));
}
.col-1{
width:100%;
}
(all of these are inline-block and position relative if that info might be useful....)
Now, if an element with any of those classes applied, also have another class applied, lets call it 'batman', I need the element to grow 30px in width.
Without touching each and everyone of my .col-* classes and in there add the 30px, is there any! other way to add to an elements width? see example pseudo code:
.batman{
add-to-width:30px;
}
I was thinking perhaps with :before and/or :after. Adding a pseudo element and somehow move it 15px to the left/right and the main element would follow/grow...but it didnt work....
requirement: strictly css, no javascript please.
Any idea?
thanks in advance!! :)
I believe You have 2 options - first is something like a margin since margins will stack, the other is using calc()
.batman {
margin: 0 15px;
}
or
.batman {
width: calc(100% + 30px);
}
I ran into this issue trying to implement https://github.com/jmosbech/StickyTableHeaders in an application. In my case, everything worked fine, but the header was visible outside of the container. Once it had position:fixed, it suddenly ignored z-index and overflow properties. I set up the following fiddle to demonstrate the issue:
.scroller{
overflow:scroll;
width:200px;
margin:2em auto;
}
.container{
width:400px;
background:green;
overflow:hidden;
}
.foobar {
width:350px;
height:10px;
position:fixed;
background:yellow;
opacity:0.5;
margin-left:-25px;
}
http://jsfiddle.net/z2x5Q/1/
How can I keep the .foobar div's width and fixed position, without it overlapping the div.container's boundaries?
Why are you trying to use position: fixed?
The problems you state are a standard behavior of a fixed position. The item is moved out of the flow of the DOM and you are required to explicitly state where and how you want it. I'm not sure position: fixed is giving you anything here that you would want. In fact, as soon as you take that property off your .foobar element, it looks like you get the behavior you want.
I'd suggest reading up a bit more on position fixed.
Good article here from CSS Tricks
I realise this question has been asked multiple times in differently worded titles and options, but i have yet to find something that works for me.
Im trying to have an img fill most of the screen (keeping its aspect ratio) without overflowing the edges. (Basically what the firefox browser accomplishes when viewing an image)
Most that i've tried either works in only one direction ie. width will resize but will end up overflowing the height and the same for the other way, either with CSS or JScript. Also playing a factor in my trouble is that i want to aplly this to both portrait and landscape images (More or less any image i have on the site)
This seems like it should work using pure CSS but doesnt (im not completely knowledgeable in all CSS though):
Link to JSFiddle
body, html {
margin:auto;
padding:6px;
height:100%;
width:100%;
}
img {
max-width:100%;
max-height:100%;
}
There are a hand full of other scripts as well, but this post is getting a bit long.
Could anyone help me out containing my images within the screen, with either JQuery or CSS (within or without a DIV)
Thanks in advance,
Try this jQuery plugin: TailorFit
and check out the demo.
You can play around with various options in the demo to figure out if this could work for you. The browser support is extreme because it only uses jQuery and relative positioning.
Full disclosure - I'm the author of the plugin.
Now define your html, body height 100%;
as like this
body, html {
height:100%;
}
MY ANSWER:
I ended up just wrapping the image in a div and setting the div dimensions in CSS:
PURE CSS Resize
Unfortunately this method may look quite horrible in older browsers but it has atleast got me out of a pickle and its a tiny piece of styling.
Hopefully i can find some jQuery alternative soon.
body, html {
width:98%;
height:98%;
}
.outer {
position:fixed !important;
position:absolute;
margin:auto;
text-align:center;
top:10px;
right:0;
bottom:10px;
left:0;
}
img {
max-width:100%;
max-height:100%;
padding:4px;
background-color:#fff;
}
----
<div class="outer">
<img src="whatever.jpg" />
</div>
there seem to be a few posts on this subject but i can't find anything conclusive one way or the other, so thought i'd try on here for someone far more knowledgeable in CSS than me! I have 3 container divs which have background images to give the impression of a tapered out line effect at the top and bottom of the main content. I can't get the middle div to dynamically expand as far as i need it to, it seems to need a specific height. Is there any way to get height: auto or 100% working on this? The site is here - thanks!
Edit: Sorry, you are trying to stretch the background image.
The technique is to remove the float:right; style and add a margin to the left:
#main_body {
float: right; //remove this
margin-left: 320px; //add this
}
-works on Chrome
There are solutions described. You can use pure css to do it or even use javascript.
I am considering that you are only requiring a css solution. Try the following CSS.
body {
margin:0;
padding:0;
height:100%;
}
or
html{
width:100%;
height:100%;
}
or check out this link, a better solution. Click here
I'm trying to make a div assume 100% of it's parent div. The parent div acts as a page wrapper, so it's already assuming 100% of the page width. I've tried adding width: 100%, but this did not seem to work. I'm a little baffled, because this seems like a relatively simply thing to do.
Don't specify a width at all. For a div element (or any block level element for that matter), this will make it assume 100% width regardless what padding/margin settings it has set.
Depending on the box model, explicitly setting 100% width can actually make the element too wide because paddings are calculated into it.
If this doesn't work, there is some other CSS setting interfering and you need to show more of your layout and HTML code.
display: block;
width: auto;
Should work for you.
You need to show more of your existing css code as normally, a div takes by default the whole space available to it, provided it has some content.
Other than that, make sure you set margin and padding of the parent div to 0.
.parent{
margin:0;
padding:0;
overflow:auto;
}
.child{
margin:0;
padding:0;
}