I have a page I have 3 separate DIV's aligned, one right, center, then left. Which looks perfect when the page is at default size, however on smaller re-sizes they all 3 could rest on top of one another, which makes them unreadable.
My current CSS, all the same except the right value.
.Cat_One {
margin-left: 2%;
position:fixed;
left: 170px;
min-width: 20%;
max-width: 20%;
max-height: 350px;
overflow: scroll;
overflow-x: hidden;
overflow-y: auto;
}
My body CSS
body {
width: 100%;
min-height: 690px;
min-width: 1275px;
margin-left: -0px;
overflow-x: scroll;
overflow-x: scroll;
}
I just need to figure out a way to stop them from overlapping on resize. Tried many of the similar posts and doesn't seem my case is the same and the suggestions there don't exactly work out.. Perhaps I missed something.
Without more code, my best guess is the issue is with your position:fixed. Dump that. Depending on what you are looking to do, you can do display:inline-block; or use flexbox, or float:left; or if this is tabular data you could even use a table.
Position fixed though, I would put money on that not being what you want.
I had the same issue (Kinda). What i did was add this into the css:
top: 0px;
Right: 0px;
Position: Absolute;
This will make the div lock to the upper right corner of the page, and then use:
Transform: Translate(XXvw, XXvh);
The transform is used to relocate objects to where you want it ^^
You must also specify this in the css for html,body else it won't work:
Min-height: 100vh;
Min-width: 100vw; (100% of the viewport/browser window).
Related
I'm trying to create a lightbox where the current image takes up 90% of the height of the page OR a 900px width, whichever one happens first.
Naturally, I used the code below, expecting it to fail. I was right. I tried using the aspect-ratio property (which is frowned on because of its lack of browser support), but nothing worked.
Anybody know how to achieve this?
/* Basically the lightbox container */
.modal {
position: fixed;
width: 100%;
height: 100%;
}
/* Each image has the class mySlides */
.mySlides {
max-width: 900px;
max-height: 90%;
margin: 15px 5%;
}
Alright, a comment from Amaury Hanser got me on the right track. The solution that worked was using object-fit: contain;. This link helped me learn what that is. The property basically makes an object fit within the borders of its parent container while maintaining its aspect ratio.
This is my code now:
.modal {
position: fixed;
width: 100%;
height: 100%;
}
.mySlides {
max-width: 900px;
max-height: 90%;
object-fit: contain;
margin: 15px 5%;
}
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
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%;
}
I've just noticed and I should have realized but continuing on, If I zoom in on my website everything is screwed up. I'm not entirely understanding how to get it to center and not move objects around.
Example
Zoomed in
http://gyazo.com/d868f6ebb249c8aa0b4a20e8cba24e86
I'm looking for it to stay centered no matter what you do.
Simple answer: wrap your whole site in a container <div> and give it the id "site-container"
Then add this to your CSS
Fluid width:
#site-container
{
width: 90%;
margin-left: 5%;
margin-right: 5%;
}
Fixed width:
#site-container
{
width: 900px;
position: relative;
left: 50%;
margin-left: -450px; /* -(width/2) */
}
Obviously adjust the sizes as necessary
Or with
margin: auto;
I made you a JSfiddle
http://jsfiddle.net/9Mqza/
I apologize if this is a trivial question but I can't seem to figure it out. I have this website and I need the navigation bar on the side, and the rectangle all the way on the right (The one with the "ContentExtender" class) to stretch down to the bottom of the physical page (well, the ContentExtender only needs to stretch as far as the content so it blends, but that's another story). What is the simplest way to do this? I looked it up and found setting the Body's height to 100% should work, but it didn't. I know that's a lot of code to look through, so here is the actual important parts of the code (anything prefixed with "cc" was just an easy way of commenting them out):
.ContentExtender {
background-image: url(bgblack.png);
min-height: 10px;
ccmin-width: 200px;
ccwidth:100%;
margin: 0px 0px 0px 1010px;
position: absolute;
top: 110px;
right: 0px;
left: 0px;
}
.MainParent {
position: absolute;
left:0px;
top:0px;
right:0px;
bottom: 0px;
background-color:rgba(70,70,70,.7);
min-height: 600px;
min-width: 1000px;
max-width: 1000px;
height: 100%;
margin: 0px 10px 0px 10px;
z-index:100;
overflow: hidden;
}
You need to give html, body { height: 100%; } plus make any other parents of the element you want to have height: 100%;, height: 100%;
I recently had a problem where I could not extend to the top of the window, which may be similar. I set:
body {
margin: 0px;
}
In your case, it may be another element. I have seen where all possible elements are intentionally set to a 0 margin, and then the margins desired are re-implemented.
seems like there's a small error in your code try editing your
.ContentExtender
and change it to
#ContentExtender
Then you will be able to fix it, if this method doesn't work try setting the background CSS on the HTML tag of the Content extender like below
html{
height:100%;
background:#ccc url(bgblack.png);
}
the above is an example, so please improvise
Your issue is linked to the fact that a child div cannot directly dictate the behaviour of a parent.
Try one of these on your parent div:
overflow: auto;
display: table;
Or in the child div:
display: table-row;
When you try it, experiment with omitting the "height: blabla" attribute.
Similar problem solved: [1]: CSS - Expand float child DIV height to parent's height