My container disappears when I make it 100% high - html

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.

Related

Fitting ng-bootstrap carousel on div inside ng-bootstrap modal

i've been trying to properly set the css properties to have a ng-bootstrap carousel image fit into a given space (div) inside a custom ng-bootstrap modal. Watch this forked stackblitz code.
As seen in the sample source, the image overlaps the given space (height) of the modal as well as the col-8 where it is placed.
How do i make carousel follow the size of its parent col-8? so as to not overlap with modal size.
UPDATE
For those who can't see the issue, you can visit the actual app here
After some trial and error, i've come to this point. Only carousel-inner and its children does not follow its parent div which is ngb-carousel.carousel-modal. See this image below
As shown in the image above, i can't make carousel-inner follow the size of its parent ngb-carousel.carousel-modal which already follow the modal height. it always overlaps and extends over the carousel-modal height. Do note that i set them to max-height:100% to make it responsive.
Basically you just need to bring height 100% down the hierarchy of tags.
To set the modal-body height I set 100% - Modal Header Height (69px).
.modal-body {
height: Calc(100% - 69px);
}
ngbd-modal-content, ngb-carousel, .carousel-inner, .modal-body .row {
height:100%;
}
Stackblitz: https://stackblitz.com/edit/angular-csyyp8-heb7xf?file=styles.css
Give the image a fixed height within the container (that has a fixed height too). Then position the carousel caption accordingly, like so:
img {
height: 650px; /*adjust for your project*/
width: auto !important;
}
#media only screen and (max-width:767px){
img { width: 100% !important
}
}
.carousel-caption {
position: absolute;
bottom: 20px;
left: 3%; /*adjust for your project*/
z-index: 10;
padding-top: 20px;
padding-bottom: 20px;
color: #fff;
text-align: center;
max-width: 50%; /*adjust for your project*/
}
Play around with the values til it fits your needs.
After hours of understanding height, max-height and its relation to its parent tag. I've came up with the fix. see updated stackblitz here.
Basically, i made the image resize to fit in parent content giving the parent content as well as the img a fix height. Therefore, it will make the image auto resize to fit its parent div.

Centering fixed width layout while keeping a minimum width scrollable

I am working on a graphically intense layout, so to keep file size down I am limiting the layout to a 1600 pixel fixed width.
Of the 1600 pixels, the important content falls within the center 1230.
I am trying to find a way to center the layout in the browser while keeping the content scrollable.
This solution does not center when the browser window is less than 1600px
#page{margin: 0 auto;}
This solution makes left hand side of content unreachable as the browser width gets smaller.
#page{position: absolute; width: 1600px; top: 0; left: 50%; margin-left: -800px; }
Thanks for any help.
If you want to center an element in a wrapper that is smaller than the element and you can use absolute:
#page{
position: absolute;
width: 1600px;
top: 0;
left:-100%;
right:-100%;
margin-left: auto;
margin-right: auto;
}
example:http://jsfiddle.net/pavloschris/T5d8W/
I'm not sure you need to limit width in pixels. It isn't very portable across devices, and it's not clear why you're doing it. However, if you want to center a 1230px region within 1600px, you can just use fixed-width margins of size (1600-1230) / 2.
For more flexible solutions, are flex-boxes an acceptable technology? If so, they make this task trivial. Make page container with:
display: flex;
flex-direction: column;
width: 100%;
align-items: center;
Then make your items
flex: 0 0 auto
or set a specific width instead of auto.
This solution solves the inaccessible content issues.
If you have the following structure
#wrap.constrained > #layout > #content.constrained
You can use the constrained class to limit both #wrap and #content to the desired width and center both horizontally by setting side margins to "auto".
You could then position #layout absolutely, have it be bigger than .constrained, and use a combination of left positioning and negative left margin to center it in regards to #wrap.
Here's an example: http://jsfiddle.net/caKA7/

container moving while decreases the browser window

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/

Scale divs of the SAME ROW proportionally to the same height & Have Min Height

So I've seen this post: Can I scale a div's height proportionally to its width using CSS? and it sort of answers my Question. I can get divs to sclae porpotionally as I need. However, what I also need is to set a minimum height for those divs.
In this fiddle http://jsfiddle.net/FBZuB/1/ I have set up what I am trying to accomplish. The BLUE div is a general wrapper that then defines the height of the RED div based on the width of the BLUE div. However when I try to change the min-height on the RED div, the divs that I want to scale AND have a min-height, unexpected results occur.
I would think once I scale DOWN to the min-height point, the div would stop scaling and only change in width. However, it seems like setting the min-height just sets some sort of base point for the whole calculation and everything scales continually. I hope this makes sense.
The RED divs should scale up and down, but at a certain point, when the RED div hits its minimum height, it should stop scaling in height and only in width. I have accomplished this before with pure javascript, but since I read the post above, I am trying to get a CSS only solution.
Here is the code. You can ignore the content for now... I am focuses mainly on the red blocks. Proportionally scale width/height, until it hits the min-height and then it should stop scaling the height and only the width.
HTML
<div style="background: blue; width: 70%;">
<div id="left">
<div class="content"></div>
</div>
<div id="right">
</div>
</div>
CSS
div {
margin: 5%;
float: left;
background: red;
position: relative;
}
#left {
width: 50%;
padding-bottom: 60%;
min-height: 100px;
}
#right {
width: 30%;
padding-bottom: 60%;
min-height: 100px;
}
.content {
position: absolute;
width: 90%;
margin: 5%;
background: green;
top: 0;
left: 0;
height: 90%;
}
Unfortunately plain CSS is unable to calculate any expressions in all browsers except IE, and as such you will have to use at least some JavaScript to dynamically calculate the width.
I would probably do something like this in your html file.
Since you didn't specify how you are resizing your div, I'll assume that it's just when the window resizes.
<body onresize="
var left = document.getElementById('left');
if (left.clientHeight < left.style.min-height) {
left.style.cheight = left.style.min-height;
}
">
</body>

Footer Background image shrinks when changing width of window

I have a footer i created for a website, but for some reason when i change the width of the window the background image seems to just disappear throughout the right side as i'm shrinking the width of the window.
The footer is supposed to stretch 100% accross the bottom of the screen and does so until i start shrinking the width of the window to a certain point.
You can see an example of my issue Here
Any ideas how to fix this? I am totally stumped. Maybe i did something wrong with width?
The width of #footer is set to auto, and the content within (#content-wrapper) has a fixed width.
This is causing the horizontal bars to appear.
To solve this, you can set overflow:hidden to the parent div (#footer).
Try this:
#footer {
background-image: url("images/footer-bg.png");
background-repeat: repeat-x;
height: 451px;
margin: auto 0;
width: 100%;
overflow: hidden; //What you're looking for.
}
If you also want the inner div (#content-wrapper) to dynamically resize itself, use a percentage, instead of a pixel dimension for width:
#footer #content-wrapper {
height: 451px;
margin: auto;
width: 83%;
}
Hi i have check to your demo page you have define your footer width 1265px and now
than your define min width your html or body as like this
body, html {
min-width: 1265px;
}
because your max width is 1265 define to your footer so that you define same width your body or html