I would like to ask one question about css positioning and image
I have one outerwrapper div I set it's margin equal from the body element.
My problem is when I place an image in this outerwrapper container it overflow which I don't want.
I want to stay image in its outerwrapper div container. It's css here.
#outerwrapper {
position: absolute;
height: 100%;
width: 100%;
border: solid 2px green;
margin-left:30px;
margin-right:30px;
margin-top:30px;
margin-bottom:30px;
height: calc(100% - 60px);
width: calc(100% - 60px);
}
Here is working jsfiddle code.
https://jsfiddle.net/magtechpro/s3r2cf8r/3/
Many thanks
Just add overflow: hidden to your #outerwrapper
https://jsfiddle.net/nt2n9xu6/
you forgot to add the css class for .img-responsive
.img-responsive {max-width:100%;height:auto}
This will maintain the images proportions. You can also add overflow:hidden to your #outerwrapper.
If you don't care so much about keeping the proportion of the image intact but just want it to cover the area use this instead:
.img-responsive {width:100%;height:100%;}
Related
I have a div that will show a picture in a bigger size.
So I want this div to be in the center of the screen. but margin 0 auto is not working...
CSS:
.form_postloader{
max-width: 1100px;
min-height: 400px;
background: #ffffff;
color: #000;
position:absolute;
margin:0 auto;
display:block;
}
http://jsfiddle.net/t5t031zj/
thank you!
it's not working because it's absolute positioned. You could remove the position absolute, or, if you need it you can do it like so:
position:absolute;
left: 50%;
transform: translate(-50%);
no need to set width, completely responsive!
http://jsfiddle.net/t5t031zj/2/
Due to position:absolute you need to use left and right to do this.
left:0;
right:0;
width: 400px;
Applying these to your box will center it, the issue is that you need to set a width.
Here is a fiddle: http://jsfiddle.net/t5t031zj/3/
I'm trying to achieve the following with CSS:
I want a fixed sidebar with navigation, so that when you scroll down, the sidebar stays in it's place. The remaining space on the right should be filled up with my content, as if it were the body at 100%.
However, my problem is that the right part takes exactly 300px more space on the right, resulting in a horizontal scroll bar.
I can't fid a solution on my own, can anybody help me? Thanks a lot! :)
JSFIDDLE: http://jsfiddle.net/ALGpP/4/
nav {
height: 100%;
width: 300px;
position: fixed;
z-index:99;
}
#wrapper {
overflow: hidden;
position: absolute;
width: 100%;
margin-left:300px;
}
Do you mean something like this?
I gave the #wrapper element some new CSS properties:
height: 1200px;
background-color: red;
The height: 1200px is in this case just for testing, to make the page longer.
The background-color: red is also just for testing to make it more visible.
Your nav element i have given the following css properties:
height: 100%;
width: 20%;
position: fixed;
background-color: green;
The height: 100% is used to make the element fill the page in the height
The width: 20% is used to make it 20% width.
The position: fixedis to make the element stick to a certain point at the page.
The background-color is used for testing, so you can see better what you're doing.
Also, i reccomend using a CSS reset. This is a really simple one im using in the fiddle:
* {
margin: 0;
padding: 0;
}
It basicly selects all elements and gives it a margin and padding of 0.
If you want the nav element to be 300px wide, use this fiddle.
Fix for the content that wasnt showing
Add the following properties to your #wrapper element:
width: calc(100% - 300px);
float: right;
So it looks like this:
#wrapper {
width: calc(100% - 300px);
height: 1200px;
background-color: red;
float: right;
}
Demo here
This is My fiddle:
Its a simple issue and i am not getting why i cant have this background image responsive..
I am using the bootstrap class : "img-responsive" to make it responsive.
After 1460px on width ,the image stops adapting to the width.
The image
id="background" class="img-responsive" lies within
The div
div id="innerWrapper"
This it the required css code:
#innerWrapper{
border: 2px solid;
float:none;
position: relative;
overflow:hidden;
width:100%;
display:block;
height: auto;
background: no-repeat scroll 0 0;
background-size: 100% 100%;
}
#background{
max-width:100% !important;
height:auto;
display:block;
}
I was using http://designmodo.com/responsive-test/ for the responsive testing.
Your problem is that .img-responsive class defines the following CSS:
.img-responsive{
display: block;
max-width: 100%;
height: auto;
}
And what this CSS means is:
Whatever my image size is, it will take all the space it has to fit its natural width (1279px) but, if it overflows its wrapper, it will fit to it.
If you want your image to always fit the size of its wrapper, you have to specify the following css:
#background{
width: 100%;
}
But that's not enought, if you want your image to keep its aspect ratio, you also have to specify the height attribute:
#background{
width: 100%;
height: 100%;
}
Tell me if it worked.
I've been looking around for a while today and can't find a question that answers my specific problem.
I am designing my website and the content is in the center placed inside a div, which is the wrapper. My problem is that even though the height is set at 100%, if I add to much content, the wrapper does no stretch with the content, so the text ends up being placed outside the wrapper; it is still centered with it.
How can I fix this? The CSS I have is:
#wrapper {
position: absolute;
left: 50%;
width: 800px;
height: 100%;
min-height: 100%;
margin-bottom: 0px;
margin-left: -400px;
background-color: #F7F7F7;
border-radius: 5px;
}
Change
#wrapper{height:100%;}
to
#wrapper{height:auto;}
Fiddle here.
You could also take off the Height Property, if you need to have a minimum height of 100% before the wrapper div begins to enlarge as respective to its content. so it will be:
#wrapper{
min-height: 100%
}
not:
#wrapper{
height:100%;
min-height: 100%;
}
Could someone show me how to create three column divs with the middle div 1040px width and the left and right divs are elastic so they contract when the window is resized. this will center the middle div at all times.
There is a way, I just find out! :D
HTML:
<div id='siteHeadLeft'></div>
<div id='site'>
<div id='siteHeadRight'></div>
CSS:
#siteHeadRight{
height:95px;
float: right;
margin-right: -500px;
background-image:url(../IMG/menu_bg.png);
background-repeat:repeat-x;
width: 50%;
}
#site{
float: left;
width:1000px;
}
#siteHeadRight{
height:95px;
float: right;
margin-right: -500px;
background-image:url(../IMG/menu_bg.png);
background-repeat:repeat-x;
width: 50%;
}
You can center a fixed width div simply by adding this CSS:
div {
width: 1040px;
margin: 0px auto;
}
If you want to add a background, you would add it to the div's parent element, or the body of the page.
If your goal is simply to center the middle div, simply give it the following CSS properties:
width: 1040px;
margin: auto;
position: relative (or static. NOT absolute or fixed);
You can set a tiling background-image for the body element that will cover the area on either side of your div.
EDIT: Here's an example that comes pretty close to what you're looking for: http://jsfiddle.net/kqVFy/