I have a demo here - https://codepen.io/mt-ttmt/pen/mLMGvr
I have a horizontally scrolling content div
I need to have a margin either side of this scrolling content.
I have done this using calc.
When page scrolls the scrolling content sticks to the top of the page using position: fixed;
When this happens I lose the margins.
How can I keep the margins with position: fixed;
html, body{
height: 100%;
}
body {
background: grey;
font-family: sans-serif;
margin: 0;
}
.upper-content{
background: red;
height: 250px;
}
.page-content{
position: relative;
background: white;
height: 2000px;
max-width: 900px;
margin: 0 auto;
}
.content-wrapper{
position: relative;
}
.header-scroll{
border: 1px solid yellow;
left: 50%;
overflow-y: scroll;
position: absolute;
max-width: 900px;
z-index: 20;
transform: translateX(-50%);
width: -webkit-calc(100% - 50px);
}
.content{
display: flex;
float: left;
div{
background: lightgrey;
font-size: 20px;
padding: 40px;
margin-right: 5px;
width: 100%;
&:last-of-type{
margin-right: none;
}
}
}
.fixed{
position: fixed;
top: 0;
//margin: 0 25px 0 25px;
//width: calc(100% - 50px);
}
Change your .fixed class width value.
.fixed{
width: calc(900px - 50px);
}
Related
I know that fixed positioning does not work relative to the parent, only to the browser window and the solution is absolute, but I also have a problem with that.
In the div in which I need a scroll inside, I have to put the icon always visible in the bottom right corner.
My fiddle: https://jsfiddle.net/nck7o0jL/
Below is my code.
.big {
height: 600px;
width: 600px;
border: 2px solid black;
}
.small {
height: 300px;
width: 300px;
border: 2px solid red;
overflow: auto;
position: relative;
resize: both;
}
img {
width: 30px;
height: 30px;
position: absolute;
right: 15px;
bottom: 15px;
}
<div class="small"><img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-close-circled-128.png">
<div class="big">
</div>
</div>
As you can see, by stretching the div.small the icon is held, but during the scroll it is not.
Will someone give a helping hand?
You can approximate this using flexbox and position:sticky
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.big {
height: 600px;
width: 600px;
flex-shrink: 0;
}
.small {
height: 300px;
width: 300px;
border: 2px solid red;
overflow: auto;
resize: both;
display: flex;
}
img {
width: 30px;
height: 30px;
margin: auto 0 15px auto;
position: sticky;
order: 1;
right: 15px;
top: calc(100% - 45px);
}
<div class="small"><img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-close-circled-128.png">
<div class="big">
</div>
</div>
I try to have horizontal div to fill all the empty space of a container.
I didn't succeed to make the middle div (.element-description) to fill all empty gap (like in height: auto). (all other div have a defined height)
I tried with display:table, it near works but create some display bug in IE9.
I tried with css calc but it's not cross browser and it didn't solved all the problem.
I really don't know what to do. Maybe it's impossible in css?
css:
.element{
position: absolute;
overflow: hidden;
z-index: 100;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 400px;
height: 500px;
background: grey;
}
.element-back {
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
}
.title {
position: relative;
overflow: hidden;
width: 100%;
height: 40px;
border: 1px solid black;
box-sizing: border-box;
line-height: 40px;
}
.element-title-separator {
position: relative;
overflow: hidden;
height: 2px;
width: 100%;
border-bottom: 1px solid rgba(0,0,0,0.05);
-webkit-box-shadow: inset 0px 1px 2px 0px rgba(0,0,0,0.2);
-moz-box-shadow: inset 0px 1px 2px 0px rgba(0,0,0,0.2);
box-shadow: inset 0px 1px 2px 0px rgba(0,0,0,0.2);
}
.element-image {
position: relative;
overflow: hidden;
min-width: 100%;
height: 14.5%;
opacity: 0.8;
}
.element-image img{
position: absolute;
width: 100%;
height: auto;
margin-top: -30%;
}
.element-description {
position: relative;
overflow: hidden;
width: 100%;
margin: 0 auto;
}
.element-description > div{
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
}
.element.blog .element-description > div > div{
overflow: hidden;
position: absolute;
height:100%;
}
.element-read-more {
position: relative;
overflow: hidden;
min-width: 100%;
min-height: 40px;
}
.element-informations {
position: relative;
overflow: hidden;
min-width: 100%;
min-height: 40px;
}
fiddle without table
fiddle with display table
hope that someone can help me...
Why do you need to set position: absolute to the .element? Can't you set it to relative and use height: auto?
Is this what you're trying?
http://jsfiddle.net/jonigiuro/UuFSg/262/
.element{
position: relative;
overflow: hidden;
z-index: 100;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 400px;
height: auto;
background: grey;
}
The fixed value here must be the header and footer height, and you need to set the top and bottom of your content section whit the same value of footer and header height plus the value of the border-width here (100px + 5px).
I hope it help
html,body {
margin:0;
padding:0;
height:100%; /* needed for container min-height */
background:gray;
font-family:arial,sans-serif;
font-size:small;
color:#666;
}
h1 {
font:1.5em georgia,serif;
margin:0.5em 0;
}
h2 {
font:1.25em georgia,serif;
margin:0 0 0.5em;
}
h1, h2, a {
color:orange;
}
p {
line-height:1.5;
margin:0 0 1em;
}
.box{
border: 5px solid green;
}
#container{
position: absolute;
left: 0; right: 0; top: 0; bottom: 0;
min-width: 60%;
min-height: 400px;
width: 1024px;
height: 100%;
margin-left: auto;
margin-right: auto;
border: none;
bor
}
/** Test html classic page */
#header{
display:block;
overflow: visible;
width: auto;
height: 100px;
margin: 0; padding: 0;
}
#content{
position: absolute;
/** The border over lap so 5px must be add*/
top: 105px; bottom: 105px;
right: 0; left: 0;
}
#footer{
position: absolute;
overflow: visible;
height: 100px;
right: 0; left: 0; bottom: 0;
margin: 0; padding: 0;
}
I want to vertical center a text inside a responsive div but I really don't find the way to do it without new CSS3 tricks..
Here a fiddle : http://jsfiddle.net/M8rwn/
.iosSlider {
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
}
/* slider */
.iosSlider .Slider {
width: 100%;
height: 100%;
}
/* slide */
.iosSlider .Slider .Slide {
float: left;
width: 100%;
}
.iosSlider .Slider .Slide img{
width: 100%;
height: auto;
}
.slider-prevContainer {
position: absolute;
top: 0;
left: 10px;
width: 50px;
height: 50%;
color: #595e62;
text-align: center;
}
.slider-nextContainer {
position: absolute;
top: 0;
right: 0;
width: 50px;
height: 100%;
opacity: 1;
color: #595e62;
background: blue;
}
.slider-next {
position:absolute;
height: 50%;
width: 100%;
top: 25%;
text-align: center;
vertical-align: middle;
background: red;
box-sizing: border-box;
font-size: 50px;
}
#single-slider {
float: left;
width: 500px;
height: 500px;
min-width: 0;
margin: 0;
border: none;
background: #000;
}
Okay, I think I have a solution.
Adjusted HTML:
<div class="slider-next">
<div id='slider-next-inner'>
>
</div>
</div>
Added CSS:
#slider-next-inner{
position:relative;
top:50%;
margin-top:-30px;
/* Margin-top is 1/2 the elements height (currently it is 59px) */
}
Link: http://jsfiddle.net/M8rwn/18/
I'm having a bit of trouble with a div, my website has one wrapper sized height: 100%; this wrapper contains various divs like a header, slider and a content div. The only problem is the content div gets pushed out of the wrapper div for some mysterious reason.
html {
overflow-y: scroll;
height: 100%;
position: relative;
}
a {
outline: none;
}
img {
width: 100%;
border: none;
-moz-border-radius: 20px;
border-radius: 20px;
}
body {
width: 100%;
height: 100%;
background-color: yellow;
margin: 0px 0px 0px 0px;
}
.wrapper {
width: 87%;
height: 100%;
background-color: red;
margin: 0 auto;
}
.header {
width: 100%;
height: 150px;
background-color: green;
float: left;
overflow: hidden;
}
.logo {
width: 7%;
height: 114px;
margin: 18px 0% 18px 3%;
float: left;
background-image: url("..//img/logo.png");
background-size: 100%;
background-repeat: no-repeat;
}
.slogan {
width: 30%;
height: 100px;
background: orange;
margin: 25px 13% 25px 13%;
float: left;
}
.nav {
width: 31%;
height: 150px;
background-color: purple;
float: left;
margin: 0% 3% 0% 0%;
}
.search {
width: 100%;
height: 50%;
background: blue;
float: left;
}
.menu {
width: 100%;
height: 50%;
float: left;
background: grey;
}
.slider-container {
width: 100%;
height: 100%;
background-color: white;
}
.main-content {
width: 100%;
height: 100px;
background-color: pink;
float: left;
}
.column {
width: 31%;
height: auto;
background-color: orange;
float: left
}
/* SLIDER */
.caption {
width: 500px;
background-image: url("..//img/caption-bg.png");
background-size: 100%;
position: absolute;
z-index: 99;
overflow: hidden;
margin-top: 7%;
margin-left: 5%;
-moz-border-radius: 20px;
border-radius: 20px;
}
.caption-text {
max-width: 460px;
overflow: hidden;
margin: 20px;
}
.wrapper .slider-container #slideshow {
float: left;
position: relative;
width: 100%;
}
.wrapper .slider-container #slideshow > div {
position: absolute;
}
You can see a live demo at http://k2stuc.nl/test/
I don't understand your question 100%. But I saw an issue, the navigation behind the slideshow is because your slides, .wrapper .slider-container #slideshow > div has set to position:absolute.
Try setting .slider-container height to a fixed height. Otherwise slides will be above the content.
you are floating things that should not be floated
i.e .header, .main-content,#slideshow - none of these need floats - body should not have height:100%;
give .slide-container a fixed height in pixels not a percentage.. doing the above will fix your problem
Setting height: 100% on the <body> sets its height to 100% of the viewport.
Now, the viewport is as high as the browser window's inner-height; and that changes when you resize the browser itself.
Any direct child of the <body>, set to height: 100% then inherits the viewport's height.
That's part of how a lot of the 'parallax' websites do their thing.
I think the problem comes from the fact the slider div has height:100%
This is my code:
.divUserRepCont
{
position: absolute;
top: 0;
left: 105px;
width: 195px;
height: 25px;
}
.divUserContCon
{
width: auto;
height: 100%;
background-color: red;
}
.divUserCon
{
width: 50px;
height: 20px;
}
HTML:
<div class="divUserRepCont">
<div class="divUserContCon">
<div class="divUserCon">
</div>
</div>
</div>
I am expecting a red bar of width 50px, but instead the auto width "divUserContCon" is filling up the entire 195px of it's parent div. Why is this?
EDIT:
The purpose of divUserContCon having an auto width is because of this:
divUserCon's size will be changing dynamically, and it will have a background colour itself.
divUserContCon, will be the container for divUserCon, which itself will have a background colour AND padding.
So if divUserCon is 50px wide, with a green background, divUserContCon will be 50px wide (auto) + some padding and it's background colour.
width:50px;
Needs to be put in divUserContCon. You can't rely on auto to only take up the width of any child divs.
Try this
<style type="text/css">
.divUserRepCont {
position: absolute;
top: 0;
left: 105px;
width: 195px;
height: 25px;
}
.divUserContCon {
width: auto;
height: 25px;
}
.divUserCon {
width: 50px;
height: 25px;
background-color: red;
}
</style>
If you want your .divUserCon in the center then just add margin: 0 auto; in the css.
This is how I solved it:
.divUserRepCont
{
position: absolute;
top: 0;
left: 105px;
width: 195px;
height: 25px;
background-color: orange;
}
.divUserContCon
{
display: inline-block;
height: 100%;
padding-right: 20px;
background-color: yellow;
}
.divUserCon
{
display: inline-block;
height: 20px;
border-top: 5px solid rgb(62, 62, 62);
background-color: red;
}
I replaced the width: auto with display: inline-block;