I have a div of width: 1000px and inside that is a child which I wish to span the entire width of the browser window.
The trouble is, I don't know how to override previous width inheritance.
I could just position this outside of my container div, but that would be a huge inconvenience and workaround, unless of course this is equally as troublesome.
Markup:
<div class="centreContainer">
<div class="menuContainer"></div>
</div>
CSS:
html, body
{
margin: 0;
padding: 0;
}
.centreContainer
{
margin: auto;
width: 1000px;
}
.menuContainer
{
width: <what to do>;
height: 420px;
}
Preferably I would like a CSS only workaround, I was thinking of some stupid Javascript solution where you get the width of the browser window, then set the width of the menuContainer to:
<variable> / 10 (10 because 1000 / 100 = 10, where 1000 is the width of the centre container)
And have the menuContainer set on margin: auto; so it is centered.
Just use position:
.menuContainer
{
position: absolute;
width: 100%;
height: 420px;
}
Just use position:absolute shown in this jsfiddle
.menuContainer
{
width: 100%;
height: 420px;
position: absolute;
}
you could try placing your .menuContainer as absolute position into a relative parent position . JSfiddle
#root{
display:block;
position: relative;
}
.menuContainer{
position:absolute;
top: 50px;
left: 0;
}
Related
I want my div.container to be 100% height to fill the whole screen.
I've tried a few things, min-height, body height 100% and all of them seperate but it just won't work.
Here is the link : http://jquery.colinvaneenige.nl/test/
So .container with 100% height while still being in the center of the page! :)
Thanks in advance,
You can make it position: absolute at set the top and bottom to 0:
#container {
width: 400px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: red;
margin: 0 auto;
}
Fiddle Demo 1
..or
body,html {
min-height: 100%;
height: 100%;
}
#container {
width: 400px;
height: 100%;
background: red;
margin: 0 auto;
}
Fiddle Demo 2
Using position: absolute and set height: 100% instead of min-height.
.container {
position: absolute;
height: 100%;
}
You then will have to use other CSS tricks to get it back to centered, such as let's say your width of the container is 1000px:
.container {
width: 1000px;
left: 50%;
margin-left: -500px; /* negative half of the total with of the container */
/* And code from above line */
position: absolute;
height: 100%;
}
I've only ever been successful with this by creating a table with a single cell that is 100% height, then placing your div within that.
It's not possible, height must be in pixel :/
Only % for width :)
You can make a " min-height: 100px; "
I run into this issue a lot where I need the width of an inner container (like a wrapper with a set width of 960px) to span a width of 100%, and I'm unable to touch the html so it must all be done with css.
I know I can position: absolute; that guy to break him out of the wrapper... but is there another... better way?
Here is a JsFiddle link to help make it a little clearer:
http://jsfiddle.net/KRyF6/
<!-- html -->
<div id="container">
<div id="inner-container"></div>
</div>
<!-- CSS -->
#container {
width: 500px;
height: 500px;
background: gray;
margin: auto;
}
/* here's the container that I want to be 100% */
#inner-container {
width: 100%; /* :( */
height: 100px;
background: black;
}
Edit:
Here is a jsFiddle with my absolute position version... what I'd like to know is if this can be done without absolute positioning
http://jsfiddle.net/KRyF6/3/
<div id="container2">
<div id="inner-container2">
</div>
#container2 {
width: 500px;
height: 500px;
background: gray;
margin: auto;
clear: both;
margin-top: 20px;
}
#inner-container2 {
background: black;
width: 100%;
height: 100px;
position: absolute;
left: 0;
}
Well there is another way of doing this.
Body -> Container -> child
Now this way as the title suggest is passing its width to the container and from the container to it's child. This way the child can get the total width of the body.
Explanation
The only problem you are facing here is that an static width will not keep the <body> width in mind(aka the viewport). So you have to use percent values for the width so it will be based on the <body>:
#container {
/*width: 500px;*/
width: 70%;
height: 500px;
background: gray;
margin: auto;
}
Now the child knows that the width of its parent(#container) is 70% of the total body.
However a width of 100% will only get 70% of the <body> width. Instead you need 100% + the 30% of the 70%. And 30% of 70% is like 42%( 35% would be 50%).
Now we got the 100% of the <body>. Now you can let it look like it is outside the container width a negative margin. To center it you want it to be minus half of the 42%(=30% of the body) which you just calculated:
#inner-container {
/*width: 100%; /* :( */
width: 142%;
margin-left: -21%;
height: 100px;
background: black;
}
jsFiddle
However, is this easy to use?
Well it is an answer to your question. It is possible without using position: absolute.
Would position absolute be easier?
Definitely:
#inner-container {
width: 100%; /* :( */
height: 100px;
background: black;
position: absolute;
left: 0;
}
Only two lines of code without any calculates :)
jsFiddle
I'm gonna go out on a limb and say 'no' on this one.
There's no way of making the inner div span the entire width of the page without breaking it out of the document flow, i.e. absolutely positioning it.
I think it could be done only with absolute position:
#inner-container {
width: 100%; /* :( */
height: 100px;
background: black;
left: 0;
position: absolute;
}
Fiddle
Actually, this can be done with calc() in conjunction with viewport units vw
FIDDLE - Working in iE10+
#inner-container {
height: 100px;
background: black;
width: 100vw;
margin-left: calc(250px - 50vw);
}
Actually, according to the spec (see example 14) - this should work (that is - in all browsers), but for now there's a bug where calc doesn't work with viewport units.
Alternatively you could do this:
#inner-container {
height: 100px;
background: black;
margin-right: calc(250px - 50vw);
margin-left: calc(250px - 50vw);
}
-- this way - in IE it will look as required, and on other browsers it will look centered as you have it.
FIDDLE
I'm trying to stretch content div to 100% height:
http://new.art-frame.spb.ru/catalog
content DIV:
<div id="rt-transition">...</div>
footer:
<footer id="rt-footer-surround">...</footer>
The problem is, I can't change html layout, only CSS.
(the best way is to use Firebug/Chrome inspector to see what's all about)
html {
position: relative;
min-height: 100%;
height: auto;
margin: 0;
}
body {
margin: 0 0 100px;
min-width: 100px !important;
}
footer {
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
}
Try changing the height of the html to 100% instead of auto. Then, play around with the CSS of all the elements inside to make it fit. If there is excess overflow, use
body { overflow: hidden; }
To solve the problem, although this won't allow for scrolling.
Set:
min-height: 720px;
on your rt-main
UPDATE 2: Making further progress. Almost there!
jsFiddle: http://jsfiddle.net/persianturtle/Tfemm/6/
The sprite is now 99% responsive, except that the
margin-bottom: %
Does not line up perfectly as the page changes width. The
margin-left: %
Seems to work great.
Any thoughts on how to align the margin-bottom perfectly?
UPDATE: Making progress, but still not yet there.
Below is the jsFiddle: http://jsfiddle.net/persianturtle/Tfemm/5/
The sprite image that I wanted to crop is working responsively, except it is only being cropped horizontally and not vertically.
The Code below:
<div class="responsive-sprite" style="width: 100%;">
<img alt="Yay for alt tags..." src="http://zx85.dyndns.org/raphtest/img/nav-buttons2.jpg" />
</div>
img {
width: 100%;
height: 200%;
margin-left: -81.869%;
}
.responsive-sprite {
overflow: hidden;
}
Can anyone think of a way to crop this vertically as well?
Below is the original post:
Is there a way to make CSS sprites responsive?
Take a look at the attached jsFiddle: http://jsfiddle.net/persianturtle/Tfemm/2/
Is there a way to resize this CSS sprite once the container can no longer fit the full size image?
<div class="container">
<h2 class="popular"><img src="http://zx85.dyndns.org/raphtest/img/nav-buttons2.jpg" alt="" />Featured</h2>
</div>
.container {
width: 20%;
margin: 0 auto;
}
h2 {
overflow: hidden;
position: relative;
height: 128px;
width: 192px;
max-width: 100%;
}
h2 img {
position: relative;
}
h2.popular img {
top: 0;
left: -867px;
}
h2.popular img:hover {
top: -128px;
left: -867px;
}
Hmmm. Tricky.
I haven't tested but would it work to orient the sprite horizontally instead of vertically and then:
h2 {
overflow: hidden;
position: relative;
width: 192px;
max-width: 100%;
}
h2 img {
position: relative;
width: 200%;
}
h2.popular img {
top: 0;
left: 0;
}
h2.popular:hover img {
top: 0;
left: -100%;
}
Edit:
Seems to work, the sprite just needs to be configured. Have a look at this JSFiddle.
Unfortunately, I think you will have to do each button individually because the image height is what determines the button height when it is resized.
I am trying to make height auto. Whatever i tried did not work until now.
I am using masterpage, asp.net 4.0 ,css
Here the config
Here the css classes
*
{
margin: 0;
padding: 0;
}
.logo
{
height: 100px;
width: 1000px;
position: absolute;
top: 0px;
}
body, html
{
height: auto;
height: 100%;
}
.footer
{
visibility: hidden;
}
.MenuBarMasterPage
{
position: absolute;
top: 202px;
margin-left: auto;
margin-right: auto;
width: 1000px;
height: 40px;
}
body
{
background: #0C0C0C url(http://static.monstermmorpg.com/images/backgrounds/animus-mix.gif) repeat;
margin-right: auto;
margin-left: auto;
width: 1000px;
background-position: top center;
}
.main
{
position: absolute;
top: 242px;
width: 1000px;
background: #D1D1D1 url(http://static.monstermmorpg.com/images/backgrounds/content.png) repeat;
z-index: 2;
height: auto;
}
According to the firebug the computed style height of main is 0px this is the problem
To avoid having to manually set a different fixed height on each page (which is a terrible solution), you have two options:
Use JavaScript to calculate the height.
Don't use absolute positioning.
There is no reason to use absolute positioning for your layout. You should remove position: absolute from almost everything, and write new CSS.
You're going to need a lot of float: left and float: right.
If you're using Bootstrap 4 (Flex)
If your <img> is direct children of a div with display:flex, you might want to set display:block on parent div instead, so height:auto will work.