i am using a container made by myself, but, when i resize the browser window, the container moves along window, i want it static in your place.
this is the CSS:
.container {
margin-right: auto;
margin-left: auto;
width: 1000px; /* yes, because style of PSD file. need follow design */
}
margin: auto centers the .container based on the width of its parent element.
.container has a parent element with a fluid width (e.g. 100%). The width of this element changes when you resize the window, so your container will automatically recenter according to that new width.
There are a few solutions to this:
1) Wrap .container inside an element with a fixed width that won't change on browser resize.
CSS:
.wrapper-fixed-width {
width: 500px;
}
HTML:
<div class="wrapper-fixed-width">
<div class="container bg">The parent element has a fixed width (pixels)</div>
</div>
2) Set a fixed margin size to .container
CSS:
.container {
margin: 0 50px;
}
Here is a JS Fiddle that shows these examples:
http://jsfiddle.net/vH49a/4/
Related
I have a parent div that does not resize accordingly with a responsive image width is set to 100%. The height of the parent div is set to 300px but when the image resizes, the div stays at 300px and leaves a big space between the image and the container content. I have tried:
.bannercon {
/*height: 300px;*/
padding: 1em 0;
overflow: hidden;
}
I have created a fiddle to show the problem.
https://jsfiddle.net/volterony/hhyswzw3/
The question is how can I get the image's container div to also resize accordingly so no gap appears between the image and the text?
Cheers
Just remove the fixed height. It will be relative to the image anyway.
Than you have to make the div between the image und ".bannercon" div position relative so it also has the height of the image.
so remove
#header-fade-0 {
position: absolute;
}
and alter .bannercon css rule like this
.bannercon {
padding:1em 0;
overflow: hidden;
}
Here's an updated fiddle:
https://jsfiddle.net/hhyswzw3/8/
Your div size can't be auto resized if you define height to 300px,try to change div´s CSS to
div {
min-height: 300px;
}
I'm working on a mobile site that has a structure that looks something like this:
body
---->Mobile container div (height 100%)
-------->Full page div (height 100%)
------------>Vertically centered div (height 200px)
My problem is that the full page div level comes out as 0px. Here's the relevant CSS:
html, body
{
height: 100%;
margin: 0;
}
.mobile
{
min-height: 100%;
}
.full-page
{
height: 100%;
position: relative;
}
.center
{
height: 200px;
top: 50%;
margin-top: -100px;
position: absolute;
}
The mobile container is filling the window height, but the full page (100% of the height of the mobile container) is being rendered at 0px height, which ruins the vertical centering.
Why is this happening?
JSFiddle
The red div is the mobile container
The yellow div is the full page div (it's not visible because it's 0px tall)
The green div is the vertically centered div
This is happening because of the following rule:
.mobile {
min-height: 100%;
}
Here's why.
CSS specs tell us the following about percentage height:
The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to auto. A percentage height on the root element is relative to the initial containing block.
This applies to your .fullpage container. You can see that the parent container of .fullpage, which is .mobile, does not have a height set explicitly, but rather via the min-height property:
The min-height property is used to set the minimum height of a given element. It prevents the used value of the height property from becoming smaller than the value specified for min-height.
You would think that the child container, .fullpage would take the min-height property into consideration when determining its height, but it does not. Browsers will not set the child element’s height (specified in percent) based on its parent’s computed height if only min-height is used.
To correct this, you could add height: 100% to:
.mobile {
min-height: 100%;
}
I have two elements that are floated left. One is the first child of the body, and the other is the first child of a container that is the second child of the body.
...
<body>
<div class='child'>
</div>
<div class='container'>
<div class='child'></div>
</div>
</body>
...
The container has a fixed width and is centred using 'margin: 0 auto;'. The intention was to allow the container child to stay left but accommodate the body child when the window is small.
The fiddle is here:
http://jsfiddle.net/mrSav/7/
This solution works fine in Chrome; you'll notice that the container child happily moves over for the body child when you make the window smaller.
However in Firefox when you make the window smaller the container child overlaps the body child.
For both children I added a hover state which effectively 'pokes the DOM' and forces Firefox to re-flow the page. When you hover the mouse over the children the page corrects itself and the children snap into the 'correct' position.
Is this a bug? Is there a work-around?
UPDATE - Container does flow under first child of body
Still using media-queries, but changing a few things to allow absolute positioning of the container child relative to the window instead of parent: DEMO
Remove position: relative from container. Separate the two child divs css and change a few styles on the container child like this:
.child {
width: 100px;
height: 200px;
background-color: white;
border: 2px dashed black;
margin: 0px;
}
body > .child {
float: left;
z-index: 1;
}
.container > .child {
position: absolute; //relative to window since parent has no position
left: 100px;
}
Then use media-query above 700px to change position to relative and left to auto:
#media screen and (min-width: 700px) {
.container > .child {
position: relative; //override absolute position
left: auto; //override left: 100px
}
}
ORIGINAL - Container doesn't flow under first child of body.
I have no idea what is causing this (I would guess it's the one floated item being taken out of the flow treated differently by Firefox), but here's a work around using media-queries: DEMO
With fixed widths, you can do something like this:
.container { //use margin-left: 100px until the total width of the window is 700px (500px + 100px + 100px = container width + 100px on either side )
margin: 0 0 0 100px;
}
#media screen and (min-width: 700px) { //700px to account for 100px of left div (.container is centered at this size)
.container {
margin: 0 auto;
float: none;
}
}
I would also add * {box-sizing: border-box;} (with appropriate prefixes, -moz-, -webkit-) to account for any borders/padding.
I'm building this 15 page website so I really want to make my main container ( the light grey one ) be flexible in height.
When I select specific pixel height on my home page ( the only page so far ) everything is great but when I change it to 100% height, my container completely disappears. Is there anything I should do differently?
My link:
http://dariawdesign.com/acupuncture/StamfordAcupunctureHome.html
CSS for the container:
#maincontainer {
width: 1110px;
height: 3900px;
background-color: #E6E7E8;
margin-left: auto;
margin-right: auto;
margin-top: -16px;
}
Don't set your height to a pixel value, let it be auto. Then add overflow: hidden to your #maincontainer styles to expand the container to fit its floated children.
I have a parent div with a max height/width set. I was wondering if it's possible to set the two child divs to automatically adjust their height based on a percentage using just CSS?
HTML:
<div id="parent">
<div id="top"></div>
<div id="bottom"></div>
</div>
CSS:
html, body {
height: 100%;
width: 100%:
}
#parent {
max-width: 400px;
max-height: 600px;
}
#top {
height: 30%;
}
#bottom {
height: 70%;
}
The intended implementation of this would be for a mobile display that fills the screen height proportionally without forcing a vertical scroll.
EDIT:
I now realize that height percentages of the parent will work if you have a fixed parent height. The question still stands as to whether there is a way just using CSS to allow for a flexible height that matches the screen size. It's seems like this will not be possible only using CSS and require JS intervention.
Theres nothing wrong with your code. Just adding a 100% height as well as width to the divs yields what you want. The max-width/height doesn't force any values (leaves height/width at auto). Here is a working fiddle:
http://jsfiddle.net/b6HVa/
#parent {
width: 100%;
height: 100%;
max-height: 600px;
max-witdh: 400px;
}
I think you are doing right, if anything going wrong, please show a demo. Or try to set
#top{max-height: 30%;}
#bottom{max-height: 70%;}
Or add min-height: {some value}px; to your div.