If I want to have my background be separated into 4 equal-sized divs, that isn't hard for me to accomplish. What's puzzling, though, is that only the top and left margins appear, and I cannot get the right specification to have margins on the right and bottom appear.
.bg {
height:100%;
width:100%;
position:fixed;
background-color:blue;
}
With the code above, you can see that there is a top and left margin only.
The way I figured out is to just set the height and the width to slightly under 100%. Thanks for the other feedback.
Related
I have a website, and I need to have an image centered at the bottom of the visible page. So in any screen size, the image will still be at the bottom, and centered. I've tried other Stack Overflow threads and can't seem to find something that will actually keep it at the bottom.
position:fixed;
bottom:0px;
left:50%;
This does not work.
It looks like you probably do want a fixed position so that when you scroll the div will scroll down with you, but you might need to add more information about the div you are trying to center. Am I correct in assuming the div is following as you scroll but not centered correctly?
If that's the case, my guess is because your margins are not taking into account the height and width of the div you are trying to put in the middle of the screen. If you have an object that has a width of 100px, you need to subtract half of that from the margin-left so that the div is actually hitting the center of the screen. More context would be helpful, but hopefully this gives you something to work with.
In this example, your div would look something like this:
.center-bottom {
position:fixed;
bottom:0px;
left:50%;
width: 100px;
margin-left: -50px;
}
Yes! I did searched for related issues as it seems to be an easy question! However the solutions given on other topics do not solve my issue!
Im using an area filled with divs (CSS3 Box). Multiple rows with multiple divs
Each div gets his own picture that needs to stretch to fit the width and height of the div! (no matter what resolution).
Currently only the width stretch works. Height stretching seems to stretch it over all rows.
Fiddle to show you guys http://jsfiddle.net/h2Ya8/32/
Any solutions?
I'm not sure if it's what you're looking for, but adding
.product {
position:relative;
and
.product img{
width:100%;
height:100%;
position:absolute;
bottom:0; right:0;
}
seems to force the image to width/height of the container.
Check the demo.
Do you need to preserve the ratio?
.. expecting the picture to get "cropped" at the top and bottom. I only want it to fit the width 100%, and wish to become bigger than the height, but not leave the certain container.
How is that done?
Your question is a bit vauge if you meant you wanted an img to stretch to the full width off a container but the height too get cut off then you want something like this.
.container{
width:300px;
height:300px;
overflow:hidden;
display:block;}
.container img{
width:100%;
vertical-align:middle;
}
Just set the container's css overflow property to hidden, give it a fixed size, put your image inside with a fixed width, and done :)
Well, almost done. To get it cropped at the top and bottom, you need to get the image vertically centered in the box. One hack to achieve this is to have tiny text nodes on either side of the image, having a line-height the same as the container div height. Giving the image vertical-align:middle should center it vertically within your div.
so the past days i tried to achieve the following:
the idea being to have a div (red) that is ultimately centered (using margin:auto;), and on the same level (x-axis) another div that has a fixed size (blue).
on a huge enough display, maximized, it looks great.
now the fun part is when having a smaller screen and/or resizing the window. because of the auto margin, one of the divs overlaps the other:
this is what i want to prevent. (in explanation: red being the menu, blue being the logo)
so the first idea was to shift the red div the needed pixels of the blue div to the right, using padding-left:??px;
but that makes the red div no longer center itself absolutely, but padded ??px to the right. figuratively centered in an extra box (grey).
second idea being to create another (transparent) div on the right of the red div. but that makes the min-width of the whole site become out of bound:
in other words: the scroll bar becomes visible far to early. it's ought to appear just when the window is smaller than the sum of pixels of the red and blue div together. and not, like in img 4, where it appears just when the window is smaller than the sum of pixels of the red div and both divs right and left from it).
so what i want is that:
two divs, not overlapping (even when resizing), the right one at a fixed size, the left one in the center of the window, whithout creating a ghost div, creating blank space on low resolutions.
oh and please no javascript, if possible.
i hope my explanations helped a bit getting my idea.
and i furthermore hope someone with a great idea or with an overlooked feature can help me out.
I take it back... it's marginally possible... with a lot of hackish coding...
http://jsfiddle.net/7myd4/2/
http://jsfiddle.net/7myd4/2/show
There you will find the code and the demo. It involves a wrapper, padding, relative positioning, and a really hackish layout. :P
EDIT:
looking back at this answer from over two years ago... I've come to the conclusion that this answer is terrible.
I've updated it with code samples and a new demo (only thing different is formatting changes and moving inline styles to classes)
HTML
<div class="firstdiv"></div>
<div class="seconddiv">
<div class="innerdiv"></div>
</div>
CSS
body{
padding:10px 0px;
}
.firstdiv {
background-color:#ddd;
position:fixed;
left:0px;
width:200px;
height:200px;
}
.seconddiv {
margin:0 auto;
width:300px;
height:150px;
padding-left:400px;
position:relative;
left:-200px;
}
.innerdiv {
background-color:#ccc;
width:300px;
height:150px;
}
Demo: http://jsfiddle.net/7myd4/55/show
Source: http://jsfiddle.net/7myd4/55/
use Javascript to change the width of the div based on the window width. or use css stacks to check the max-width of the screen and have css for that size.
http://api.jquery.com/width/
http://api.jquery.com/resize/
or check out this stack.
How to dynamically change image/div dimensions based on window size?
I want to make the div 1 on top of the div 2, but this doesn't work
.div1, div2 {
width:100px;
height:100px;
float:left;
}
.div1{
left:-50px;
position:relative;
z-index:-1;
}
.div2{
left:-50px;
z-index:1;
position:relative;
}
If your blue box appears first in the HTML, then change bluebox's left to px and redbox's left to -204px. If the red box appears first in the HTML, then change redbox's left to 0px and bluebox's left to -204px.
(The extra 4 pixels is for the 2 px border on either side.)
Using Myles' JSFiddle, here is a demo of the position:relative solution: JSFiddle
If you want the blue box on top you have to give it a higher z-index value. Right now it is lower.
That doesn't really matter though because you have them both floated and margined left so that they don't actually overlap.
Try giving the red box margin-left: -200px and give the blue box z-index: 10.
Try to avoid negative z-index values,
try using z-index:1 on .bluebox and z-index:2 on .redbox
Here you go:
Live Demo
Clever blend of absolute positioning and z-index :)
In your example, the boxes aren't overlapping because they're floating next to each other, then you move them both to the left 100px. Try only moving the red box to the left, then give the blue box a higher z-index if you want it to be on top. The z-index is the stacking order, where elements with lower numbers appear below elements with higher numbers. The Mozilla Developer Network has good information on this topic.
With some slight tweaking, this works fine for me: http://jsfiddle.net/mlms13/ZGJXt/2/