I am trying to float my sidebar to the left and my slider to the right however, my images are out of the document flow.
Basically what I'm trying to do is when the user resizes the browser window, the images will shrink (which is why I am using max-width: 100%).
View in Chrome to see the issue
You can try using width : 100% for your main class like below.
.main {
position: relative;
float: right;
max-width: 600px;
margin: 0;
width: 100%;
}
EDIT:
You have edited your markup design. You have added a new content div to outside of your article div.
EDIT
#page-wrap {
max-width: 960px;
min-height: 100%;
height: auto !important;
padding-bottom: 40px;
margin: 0 auto;
position: relative;
}
#sidebar {
position: absolute;
width: 300px;
left: 0;
top: 130px;
}
.content {
max-width: 600px;
position: absolute;
left: 360px;
top: 130px;
right: 0;
}
If you change your classes this way, when the browser is resized, the image will be resized.
You can look at simple demo about this problem.
http://jsfiddle.net/qCQ9H/2/
Related
I loosely followed a basic CSS lightbox template from w3 schools for modal lightboxes. I haven't gotten to the Javascript yet, but just laying out the look and style of the lightbox.
I have a fixed position div element serving as the grey background, and inside that the "lightbox-content" div to hold an iframe of a Vimeo link. I followed a workaround to make the iframe responsive by containing it inside another div and adjusting the styling. I want the max-width of my iframe to be 1280px, but up to 100% width on anything smaller.
Everything works great on smaller screens, the iframe and contained link fills the width, stays vertically centered, and scales with the page. However, when I go above the 1280, the iframe moves in all sorts of weird ways. I'd like to have it so when the page width goes about 1280 or so,the iframe just stays at a fixed size in the center of the screen at 1280px wide.
I tried using an #media query to change some of the CSS rules, but I'm getting so lost in the position after several hours of trying. I think what's throwing me is having so many div with different types of positioning inside each other, and also not clearly understanding how to properly clear CSS rules within a media query.
Is there anything obvious I've done wrong that I could fix to help resolve the issue? It's hard to see the effect in the tiny result window, so if there's a way to make it full-screen in the browser, hopefully you can see what I'm talking about.
.lightbox {
display: block;
position: fixed;
left: 0;
top: 0;
overflow: auto;
padding-top: 0px;
z-index: 1;
background: rgba(0, 0, 0, .85);
width: 100%;
height: 100%;
}
.lightbox-content {
position: absolute;
width: 100%;
height: auto;
max-width: 1280px;
max-height: 720px;
top: 45%;
left: 50%;
right: 50%;
margin-top: -25%;
margin-left: -50%;
}
.responsive-container {
position: relative;
overflow: hidden;
padding-bottom: 56.25%;
}
.responsive-iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
#media only screen and (min-width: 1299px) {
.lightbox {
display: block;
position: fixed;
left: 0;
top: 0;
overflow: hidden;
padding-top: auto;
z-index: 1;
width: 100%;
height: 100%;
}
.lightbox-content {
position: relative;
width: 1280px;
height: 720px;
max-width: none;
max-height: none;
top: 0;
left: 0;
right: 0;
margin-top: auto;
margin-left: auto;
}
.responsive-container {
position: relative;
overflow: hidden;
padding-bottom: 56.25%;
}
.responsive-iframe {
position: absolute;
width: 100%;
height: 100%;
border: 0;
}
}
<div id="myLightbox" class="lightbox">
<div class="lightbox-content">
<div class="responsive-container">
<iframe class="responsive-iframe" id="lightbox-window" name="lightbox-window" src="https://player.vimeo.com/video/261201719" frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
</div>
</div>
I've a fixed side bar on the right side of the page (position: fixed)
But it's contents are not fully visible as it's not scrolling with the page scroll. I could have added overflow-y: scroll in the .sidebar{} css settings. But don't want a separate scroll bar for sidebar. Is there an option to make it scroll with the full page scroll.
Here is my css settings for sidebar :
.sidebar {
text-align: center;
padding: 2rem,1rem;
color: rgba(255,255,255,.5);
background-color: #202020;
top: 0;
bottom: 0;
}
If you want to debug to see what went wrong, here is it running live : https://pagefault.me
Thanks
Based on the answer I suggested in my comment, I was able to work in chrome to arrive at the css below.
1) Add some css to the .sidebar-nav component
nav.sidebar-nav {
position: absolute;
overflow-y: scroll;
top: 100px; /*100px to give some room for the sidebar heading (without this, absolute position will make the nav overlap)*/
left: 15px; /* you can make this zero and add `padding-left: 15px` */
bottom: 15px; /* leave some room for copyright section */
right: -17px; /*this may vary from browser to browser (i suggest using the width of the widest scrollbar, then adjust for padding-right)*/
padding-right: 15px; /*padding to prevent the text from flowing off screen*/
}
2) The .container class becomes
.sidebar .container{
max-width: 38rem;
padding-left: 1rem;
padding-right: 1rem;
margin-left: auto;
margin-right: auto;
height: 100%;
position: relative;
overflow: hidden;
}
3) Make sure the footer bit remains at the bottom after making .sidebar-nav absolute
.sidebar .container > p:last-of-type {
position: absolute;
bottom: -15px;
}
Of course as mentioned in the original solution, you have to test the scrollbar widths in different browsers to arrive at the right width to use in place of right: -17px in step 1.
Use absolute position instead of fixed as you want it to scroll it along with the page.
body {
margin: 0;
padding: 0;
position: relative;
}
main {
position: absolute;
top: 0;
left: 0;
width: 80%;
height: 300vh;
background: beige;
}
aside {
position: absolute;
top: 0;
right: 0;
width: 20%;
height: 300vh;
background: black;
color: white;
}
<main></main>
<aside><aside>
A flex box solution without positioning :
body {
margin: 0;
padding: 0;
display: flex;
}
main {
width: 80%;
height: 300vh;
background: beige;
}
aside {
width: 20%;
height: 300vh;
background: black;
color: white;
}
<main></main>
<aside></aside>
Page is here
I am using a sticky footer, which works fine everywhere but my portfolio page. The gallery is relatively positioned, and is overflowing from it's parent div. The footer is sticking to the bottom of the parent, rather than the page.
Help? Preferably in a way where I don't have to rewrite all my code?
Please try this one i hope it will helpful to you.
html, body {
height: 100%;
}
header {
background: #fff;
position: relative;
z-index: 100;
}
.content2 {
clear: both;
margin: 0 auto;
padding: 0;
text-align: center;
width: 70%;
}
.gallery {
display: table;
height: 100%;
margin-left: auto;
margin-right: auto;
margin-top: auto;
position: relative;
width: 100%;
}
#footer-block {
bottom: 0;
position: fixed;
width: 100%;
}
Thanks
Fixed it by coding body and html to 110% height, footer wrapper to 100% height, and adding page wrapper with 100% height.
i need to make a div position absolute and make it in center but i used does not make it happen. i have gone crazy trying to make it to the center.
i have tried using left and right value to 0. it should have made the div to the center automatically.
need to figure out what went wrong?
help please!
here is the code that i have tried and stuck
.slider-wrap {
width: 1000px;
height: 500px;
left: 0;
right: 0;
top: 100px;
background: #096;
z-index: 99;
margin: 0 auto;
}
You forgot to set the position to absolute
.slider-wrap {
width: 1000px;
height: 500px;
left:0; right:0;
top:100px;
background:#096;
z-index:99;
margin:0px auto;
}
Add position:absolute;
.slider-wrap {
position:absolute;
width: 1000px;
height: 500px;
left:0; right:0;
top:100px;
background:#096;
z-index:99;
margin:0px auto;
}
The proper way to center a div is as such:
.slider-wrap {
...
margin-right: auto;
margin-left: auto;
}
Also note that z-index will not work unless you set the position attribute. ie: position: absolute;
You need to add position: absolute; to your css for absolute positioning.
Note: Also add position: relative; to the parent element you whish to use as wrapper.
So for example:
.slider-container {
position: relative;
width: 100%;
height: 100%;
...
}
.slider-wrap {
position: absolute;
...
}
The width and height of 100% is optional, just added it in case you want the container to take up the whole remaining space or the whole page if it's right after the opening body tag...
To position the slider-wrap in the center of the screen (so both horizontal and vertical centered), try this:
html, body {
width: 100%;
height: 100%;
}
.slider-container {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
...
}
.slider-wrap {
position: absolute;
width: 1000px;
height: 500px;
top: 50%;
left: 50%;
margin-top: -250px; // half the height
margin-left: -500px; // half the width
...
}
If you're able to make the slider-wrap display inline with e.g. display: inline-block; (keep browser support in mind with this one), then you could use the following instead:
.slider-container {
position: relative;
width: 100%;
height: 100%;
text-align: center; // this one makes the slider-wrap center horizontally
...
}
.slider-wrap {
position: relative;
display: inline-block;
width: 1000px;
height: 500px;
vertical-align: middle; // this one does the vertical centering
...
}
Another option is using display: table-cell;. It's about the same as the previous one:
.slider-container {
position: relative;
display: table;
width: 100%;
height: 100%;
text-align: center;
...
}
.slider-wrap {
position: relative;
display: table-cell;
width: 1000px;
height: 500px;
vertical-align: middle;
...
}
Also line-height: ?px; will make vertical centering possible. But I think this answer is long enough now :-P
Give it a try. Fiddle around with this until you're happy with the result :-)
Try this it should work fine.
display:block;
For some reason the margin of my content area, 150px top isn't working in internet explorer so that the content is going underneath the header. any help? I know generally fixed is a bit weird in internet explorer, but weirdly this seems to be working, it's just the content is starting off at the top of the page rather than 150px down.
html {
overflow: -moz-scrollbars-vertical;
overflow-y: scroll;
overflow-x: auto;
}
body {
background-color: #FBFBFB;
margin:0;
padding:0;
}
#header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 150px;
background-color: #FBFBFB;
z-index: 100;
}
#sidebar {
position: fixed;
top: 150px;
left: 0;
width: 275px;
height: 100%;
z-index: 100;
}
#content {
width: 837px;
margin-top: 150px;
margin-left: 325px;
overflow: auto;
}
Do you have a link that we can check?
Try "padding-top: 150px" instead, that mostly works unless there is something preventing you from doing that. Otherwise, try the regular tricks with "zoom: 1", "display: block", "position: relative" if they are applicable.