CSS Horizontal Scroll? - javascript

I'm trying to keep my page from having to horizontally scroll.
When I add my navbar and header div to my page, everything works fine. However, when I add my content div it forces my page to scroll left and right. It's no wider than my header so why is this happening?
Here is my code:
body {
min-width: 1024px;
min-height: 700px;
max-width: 1920px;
max-height: 1080px;
width: 100%;
height: 100%;
margin: 0 auto;
background: url(/style/images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
<!-- FOR IE -->
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
}
.overlay {
width: 100%;
height: 100%;
-webkit-box-shadow: inset 0 0 5px rgba(68,105,244,.45);
-moz-box-shadow: inset 0 0 5px rgba(68,105,244,.45);
box-shadow: inset 0 0 5px rgba(68,105,244,.45);
}
.divstyle {
background-color: rgba(247,247,247,.9);
-webkit-box-shadow: 0px 5px 50px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 5px 50px 0px rgba(0,0,0,0.75);
box-shadow: 0px 5px 50px 0px rgba(0,0,0,0.75);
}
#navbar {
height: 50px;
min-width: 1600px;
width: 100%;
margin-bottom: 50px;
}
#header {
width: 1000px;
height: 200px;
margin: 0 auto;
border-radius: 5px;
}
#content {
width: 1000px;
min-height: 500px;
margin: 0 auto;
margin-top: 25px;
border-radius: 5px;
}
Here's my html:
<div id="navbar" class="divstyle">
<div class="overlay">
</div>
</div>
<div id="header" class="divstyle">
<div class="overlay">
</div>
</div>
<div id="content" class="divstyle">
<div class="overlay">
</div>
</div>
http://jsfiddle.net/9mRHT/


It is because of min-width: 1600px; present in
#navbar {
height: 50px;
/* min-width: 1600px; */
width: 100%;
margin-bottom: 50px;
}
This will remove the horizontal scrollbar

Related

How to create a scrolling image collage with image bubbles?

I want to create a scrolling image collage with image bubbles.
I want Like This
I finished making the design, but I can't understand how can I slide those pictures continuously. I mean auto carousel slider. Please Help me.
var frst_Img = document.querySelector(".image1");
var scnd_Img = document.querySelector(".image2");
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: aliceblue;
}
div#container {
width: 1150px;
padding: 5px;
margin: 15px auto;
display: block;
overflow: hidden;
border: 2px solid black;
background: white;
box-shadow: rgb(0 0 0 / 20%) 0px 8px 24px;
}
.wrapper {
width: 100%;
box-shadow: rgb(50 50 93 / 7%) 0px 30px 60px -12px inset, rgb(0 0 0 / 6%) 0px 18px 36px -18px inset;
}
.images {
width: 100%;
height: 175px;
position: relative;
}
.images2 {
width: 100%;
height: 175px;
display: block;
position: relative;
}
.images3 {
width: 100%;
display: block;
height: 175px;
position: relative;
}
.image1 {
position: absolute;
top: 0%;
left: 16%;
width: 125px;
height: 125px;
margin: 10px;
box-shadow:
0 15px 35px rgba(0, 0, 0, 0.1),
0 3px 10px rgba(0, 0, 0, 0.1);
border-radius: 50%;
padding: 5px;
border: 1px solid #cdcdcd;
display: inline-block;
background-image: url(pictures/1.jfif);
background-size: cover;
background-repeat: no-repeat;
animation: upDown 5s infinite;
}
.image2 {
position: absolute;
top: 0%;
left: 50%;
width: 125px;
height: 125px;
margin: 10px;
box-shadow:
0 15px 35px rgba(0, 0, 0, 0.1),
0 3px 10px rgba(0, 0, 0, 0.1);
border-radius: 50%;
padding: 5px;
border: 1px solid #cdcdcd;
display: inline-block;
background-image: url(pictures/2.jpg);
background-size: cover;
background-repeat: no-repeat;
animation: upDown 5s infinite;
}
.image3 {
position: absolute;
top: 0%;
left: 85%;
width: 125px;
height: 125px;
margin: 10px;
box-shadow:
0 15px 35px rgba(0, 0, 0, 0.1),
0 3px 10px rgba(0, 0, 0, 0.1);
border-radius: 50%;
padding: 5px;
border: 1px solid #cdcdcd;
display: inline-block;
background-image: url(pictures/3.jpg);
background-size: cover;
background-repeat: no-repeat;
animation: upDown 5s infinite;
}
#keyframes upDown{
0%{
transform: translateY(0px);
}
50%{
transform: translateY(8px);
}
100%{
transform: translateY(0px);
}
}
.image4 {
position: absolute;
top: 0%;
left: 0%;
width: 150px;
height: 150px;
margin: 10px;
box-shadow:
0 15px 35px rgba(0, 0, 0, 0.1),
0 3px 10px rgba(0, 0, 0, 0.1);
border-radius: 50%;
padding: 5px;
border: 1px solid #cdcdcd;
display: inline-block;
background-image: url(pictures/4.jpg);
background-size: cover;
background-repeat: no-repeat;
animation: upDown2 6s infinite;
}
.image5 {
position: absolute;
top: 0%;
left: 33%;
width: 150px;
height: 150px;
margin: 10px;
box-shadow:
0 15px 35px rgba(0, 0, 0, 0.1),
0 3px 10px rgba(0, 0, 0, 0.1);
border-radius: 50%;
padding: 5px;
border: 1px solid #cdcdcd;
display: inline-block;
background-image: url(pictures/5.jpg);
background-size: cover;
background-repeat: no-repeat;
animation: upDown2 6s infinite;
}
.image6 {
position: absolute;
top: 0%;
left: 70%;
width: 150px;
height: 150px;
margin: 10px;
box-shadow:
0 15px 35px rgba(0, 0, 0, 0.1),
0 3px 10px rgba(0, 0, 0, 0.1);
border-radius: 50%;
padding: 5px;
border: 1px solid #cdcdcd;
display: inline-block;
background-image: url(pictures/6.jpg);
background-size: cover;
background-repeat: no-repeat;
animation: upDown2 5s infinite;
}
#keyframes upDown2{
0%{
transform: translateY(0px);
}
50%{
transform: translateY(-8px);
}
100%{
transform: translateY(0px);
}
}
.image7 {
position: absolute;
top: 0%;
left: 16%;
width: 125px;
height: 125px;
margin: 10px;
box-shadow:
0 15px 35px rgba(0, 0, 0, 0.1),
0 3px 10px rgba(0, 0, 0, 0.1);
border-radius: 50%;
padding: 5px;
border: 1px solid #cdcdcd;
display: inline-block;
background-image: url(pictures/7.jpg);
background-size: cover;
background-repeat: no-repeat;
animation: upDown3 5s infinite;
}
.image8 {
position: absolute;
top: 0%;
left: 54%;
width: 125px;
height: 125px;
margin: 10px;
box-shadow:
0 15px 35px rgba(0, 0, 0, 0.1),
0 3px 10px rgba(0, 0, 0, 0.1);
border-radius: 50%;
padding: 5px;
border: 1px solid #cdcdcd;
display: inline-block;
background-image: url(pictures/8.jpg);
background-size: cover;
background-repeat: no-repeat;
animation: upDown3 5s infinite;
}
.image9 {
position: absolute;
top: 0%;
left: 88%;
width: 125px;
height: 125px;
margin: 10px;
box-shadow:
0 15px 35px rgba(0, 0, 0, 0.1),
0 3px 10px rgba(0, 0, 0, 0.1);
border-radius: 50%;
padding: 5px;
border: 1px solid #cdcdcd;
display: inline-block;
background-image: url(pictures/9.jpg);
background-size: cover;
background-repeat: no-repeat;
animation: upDown3 5s infinite;
}
#keyframes upDown3{
0%{
transform: translateY(0px);
}
50%{
transform: translateY(8px);
}
100%{
transform: translateY(0px);
}
}
<div id="container">
<div class="wrapper">
<div class="images">
<div class="image1"></div>
<div class="image2"></div>
<div class="image3"></div>
</div>
<div class="images2">
<div class="image4"></div>
<div class="image5"></div>
<div class="image6"></div>
</div>
<div class="images3">
<div class="image7"></div>
<div class="image8"></div>
<div class="image9"></div>
</div>
</div>
</div>

Consider the following. This is not the only way to do this, yet it may help lead you to a solution.
$(function() {
var speed = 1;
var canvas = $(".wrapper");
function float(el) {
var left = $(el).position().left;
var top = $(el).position().top;
left -= (speed + Math.random());
top = top + (Math.random() < 0.5 ? -1 : 1);
if (left < (0 - $(el).width())) {
// Element is offscreen
$(el).css("left", "115%");
} else {
$(el).animate({
left: left,
top: top
});
}
}
var timer = setInterval(function() {
$("[class^='image']").each(function() {
float(this);
});
}, 600);
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: aliceblue;
}
div#container {
width: 1150px;
padding: 5px;
margin: 15px auto;
display: block;
overflow: hidden;
border: 2px solid black;
background: white;
box-shadow: rgb(0 0 0 / 20%) 0px 8px 24px;
}
.wrapper {
width: 100%;
box-shadow: rgb(50 50 93 / 7%) 0px 30px 60px -12px inset, rgb(0 0 0 / 6%) 0px 18px 36px -18px inset;
}
div[class^='row'] {
width: 100%;
height: 175px;
position: relative;
}
div[class^='image'] {
position: absolute;
top: 0%;
width: 125px;
height: 125px;
margin: 10px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1), 0 3px 10px rgba(0, 0, 0, 0.1);
border-radius: 50%;
padding: 5px;
border: 1px solid #cdcdcd;
display: inline-block;
background-size: cover;
background-repeat: no-repeat;
}
div.large {
width: 150px;
height: 150px;
}
.image1 {
left: 15%;
background-image: url(https://dummyimage.com/175/ccc/000.png&text=1);
}
.image2 {
left: 50%;
background-image: url(https://dummyimage.com/175/ccc/000.png&text=2);
}
.image3 {
left: 85%;
background-image: url(https://dummyimage.com/175/ccc/000.png&text=3);
}
.image4 {
left: 115%;
background-image: url(https://dummyimage.com/175/ccc/000.png&text=4);
}
.image5 {
left: 0%;
background-image: url(https://dummyimage.com/175/ccc/000.png&text=5);
}
.image6 {
left: 33%;
background-image: url(https://dummyimage.com/175/ccc/000.png&text=6);
}
.image7 {
left: 66%;
background-image: url(https://dummyimage.com/175/ccc/000.png&text=7);
}
.image8 {
left: 100%;
background-image: url(https://dummyimage.com/175/ccc/000.png&text=8);
}
.image9 {
left: 15%;
background-image: url(https://dummyimage.com/175/ccc/000.png&text=9);
}
.image10 {
left: 50%;
background-image: url(https://dummyimage.com/175/ccc/000.png&text=10);
}
.image11 {
left: 85%;
background-image: url(https://dummyimage.com/175/ccc/000.png&text=11);
}
.image12 {
left: 115%;
background-image: url(https://dummyimage.com/175/ccc/000.png&text=12);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div class="wrapper">
<div class="row-1">
<div class="image1"></div>
<div class="image2"></div>
<div class="image3"></div>
<div class="image4"></div>
</div>
<div class="row-2">
<div class="image5 large"></div>
<div class="image6 large"></div>
<div class="image7 large"></div>
<div class="image8 large"></div>
</div>
<div class="row-3">
<div class="image9"></div>
<div class="image10"></div>
<div class="image11"></div>
<div class="image12"></div>
</div>
</div>
</div>
Instead of using CSS to animate the movement, we use jQuery Animate.

If you are able to set up the HTML you won't need to use Javascript.
A simple way is to make sure that you have enough copies of the material you want to scroll and that half of these will at least cover the largest screen size you need to support.
The built-in width of 1150 is too narrow for some common screens, so this snippet has 4 copies, moves them to the left by 50%, then back to the initial position, that way it looks continuous and you can leave CSS (and hopefully the device's GPU) to keep the animation going.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: aliceblue;
overflow: hidden;
}
div#container {
width: calc(1150px * 4);
display: flex;
overflow: hidden;
border: 2px solid black;
background: white;
box-shadow: rgb(0 0 0 / 20%) 0px 8px 24px;
animation: moveleft 60s infinite linear;
}
.block1,
.block2 {
display: flex;
}
.wrapper {
background: ;
display: inline-block;
rwidth: 100vw;
width: 1150px;
box-shadow: rgb(50 50 93 / 7%) 0px 30px 60px -12px inset, rgb(0 0 0 / 6%) 0px 18px 36px -18px inset;
}
#keyframes moveleft {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
.images {
width: 100%;
height: 175px;
position: relative;
}
.images2 {
width: 100%;
height: 175px;
display: block;
position: relative;
}
.images3 {
width: 100%;
display: block;
height: 175px;
position: relative;
}
.image1 {
position: absolute;
top: 0%;
left: 16%;
width: 125px;
height: 125px;
margin: 10px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1), 0 3px 10px rgba(0, 0, 0, 0.1);
border-radius: 50%;
padding: 5px;
border: 1px solid #cdcdcd;
display: inline-block;
background-image: url(pictures/1.jfif);
background-size: cover;
background-repeat: no-repeat;
animation: upDown 5s infinite;
}
.image2 {
position: absolute;
top: 0%;
left: 50%;
width: 125px;
height: 125px;
margin: 10px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1), 0 3px 10px rgba(0, 0, 0, 0.1);
border-radius: 50%;
padding: 5px;
border: 1px solid #cdcdcd;
display: inline-block;
background-image: url(pictures/2.jpg);
background-size: cover;
background-repeat: no-repeat;
animation: upDown 5s infinite;
}
.image3 {
position: absolute;
top: 0%;
left: 85%;
width: 125px;
height: 125px;
margin: 10px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1), 0 3px 10px rgba(0, 0, 0, 0.1);
border-radius: 50%;
padding: 5px;
border: 1px solid #cdcdcd;
display: inline-block;
background-image: url(pictures/3.jpg);
background-size: cover;
background-repeat: no-repeat;
animation: upDown 5s infinite;
}
#keyframes upDown {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(8px);
}
100% {
transform: translateY(0px);
}
}
.image4 {
position: absolute;
top: 0%;
left: 0%;
width: 150px;
height: 150px;
margin: 10px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1), 0 3px 10px rgba(0, 0, 0, 0.1);
border-radius: 50%;
padding: 5px;
border: 1px solid #cdcdcd;
display: inline-block;
background-image: url(pictures/4.jpg);
background-size: cover;
background-repeat: no-repeat;
animation: upDown2 6s infinite;
}
.image5 {
position: absolute;
top: 0%;
left: 33%;
width: 150px;
height: 150px;
margin: 10px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1), 0 3px 10px rgba(0, 0, 0, 0.1);
border-radius: 50%;
padding: 5px;
border: 1px solid #cdcdcd;
display: inline-block;
background-image: url(pictures/5.jpg);
background-size: cover;
background-repeat: no-repeat;
animation: upDown2 6s infinite;
}
.image6 {
position: absolute;
top: 0%;
left: 70%;
width: 150px;
height: 150px;
margin: 10px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1), 0 3px 10px rgba(0, 0, 0, 0.1);
border-radius: 50%;
padding: 5px;
border: 1px solid #cdcdcd;
display: inline-block;
background-image: url(pictures/6.jpg);
background-size: cover;
background-repeat: no-repeat;
animation: upDown2 5s infinite;
}
#keyframes upDown2 {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-8px);
}
100% {
transform: translateY(0px);
}
}
.image7 {
position: absolute;
top: 0%;
left: 16%;
width: 125px;
height: 125px;
margin: 10px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1), 0 3px 10px rgba(0, 0, 0, 0.1);
border-radius: 50%;
padding: 5px;
border: 1px solid #cdcdcd;
display: inline-block;
background-image: url(pictures/7.jpg);
background-size: cover;
background-repeat: no-repeat;
animation: upDown3 5s infinite;
}
.image8 {
position: absolute;
top: 0%;
left: 54%;
width: 125px;
height: 125px;
margin: 10px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1), 0 3px 10px rgba(0, 0, 0, 0.1);
border-radius: 50%;
padding: 5px;
border: 1px solid #cdcdcd;
display: inline-block;
background-image: url(pictures/8.jpg);
background-size: cover;
background-repeat: no-repeat;
animation: upDown3 5s infinite;
}
.image9 {
position: absolute;
top: 0%;
left: 88%;
width: 125px;
height: 125px;
margin: 10px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1), 0 3px 10px rgba(0, 0, 0, 0.1);
border-radius: 50%;
padding: 5px;
border: 1px solid #cdcdcd;
display: inline-block;
background-image: url(pictures/9.jpg);
background-size: cover;
background-repeat: no-repeat;
animation: upDown3 5s infinite;
}
#keyframes upDown3 {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(8px);
}
100% {
transform: translateY(0px);
}
}
<div id="container">
<div class="block1">
<div class="wrapper" style="/*background: cyan;*/">
<div class="images">
<div class="image1"></div>
<div class="image2"></div>
<div class="image3"></div>
</div>
<div class="images2">
<div class="image4"></div>
<div class="image5"></div>
<div class="image6"></div>
</div>
<div class="images3">
<div class="image7"></div>
<div class="image8"></div>
<div class="image9"></div>
</div>
</div>
<div class="wrapper" style="/*background: lime;*/">
<div class="images">
<div class="image1"></div>
<div class="image2"></div>
<div class="image3"></div>
</div>
<div class="images2">
<div class="image4"></div>
<div class="image5"></div>
<div class="image6"></div>
</div>
<div class="images3">
<div class="image7"></div>
<div class="image8"></div>
<div class="image9"></div>
</div>
</div>
</div>
<div class="block2">
<div class="wrapper" style="/*background: mauve;*/">
<div class="images">
<div class="image1"></div>
<div class="image2"></div>
<div class="image3"></div>
</div>
<div class="images2">
<div class="image4"></div>
<div class="image5"></div>
<div class="image6"></div>
</div>
<div class="images3">
<div class="image7"></div>
<div class="image8"></div>
<div class="image9"></div>
</div>
</div>
<div class="wrapper" style="/*background: yellow;*/">
<div class="images">
<div class="image1"></div>
<div class="image2"></div>
<div class="image3"></div>
</div>
<div class="images2">
<div class="image4"></div>
<div class="image5"></div>
<div class="image6"></div>
</div>
<div class="images3">
<div class="image7"></div>
<div class="image8"></div>
<div class="image9"></div>
</div>
</div>
</div>
</div>

how to fit an image into a showcase box

I have this code, but the image is always out of the showcase box, I tried using align,float,position but none of these seem to work. how can I fix it?
div#main {
padding-top: 20px;
background-color: #ffffff;
}
.showcase-box {
width: 330px;
height: 200px;
box-shadow: 5px 15px 30px rgba(0, 0, 0, 0.3);
border-radius: 10px;
margin: 0 20px 10px 20px;
background-size: contain;
}
.showcase-box img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top;
}
<div id="main">
<h1 class="showcase-heading">Showcase</h1>
<div class="showcase-box">
<img src="Images/POTC1.jpg" />
</div>
</div>
thank you!!

You can add the overflow:hidden; and the background-size:cover; property, so that the image isn't visible when it's out of it's container.
main {
padding-top: 20px;
background-color: #ffffff;
}
.showcase-box {
width: 330px;
height: 200px;
box-shadow: 5px 15px 30px rgba(0, 0, 0, 0.3);
border-radius: 10px;
margin: 0 20px 10px 20px;
background-size: cover;
overflow: hidden;
}
.showcase-box img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<main>
<h1 class="showcase-heading">Showcase</h1>
<div class="showcase-box">
<img src="" />
</div>
</main>
</body>
</html>
now, it should work!

Try using the display: block for the showcase img, Unless you treat a image to be a block level element it cannot be aligned easily. Just a suggestion but not sure.
div#main{
padding-top: 20px;
background-color: #ffffff;
}
.showcase-box{
width: 330px;
height: 200px;
box-shadow: 5px 15px 30px rgba(0,0,0,0.3);
border-radius: 10px;
margin: 0 20px 10px 20px;
background-size: contain;
}
.showcase-box img{
width: 100%;
height: 100%;
display:block;
}
Now add all the alignments and look

you must write such a code
.showcase-box{
width: 330px;
height: 200px;
box-shadow: 5px 15px 30px rgba(0,0,0,0.3);
border-radius: 10px;
margin: 0 20px 10px 20px;
background-size: contain;
display: flex;
justify-content: center;
align-items: center;
overflow:hidden;
}
.showcase-box img{
width: 100%;
height: 100%;
}
display flex with align items and justify content center will center your image in the center of the box

I'm adding this answer to see if your existing code produces the correct results here.
div#main{
padding-top: 20px;
background-color: #ffffff;
}
.showcase-box{
width: 330px;
height: 200px;
box-shadow: 5px 15px 30px rgba(0,0,0,0.3);
border-radius: 10px;
margin: 0 20px 10px 20px;
background-size: contain;
border: 1px solid red; /* added border so to see if image overflows */
}
.showcase-box img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: top;
}
<div id="main">
<h1 class="showcase-heading">Showcase</h1>
<div class="showcase-box">
<img src="http://www.freeimageslive.com/galleries/backdrops/abstract/preview/pink_wires.jpg"/>
</div>
</div>
And it appears it does. I put the red border in to see if the image overflowed. It did not.
So the issue could be a browser support issue for "object-fit" or other css property.

Fixed wrap with jQuery

In my page I have a div (fixed wrap) that I want to move after the scroll.
I tried something with jQuery, but the height of the div is too high and goes over the footer.
img1
img2
Here's my code:
Sorry, edit2:
var elementPosition = $('#fixed-wrapper').offset();
$(window).scroll(function() {
if ($(window).scrollTop() > elementPosition.top) {
$('#fixed-wrapper').css('position', 'fixed').css('top', '0').css('margin', '20px 1%');
} else {
$('#fixed-wrapper').css('position', 'static');
}
});
#header {
width: 101%;
padding: 10px 0px 0px;
margin: -10px -10px 10px -10px;
background-color: rgba(0, 0, 0, 0.7);
display: table;
min-width: 700px;
}
#main-bets{
display: table;
float: left;
width: 68%;
margin-left: 7%;
margin-top: 20px;
margin-bottom: 30px;
min-width: 900px;
max-width: 900px;
background-color: rgba(0, 0, 0, 0.5);
}
#fixed-wrapper {
display: table;
float: right;
width: 22%;
right: 5px;
margin: 20px 1%;
max-width: 300px;
}
#footer {
width: 101%;
padding: 10px 0px 0px;
margin: 20px -10px -10px -10px;
background-color: rgba(0, 0, 0, 0.7);
display: table;
clear: both;
}
<div id="header">
...
</div>
<div id="main-bets
...
</div>
<div id="fixed-wrapper">
....
</div>
<div id="footer">
...
</div>

You can use my sticky float jQuery plugin for that (demo page), or use the relatively new CSS property: position:sticky (not supported in older Egde/IE)

Check now:
body {padding:0; margin: 0;}
#header {
width: 101%;
padding: 10px 0px 0px;
margin: -10px -10px 10px -10px;
background-color: rgba(0, 0, 0, 0.7);
display: table;
min-width: 700px;
}
#main-bets{
float: left;
width: 68%;
margin-left: 7%;
margin-top: 20px;
margin-bottom: 30px;
min-width: 900px;
max-width: 900px;
background-color: rgba(0, 0, 0, 0.5);
}
#fixed-wrapper {
float: left;
background: red;
width: 22%;
right: 5px;
margin: 20px 1%;
max-width: 300px;
}
#footer {
width: 101%;
padding: 10px 0px 0px;
margin: 20px -10px -10px -10px;
background-color: rgba(0, 0, 0, 0.7);
clear: both;
}
//---------------- HTML ---------- //
<div id="header">
Header
</div>
<div id="main-bets">
Bets
</div>
<div id="fixed-wrapper">
Wrapper
</div>
<div id="footer">
Footer
</div>

div id "wrapper" not running in box model

I created an id wrapper in CSS:
#wrapper {
position: relative;
background: yellow;
-webkit-box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2);
width: 960px;
padding: 40px 35px 35px 35px;
margin: 0px auto;
}
class box in CSS:
float: left;
width: 170px;
height: 190px;
margin: 10px;
border: 3px solid #8AC007;
border-radius: 5px;
right: auto;
HTML:
<div id="wrapper"><div class="box">
<p>ini box 1</p>
</div> </div>
The problem is the box is out from the wrapper. What is the soultion?

Remove the float:left style from box css
.box {
width: 170px;
height: 190px;
margin: 10px;
border: 3px solid #8AC007;
border-radius: 5px;
right: auto;
}

Add overflow: auto to wrapper to clear the float of box.

I always recommend a clearing element after floats, old IE especially behaved unpredictably without them
<div id="wrapper">
<div class="box">
<p>ini box 1</p>
</div>
<div class='clr'></div>
</div>
additional CSS
.clr {
clear:both;
height:0px;
}

Fix element vertically, move when scrolled horizontally

I'm stuck on this one. Anyone up for a css puzzle?
I need the element displaying the scrolling text to remain fixed while scrolling down the page but then to be able to move if scrolled horizontally.
I made a jsfiddle to demo the issue. You can find it here: http://jsfiddle.net/6tPpE/
HTML:
<body>
<section id="front_page">
<div id = "ticker_placer">
<div id="ticker_holder">
<div id="ticker_ribbon">
<ul id ="ticker">
<li>Scrolling on Jin & Juice</li>
</ul>
</div>
</div>
</div>
</section>
</body>
CSS:
body {
width: 700px;
height: 700px;
background:yellow;
}
#ticker_placer {
position: absolute;
left: 0px;
width: 68%;
min-width: 871px;
z-index: 1;
}
#ticker_holder {
position: fixed;
width: 68%;
min-width: 871px;
}
#ticker_ribbon {
position:relative;
padding: 0 10px;
margin: 0 0 0 -10px;
width: 400px;
height: 35px;
background: rgba(0,0,0,.25);
border-top-left-radius: 5px;
border-top-right-radius: 5px;
box-shadow:
inset 0 1px rgba(255,255,255,.3),
inset 0 10px rgba(255,255,255,.2),
inset 0 10px 20px rgba(255,255,255,.25),
inset 0 -15px 30px rgba(0,0,0,.3),
inset 0 -1px 6px rgba(0,0,0,.3);
}
#ticker_ribbon:before, #ticker_ribbon:after {
content:" ";
border-top:10px solid rgba(0,0,0,.6);
position:absolute;
bottom:-10px;
}
#ticker_ribbon:before {
border-left:10px solid transparent;
left:0;
}
#ticker_ribbon:after {
border-right:10px solid transparent;
right:0;
}
.tickercontainer {
position: absolute;
left: 0;
width: 400px;
}
.mask {
overflow: hidden;
}
ul.newsticker { /* that's your list */
position: relative;
left: 1000px;
font: 10px;
font-family: "KeplerStd-Regular";
src: url('Fonts/KeplerStd-Regular.ttf') format('truetype');
list-style-type: none;
color: white;
margin: 0;
padding: 0;
}
ul.newsticker li {
float: left; /* important: display inline gives incorrect results when you check for elem's width */
margin: 5px 0;
padding: 0;
}
section#front_page {
position: relative;
margin: 0 2.5%;
width: 400px;
height: 400px;
background: green;
box-shadow: 0 0 10px -2px #AAAAAA;
}

$(window).scroll(function(){
$('#ticker_holder').css('left',-$(window).scrollLeft()+26);
});
This sets the positon of the div whenever it scrolls left..
Using scrollLeft() I get the amount of scrolling and this 26px is for positioning it properly..so setting the left property..
Working Fiddle:http://jsfiddle.net/6tPpE/1/

You need to make the body the same width as the fixed element:
body {
width: 400px;
}

Categories

Resources