So I have a few section with a dynamic height(Based on viewport) and I need to be able to position a img as a divider between sections. The only way I can think of to do it is to absolutely position the images. The problem is I don't always know what the fixed height of each section will be.
So is there a way to be able to add a section with positioning relative to itself without having the empty space left over from position: relative.
.section {
width: 100%;
height: 200px;
}
.divider1 {
position: absolute;
left: calc(50vw - 100px);
top: 150px;
}
.divider2 {
position: absolute;
left: calc(50vw - 100px);
top: 350px;
}
.blue {
background-color: blue;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="section blue"></div>
<div class="divider1">
<img width="200" height="100" src="http://www.clipartbest.com/cliparts/ace/o9d/aceo9daEi.jpeg" />
</div>
<div class="section red"></div>
<div class="divider2">
<img width="200" height="100" src="http://www.clipartbest.com/cliparts/ace/o9d/aceo9daEi.jpeg" />
</div>
<div class="section green"></div>
</body>
</html>
Set the divider as a pseudo-element (I've used ::after) on the section element. Position the pseudo element in relation to the section element's bottom. In this way, the height of the section can change, and the divider will be in the right place.
Note - you have to wrap the div's inside a container, so we can disable the ::after on the last section.
.section {
position: relative;
width: 100%;
height: 200px;
}
.section:not(:last-child)::after {
position: absolute;
width: 200px;
height: 100px;
bottom: -50px;
left: calc(50% - 100px);
background: url(http://www.clipartbest.com/cliparts/ace/o9d/aceo9daEi.jpeg) no-repeat;
background-size: contain;
content: "";
z-index: 1;
}
.blue {
background-color: blue;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
<div>
<div class="section blue"></div>
<div class="section red"></div>
<div class="section green"></div>
</div>
If your images have stable dimensions: width="200px" height="100px", then you can place them absolutely positioned inside colored divs and independent of parent height:
.section {
width: 100%;
height: 50vh;
position: relative;
}
.section img {
width: 200px;
height: 100px;
display: block;
position: absolute;
margin-left: calc(50% - 100px);
margin-top: -50px;
}
.blue {
background-color: blue;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
<div class="section blue"></div>
<div class="section red">
<img src="http://www.clipartbest.com/cliparts/ace/o9d/aceo9daEi.jpeg" />
</div>
<div class="section green">
<img src="http://www.clipartbest.com/cliparts/ace/o9d/aceo9daEi.jpeg" />
</div>
Related
I have created two side by side owl carousel scroll elements. Schema:
I want to achieve, that price item description is little bit over owl carousel item borders. Schema:
Can someone please help with this situation using css or jquery.
Edit:
I crated replica. There are two owl elements. I want price:before element to be seen:
$("#banner_section_right .slider").owlCarousel({});
$("#banner_section_left .slider").owlCarousel({});
#container {
width: 100%;
height: 200px;
background: blue;
position: relative;
float: left;
}
#banner_section_right {
width: 70%;
background: red;
float: left;
}
#banner_section_left {
width: 30%;
background: green;
float: left;
}
#banner_section_left .item {
width: 100%;
background: yellow;
}
#banner_section_left .item:before {
width: 1em;
background: yellow;
top: 0;
content: "";
position: absolute;
right: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.transitions.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css" rel="stylesheet"/>
<div id="container">
<div id="banner_section_right">
<div class="slider">
<div class="item">
<p>
Viens
</p>
</div>
<div class="item">
<p>
Divi
</p>
</div>
<div class="item">
<p>
Viens
</p>
</div>
<div class="item">
<p>
Divi
</p>
</div>
</div>
</div>
<div id="banner_section_left">
<div class="slider">
<div class="item">
<p>
$1 000 000
</p>
</div>
</div>
</div>
</div>
I have example your can learn from this might help you what you want to achieve.
html:
<div id="container">
<div class="green"></div>
<div class="red"></div>
<div class="box"></div>
</div>
CSS:
#container{
width: 100%;
height: 200px;
background: blue;
position: relative;
}
div.green{
background: green;
display: block;
height: 100px;
}
div.red{
background: red;
display: inlinblock;
height: 100px;
}
div.box{
width: 100px;
height: 100px;
background: yellow;
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
}
have a look at this css property transform: translateY(-50%); this can move object over other.
Working example : http://fiddlesalad.com/css/div-over-other-div
I'm trying to achieve the following:
I was able to replicate the image but only if my div is not floating in the page (without the margin applied and without the position: absolute), otherwise I can't see the green rectangle.
My HTML structure is the following:
<div class="app">
<div class="interface">
<div class="view">
<div class="body">
<div class="top">
Top content
</div>
<div class="middle">
Middle content
</div>
<div class="bottom">
Bottom content
</div>
</div>
</div>
</div>
</div>
In the .interface CSS I have the following:
.interface
{
position: absolute;
top: 15%;
}
With this CSS I'm unable to see the green rectangle. If I remove the position: absolute (and therefore the top: 15% stops applying) I'm able to see the green rectangle.
You can see the issue in this JSFiddle: https://jsfiddle.net/v9euwdz3/
So, how do I manage to have the DIV showing at a certain level (margin from top) and without compromise my HTML structure?
Here is what you're trying to achieve using flex:
.body {
display: flex;
flex-direction: column;
background-color: blue;
justify-content: space-between;
height: 100vh;
}
.navetc {
background-color: white;
height: 15vh;
}
.top {
background-color: green;
height: 60px;
}
.middle {
background-color: yellow;
flex-grow: 1;
}
.bottom {
background-color: red;
height: 50px;
}
<div class="app">
<div class="interface">
<div class="view">
<div class="body">
<div class="navetc">
SPACE
</div>
<div class="top">
Top content
</div>
<div class="middle">
Middle content
</div>
<div class="bottom">
Bottom content
</div>
</div>
</div>
</div>
</div>
You could also use margin-top: 15%; instead of a placeholder div
.body {
display: flex;
flex-direction: column;
background-color: blue;
justify-content: space-between;
height: 100vh;
}
.top {
margin-top: 15vh;
background-color: green;
height: 60px;
}
.middle {
background-color: yellow;
flex-grow: 1;
}
.bottom {
background-color: red;
height: 50px;
}
<div class="app">
<div class="interface">
<div class="view">
<div class="body">
<div class="top">
Top content
</div>
<div class="middle">
Middle content
</div>
<div class="bottom">
Bottom content
</div>
</div>
</div>
</div>
</div>
(I used vh instead of % to get it to show up correctly in this code snippet)
as we know the content that have height which is 100% means is 100% of its parent and while the height of the parent is not defined will cause an error that's what you was stuck with you set the with of body to 100% but was not right you would set it to 100vh to fit the screen if you are on computer and the other mistakes that I found was in your calculation where you used to subtract the measurement which is in parcentages from the one in pixels height: calc(100% - 150px); and the others where simple mistakes
html,
body {
height: 100vh;
}
.app {
position: relative;
height: 100%;
display: flex;
}
.interface {
position: absolute;
height: 100%;
top: 15%;
}
.view {
position: fixed;
height: 100%;
background-color: #ccc;
width: 350px;
}
.body {
position: relative;
height: 100%;
}
.body .top {
height: 15%;
border: 1px solid #000;
}
.body .middle {
height: 60%;
border: 1px solid red;
}
.body .bottom {
height: 20%;
border: 1px solid green;
}
<div class="app">
<div class="interface">
<div class="view">
<div class="body">
<div class="top">
Top content
</div>
<div class="middle">
Middle content
</div>
<div class="bottom">
Bottom content
</div>
</div>
</div>
</div>
</div>
to see the result in the snippet you should observe it in full page and also when you see the result through jsfiddle there at the result section there is bar downward which hide some part of footer
I have some specific problem with CSS. I was trying to find a solution but I couldn't find this kind of example:
.container {
background: blue;
height: 50px;
}
.nested {
background: red;
width: calc(100vh - 20px);
}
.primary {
background: yellow;
height: 50px;
float: left;
}
.secondary {
background: green;
height: 100%;
float: left;
}
<div class="container">
<div class="primary">
<div class="nested">
ffffff
</div>
</div>
<div class="secondary">
wwwwwww
</div>
</div>
I've created a Fiddle with a simple version of the problem:
https://jsfiddle.net/7nwxfgg5/
I want to extend the Green div to fill all of the available Blue container width, but I don't have any idea how I can do that.
EDIT
Removing float: left helped with width, but now I noticed that it doesnt work with height, please check this snippet:
.container {
background: blue;
}
.nested {
background: red;
height: 200px;
width: calc(100vh - 20px);
}
.primary {
background: yellow;
height: 50px;
float: left;
}
.secondary {
background: green;
height: 100%;
}
<div class="container">
<div class="primary">
<div class="nested">
ffffff
</div>
</div>
<div class="secondary">
wwwwwww
</div>
</div>
How can I resize green div to the same height as red?
Flex is really hand for layouts. I find float to be more trouble than it's worth so I try to avoid it. It makes building responsive layouts much easier. Here is a good resource to learn more: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.container {
background: blue;
height: 50px;
display:flex;
}
.nested {
background: red;
width: 100%;
}
.primary {
background: yellow;
flex:0 0 50%;
}
.secondary {
background: green;
flex:0 0 50%;
}
<div class="container">
<div class="primary">
<div class="nested">
ffffff
</div><!-- nested -->
</div><!-- primary -->
<div class="secondary">
wwwwwww
</div><!-- secondary -->
</div><!-- container -->
My page is divided in rows with limited width. (<div class='row'>)
I would like to apply a background (color) to each row, but I would like the back ground not to take into consideration the width limit of the div, is there a way to achieve this ?
Thanks!
Were you going for something like this? It'd be easier to answer your question if you provided a fiddle or atleast some code so we can help you with your problem.
I came to this solution:
<div class="row1">
...
</div>
<div class="row2">
...
</div>
.row1 {
background-color: red;
width: 100%;
height: 50%;
}
.row2 {
background-color: pink;
width: 100%;
height: 50%;
}
You can run it here: JSFiddle
This is possible with a pseudo-element, no need for additional HTML.
.wrapper {
width: 50%;
margin: auto;
}
[class^=row] {
height: 50px;
position: relative;
margin-bottom: 10px;
}
[class^=row]:before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
height: 100%;
width: 100vw;
background: purple;
z-index: -1;
}
.row1 {
background-color: red;
}
.row2 {
background-color: pink;
}
<div class="wrapper">
<div class="row1">...</div>
<div class="row2">...</div>
</div>
You may be better to place each row inside a .container-fluid div with a {min-width: 100%} and a custom class for the colour you need
.container-fluid {
min-width: 100%
}
.row {
max-width: 300px;
margin: 0 auto;
padding: 10px;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
.blue {
background-color: blue;
}
<div class="container-fluid red">
<div class="row">
<p>Row Content 1</p>
</div>
</div>
<div class="container-fluid green">
<div class="row">
<p>Row Content 2</p>
</div>
</div>
<div class="container-fluid blue">
<div class="row">
<p>Row Content 3</p>
</div>
</div>
So i have 3 box:
Box 1 = red
Box 2 = blue
Box 3 = yellow
Box 1 contains Box 2
Box 2 contains Box 3
Box3 are floated divs and have been cleared using extra div style="clear:both"
I want to have Box 2 as an absolute position to Box 1 like this :
http://i301.photobucket.com/albums/nn42/b1rk0ff/done_zpsd3cd25c0.png
I have tried like this but won't work :
Html :
<div class="box1">
<div class="box2">
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div style="clear:both;"></div>
</div>
testing
</div>
Style :
.box1 {
width:300px;
background-color: red;
position: relative;
}
.box2 {
width: 200px;
background-color:blue;
position: absolute;
right:-100px;
top:30px;
}
.box3 {
height:50px;
width: 50px;
background-color:yellow;
float:left;
margin:10px;
color:black;
}
Here's the codepen :
http://codepen.io/anon/pen/Kkirs?editors=110
Anybody could help?
Thank you
what about removing position:relative from .box1, and change position:absolute to .position:relative in .box2
See snipet below, and take a look at the comments in .box2
.box1 {
width: 300px;
background-color: red;
}
.box2 {
width: 200px;
background-color: blue;
position: relative;
right: -150px; /* changed this value to -150px » was -100px */
top: 10px; /* changed this value to 10px » was 30px */
padding:10px /* add padding as you need and if you need */
}
.box3 {
height: 50px;
width: 50px;
background-color: yellow;
float: left;
margin: 10px;
color: black;
}
<div class="box1">
<div class="box2">
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div style="clear:both;"></div>
</div>
testing
</div>
Why can't you just set a fixed height for .box1?
.box1 {
width:300px;
background-color: red;
position: relative;
height:250px;
}
.box2 {
width: 200px;
background-color:blue;
position: absolute;
right:-100px;
top:30px;
}
.box3 {
height:50px;
width: 50px;
background-color:yellow;
float:left;
margin:10px;
color:black;
}
<div class="box1">
<div class="box2">
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div style="clear:both;"></div>
</div>
testing
</div>
Just replace position: absolute by position: relative.
since box2 is absolute box 1 does not know the height of it's children,
you will need to revert to using both relative elements (or no position definition at all) and solve this problem with margin-left and margin-top
Thank you all, this is what i want.
Hope it helps another newbie like me. :)
.box1 {
width: 300px;
background-color: red;
}
.box2 {
width: 200px;
background-color: blue;
position: relative;
right: -150px; /* changed this value to -150px » was -100px */
top: 10px; /* changed this value to 10px » was 30px */
padding:10px /* add padding as you need and if you need */
}
.box3 {
height: 50px;
width: 50px;
background-color: yellow;
float: left;
margin: 10px;
color: black;
}
<div class="box1">
<div class="box2">
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div style="clear:both;"></div>
</div>
testing
</div>
.box1 {
width: 300px;
background-color: red;
}
.box2 {
width: 200px;
background-color: blue;
position: relative;
right: -150px; /* changed this value to -150px » was -100px */
top: 10px; /* changed this value to 10px » was 30px */
padding:10px /* add padding as you need and if you need */
}
.box3 {
height: 50px;
width: 50px;
background-color: yellow;
float: left;
margin: 10px;
color: black;
}
<div class="box1">
<div class="box2">
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div style="clear:both;"></div>
</div>
testing
</div>