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%
Related
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);
}
I wasn't sure of the best way to explain this, but if you look at the example snippet in Chrome or Safari, the orange div does not cause the document to scroll horizontally when the window is narrower than the blue container. This is the desired behavior.
However, in Firefox, if you make the window narrow it counts the orange box as content that needs to be able to be scrolled to, causing the document to scroll to the right in an odd way that shifts the body content to the left and is ugly. What's also strange is that you'll notice the green box on the left DOESN'T cause it to have scrollable space to the left...is this a bug, or why is this happening?
Anyone else encountered this?
* {
box-sizing: border-box;
}
.wrapper {
max-width: 700px;
height: 200px;
margin: 0 auto;
}
.banner {
width: 100%;
height: 100%;
padding: 10px;
background-color: blue;
position: relative;
transform: scale(1);
color: #ffffff;
}
.banner:before, .banner:after {
content: '';
width: 100px;
height: 100%;
position: fixed;
left: -100px;
top: 0;
background-color: green;
}
.banner:after {
left: 100%;
background-color: orange;
}
.content {
width: 100%;
height: 300px;
padding: 10px;
background-color: #f1f1f1;
margin-top: 40px;
}
<div class="wrapper">
<div class="banner">Banner</div>
<div class="content">Content</div>
</div>
You can wrap that in an element that will scale with the viewport and set overflow: hidden on that element. You can also remove the transform: scale() from .banner and use position: absolute on the pseudo elements, unless scale(1) is needed for some reason.
* {
box-sizing: border-box;
}
header {
overflow: hidden;
}
.wrapper {
max-width: 700px;
height: 200px;
margin: 0 auto;
}
.banner {
height: 100%;
padding: 10px;
background-color: blue;
position: relative;
color: #ffffff;
}
.banner:before, .banner:after {
content: '';
width: 100px;
height: 100%;
position: absolute;
left: -100px;
top: 0;
background-color: green;
}
.banner:after {
left: 100%;
background-color: orange;
}
.content {
height: 300px;
padding: 10px;
background-color: #f1f1f1;
margin-top: 40px;
}
<header>
<div class="wrapper">
<div class="banner">Banner</div>
<div class="content">Content</div>
</div>
</header>
I am trying to set the margin for multiple div elements inside a container div. Here is the HTML:
<div id="container">
<div id="square"></div>
<div id="square1"></div>
<div id="square2"></div>
</div>
Here is the CSS:
#container {
background: #ccc;
width: 200px;
height: 500px;
position: absolute;
overflow: initial;
}
#square {
margin-top: 10px;
height: 50px;
background: green;
}
#square2 {
margin-top: 275px;
height: 55px;
background: black;
}
Now, say I want to edit the margin of square 1. Here is the updated CSS:
#container {
background: #ccc;
width: 200px;
height: 500px;
position: absolute;
overflow: initial;
}
#square {
margin-top: 10px;
height: 50px;
background: green;
}
#square2 {
margin-top: 275px;
height: 55px;
background: black;
}
#square1 {
margin-top: 55px;
height: 50px;
background: red;
}
The margin of square 1 is correct. However, it messes up the margin of square2 because now the top margin is measured from square1 instead of the container div. How do I set the margins of all the sibling divs to where they are measured from the container, regardless of what the other sibling divs are added/removed? Any help would be greatly appreciated.
your will need to give position absolute and width 100%; you can check the js fiddle
Js fiddle
like this for every square
#square {
margin-top: 10px;
height: 50px;
background: green;
position:absolute;
width:100%;
}
You're better off dumping these square divs into a relative div and have an absolute position for each square div. You kind of lucked out because you know the height of each of your square divs.
So your HTML stays the same. The reason you put absolute within the relative is so that the absolute value plays into the #container field instead of body.
Your CSS changes however:
#container {
background: #eee;
width: 200px;
height: 500px;
position: relative;
border: 10px solid green;
}
#square {
margin-top: 10px;
position: absolute;
height: 50px;
left: 0;
right: 0;
background: green;
}
#square2 {
margin-top: 275px;
height: 55px;
position: absolute;
background: black;
left: 0;
right: 0;
}
#square1 {
margin-top: 55px;
position: absolute;
left: 0;
right: 0;
height: 50px;
background: red;
}
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/
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;