I need to scroll parts of a div and ignore scrolling on other parts.
In my example I need to scroll blue and green but want red to stay on its place.
JSFiddle
<div style="width: 100px;
height:200px;
border: solid black 1px;
overflow-x: auto">
<div style="width: 120px; height: 50px;background-color:blue">
</div>
<div style="width: 100px; height: 30px;background-color:red">
</div>
<div style="width: 120px; height: 50px;background-color:green">
</div>
</div>
Does anyone has an idea how to solve my problem?
You can use position: fixed:
#wrapper {
width: 100px;
height:200px;
border: solid black 1px;
overflow-x: auto;
}
#blue {
width: 120px;
height: 50px;
background-color:blue;
}
#red {
width: 100px;
height: 30px;
background-color:red;
position: fixed;
}
#green {
width: 120px;
height: 50px;
background-color:green;
}
<div id="wrapper">
<div id="blue"></div>
<div id="red"></div>
<div id="green"></div>
</div>
Do this change.It worked for me:
<div style="width: 100px; height:200px; border: solid black 1px;overflow-x: auto">
<div style="width: 120px; height: 50px;background-color:blue">
</div>
<div style="width: 100px; height: 30px;background-color:red;position:fixed;">
</div>
<div style="width: 120px; height: 50px;background-color:green">
</div>
</div>
Hope this is what you want.
Related
My code
<div style="background-color: grey; width: 900px; height: 900px;">
<div style="width: 200px; height: 200px; background-color: green; right: 50px;">
</div>
<div style="width: 300px; height: 200px; background-color: blue; right: 100px;">
</div>
<div style="width: 300px; height: 200px; background-color: yellow; right: 100px;">
</div>
</div>
I also read reference at here https://developer.mozilla.org/en-US/docs/Web/CSS/right . I want right: 50px; have affect. How to fix?
Your <div>'s doesn't got any position attribut.
Sample :
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<div style="position: relative; background-color: grey; width: 900px; height: 900px;">
<div style="position: absolute; top: 0; width: 200px; height: 200px; background-color: green; right: 50px;">
</div>
<div style="position: absolute; top: 200px; width: 300px; height: 200px; background-color: blue; right: 100px;">
</div>
<div style="position: absolute; top: 400px; width: 300px; height: 200px; background-color: yellow; right: 100px;">
</div>
</div>
</body>
</html>
You need to set position for each div as follows.
<div style="background-color: grey; width: 900px; height: 900px; position: relative;">
<div style="width: 200px; height: 200px; background-color: green; right: 50px; position: absolute;">
</div>
<div style="width: 300px; height: 200px; background-color: blue; right: 100px; position: absolute; top: 200px;">
</div>
<div style="width: 300px; height: 200px; background-color: yellow; right: 100px; position: absolute; top: 400px;">
</div>
</div>
You have to give position attribute along with the right attribute
as right, left, top and bottom only works with position other than static and by default the position of all the HTML elements are static, that is why it is not working
So, You have add a position property to make this work
<div style="background-color: grey; width: 900px; height: 900px; position: relative">
<div style="width: 200px; height: 200px; background-color: green; right: 50px; position: absolute">
</div>
<div style="width: 300px; height: 200px; background-color: blue; right: 100px; position: absolute">
</div>
<div style="width: 300px; height: 200px; background-color: yellow; right: 100px; position: absolute">
</div>
</div>
<div style="overflow-y: scroll; overflow-x: scroll; height: 200px; width: 200px">
<div style="border-color: black; height: 100px; width: 30px; border: 2px; border-style: solid; position:absolute; left: 20px; top: 200px">
</div>
</div>
I would expect that the div inside the scroll-able div doesn't show up outside the scroll-able div.
How can I archive this ? The Rectangle should only be visible in the scroll-able div.
you need to reset position, either for the parent or the child : example below
/* CSS here for demo purpose to put both example side by side*/
body {
display:grid;
grid-template-columns:1fr 1fr;
grid-auto-flow:row dense;
}
body>*{grid-column:1;margin:auto;}
body >:nth-child(2) ~ * {grid-column:2;}
<p>position relative on parent,<br><b> so the parent becomes the reference for the absolute child</b></p>
<div style="overflow-y: scroll; overflow-x: scroll; height: 200px; width: 200px;position:relative;">
<div style="border-color: black; height: 100px; width: 30px; border: 2px; border-style: solid; position:absolute; left: 20px; top: 200px">
</div>
</div>
<p> static position on children<br><b> so it is part of the flow</b></p>
<div style="overflow-y: scroll; overflow-x: scroll; height: 200px; width: 200px">
<div style="border-color: black; height: 100px; width: 30px; border: 2px; border-style: solid; margin-left: 20px; margin-top: 200px">
</div>
</div>
Absolutely positioned elements Are removed from their parents, and displayed over the DOM. Remove position:absolute; and change your top and left to margin-top and margin-left
.one{
overflow-y: scroll;
overflow-x: scroll;
height: 200px;
width: 200px"
}
.two{
border-color: black;
height: 100px;
width: 30px;
border: 2px;
border-style: solid;
margin-left: 20px;
margin-top: 200px
}
<div class="one">
<div class="two">
</div>
</div>
Add position: relative to the top div
<div style="position: relative; overflow-y: scroll; overflow-x: scroll; height: 200px; width: 200px">
<div style="border-color: black; height: 100px; width: 30px; border: 2px; border-style: solid; position:absolute; left: 20px; top: 200px">
</div>
</div>
Snippet Demo:
.container {
position: relative;
overflow-y: scroll;
overflow-x: scroll;
height: 200px;
width: 200px;
}
.box {
height: 100px;
width: 30px;
position: absolute;
top: 200px;
left: 20px;
border: 2px solid black;
}
<div class="container">
<div class="box">
</div>
</div>
I'm trying to make a page like this and I've tried border radius but i just can't get it right. My border becomes too round and always looks off when the middle portion of the div starts to see the effects of border radius.
Pic below of What I want
How would I achieve this?
What I have
<div class="container-fluid">
<div class="row">
<div class="hidden-xs col-sm-6" style="border: 1px solid black; height: 100vh; padding: 0px; background-color: white">
<div class="image-container">
<img src="http://cdn.homedsgn.com/wp-content/uploads/2011/12/Flyway-View-House-00-1.jpg">
</div>
</div>
<div class="col-sm-6" style="border: 1px solid green; height: 100vh">
sign up field
</div>
</div>
</div>
css:
.image-container{
width: 100%;
height: 100%;
}
.image-container img{
height: 100%;
width: 100%;
object-fit: cover;
}
you also have the option to use an extra class and a pseudo to hide partially the image:
.image-container{
width: 100%;
height: 100%;
}
.image-container img{
height: 100%;
width: 100%;
object-fit: cover;
}
.rounded {
position:relative;
overflow:hidden;
}
.rounded:before {
content:'';
position:absolute;
top:-15vh;
bottom:-15vh;
right:0;
width:30vw;
border-radius:0 50% 50% 0/ 100%;
box-shadow:
15vh 0 white,
inset -3px 0 2px white /* inset is optionnal and buggy at screen .. tiny gap shows image in between both shadows */
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class=" rounded hidden-xs col-sm-6" style="border: 1px solid black; height: 100vh; padding: 0px; background-color: white">
<div class="image-container">
<img src="http://cdn.homedsgn.com/wp-content/uploads/2011/12/Flyway-View-House-00-1.jpg">
</div>
</div>
<div class="col-sm-6" style="border: 1px solid green; height: 100vh">
sign up field
</div>
</div>
</div>
well you could start with this :) off course different browser have different css for border
.image-container{
width: 100%;
height: 100%;
}
.image-container img{
height: 100%;
width: 800px;
object-fit: cover;
border-bottom-right-radius: 300px;
border-top-right-radius: 323px;
}
.box{
border: 1px solid green;
width: 500px;
background: white;
height: 200px;
display: inline-block;
position: absolute;
top: 190px;
left: 90px;
}
<div class="container-fluid">
<div class="row">
<div class="hidden-xs col-sm-6" style="border: 1px solid black; height: 100vh; padding: 0px; background-color: white">
<div class="image-container">
<img src="http://cdn.homedsgn.com/wp-content/uploads/2011/12/Flyway-View-House-00-1.jpg">
</div>
</div>
<div class="col-sm-6 box" style="border: 1px solid green; height: 100vh">
sign up field
</div>
</div>
</div>
I have two Div Tag
I want Make them Side by side
right div fixed at width 200 and left div fill remained area but code dont work
here is my code
<div style="width: 100%;">
<div style="float: right; width: 200px; height: 100px; border: 5px dashed blue;position:fixed; "></div>
<div style="float: left; width: 100%; height: 100px; border: 5px dashed red; position: fixed;" ></div> </div>
You should probably not float and position:fixed your elements. Also inline css is BAD. Here is a working JSFiddle. Have a look at position:absolute; inside a position:relative;
Also I added box-sizing to make borders go inside their containers.
HTML
<div id="div_cont">
<div id="div2"></div>
<div id="div3" ></div>
</div>
CSS
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#div_cont{
position:relative;
width:100%;
height:100px;
padding-left:200px;
}
#div2{
border: 5px dashed blue;
position:absolute;
top:0;
left:0;
width:200px;
bottom:0;
}
#div3{
border: 5px dashed red;
min-height:100px;
}
you need to use margin property in css
see here
i have change some properties in your css
<div style="width: 100%;">
<div style="float: right; width: 200px; height: 100px; border: 5px dashed blue;position:fixed; "></div>
<div style="height: 100px; border: 5px dashed red; position: fixed; margin-right:200px;" ></div>
<div style="clear:both;"></div>
</div>
chk it and have a nice day
<div style="width: 100%;">
<div style="float: right; min-width: 200px; width:20%; height: 100px; border: 5px dashed blue; "></div>
<div style="float:left; width:79%;">
<div style="float: left; width: 100%; height: 100px; border: 5px dashed red;" ></div>
</div>
</div>
in CSS3 is possible. But be careful with the position:fixed
<div style="width: 100%; height: 100px; border: solid thin green; ">
<div style="float: right; width: 200px; height: 100px; border: 5px dashed blue; "></div>
<div style="float: left; width: calc(100% - 220px); height: 100px; border: 5px dashed red; ">
</div>
Regardless of what I've tried, I cannot get my inner divs to flow horizonatally within the outer div. Please help!!!
<style type="text/css">
#gallery {
width: 688px;
height: 360px;
border: solid;
}
#galleryelements {
width: 650px;
height: 320px;
display:inline;
background-color:#0FF;
}
.s-thumbnail {
width: 50px;
height: 75px;
border: solid;
}
.thumbnail {
width: 100px;
height: 150px;
border: solid;
}
#left {
float:left;
}
#right {
float:right;
}
#Mimage {
width: 200px;
height: 300px;
border: solid;
}
</style>
<body>
<div id="gallery">
<div id="galleryelements">
<div class="s-thumbnail" id="left"></div>
<div class="thumbnail" id="left"></div>
<div id="Mimage"></div>
<div class="thumbnail" id="right"></div>
<div class="s-thumbnail" id="right"></div>
</div>
</div>
</body>
</html>
is this what you mean?
http://jsfiddle.net/SebastianPataneMasuelli/xtdsv/
HTML:
<div id="gallery">
<div id="galleryelements">
<div class="s-thumbnail left" id=""></div>
<div class="thumbnail left" id="left"></div>
<div id="Mimage"></div>
<div class="thumbnail right" id=""></div>
<div class="s-thumbnail right" id=""></div>
</div>
</div>
CSS:
#gallery {
width: 688px;
height: 360px;
border: 1px solid red;
}
#galleryelements {
width: 650px;
height: 320px;
background-color:#0FF;
display: block;
}
.s-thumbnail {
width: 50px;
height: 75px;
border: solid;
}
.thumbnail {
width: 100px;
height: 150px;
border: solid;
}
.left {
float:left;
}
.right {
float:left;
}
#Mimage {
width: 200px;
height: 300px;
border: 1px solid green;
float: left;
}
You should never have more than one element on the page with the same ID.
Try <div class="s-thumbnail left"></div>
<div class="thumbnail left"></div>
<div id="Mimage"></div>
<div class="thumbnail right"></div>
<div class="s-thumbnail right"></div>and then change your CSS from #left and #right to .left and .right.
div#Mimage needs to be floated, else it will span the entire width and push the other floats down.
It would appear that you have your classes and id's mixed up. You are re-using the left and right ids. You probably want a float on Mimage too to make it display horizontally.
I changed your code slightly, is this what the result should look like?
http://jsfiddle.net/WcEAb/1/