Is there any css property like min-height, but for top?
In the example below, when i hide div1 (via javascript), i want div2 to have top:50. Else, to be placed below div1.
<html>
<head>
<style>
#div1
{
height:100px;
}
#div2{
//min-top:50px;
}
</style>
</head>
<body>
<div id='div1'>This div may be hidden</div>
<div id='div2'>This div must not be placed above 50px</div>
</body>
</html>
Edit: as i answered below
When div1 is not hidden i want div2 to be exactly below div1. imagine div1 as a treeview which can have any height (or even be hidden) and div2 as a paragraph which should always be below 50px
I came up with this solution which utilises the top:0 bottom:0 hack.
We create a container the height of it's relative parent (if any) - we then give this a min-height (eg your min-top)
We then position the actual element absolutely to the bottom on this container.
CSS:
.container {
position:absolute;
bottom:0px;
top: 0;
min-height: 700px; //Adjust this to your MINIMUM (eg your min-top)
}
.position-me {
position: absolute;
bottom: 0;
}
HTML:
<div class="container">
<div class="position-me">Great!</div>
</div>
"Is there a css min-top property?" no, but ...
... you can use math function to take effect like min-top:
<style>
#div2{
top:max(50px, 10%);
}
</style>
https://developer.mozilla.org/en-US/docs/Web/CSS/max
No there's nothing like min-top
Instead you can use is
div {
position: relative;
top: 50px;
}
And for the example you shown visibility: hidden; will be best suited here, as it will reserve the space of your hidden div
I suspect that this will do the trick for you but I believe it is not a very good practice:
#div1
{
height:100px;
outline: 1px solid red;
margin-bottom:-50px;
}
#div2{
margin-top:50px;
outline: 1px solid blue;
}
DEMO: http://jsfiddle.net/pavloschris/tbbvU/
( Just comment/uncomment the display:none to see it work.)
I see that this question has still many views and people are still commenting. Because of the fact that the question is not fully answered, i decided to write here the complete answer:
Appropriate css:
#div1 {
min-height:50px;
background-color: #fee;
margin-bottom:-50px;
}
#div2 {
margin-top:50px;
background-color: #efe
}
http://jsfiddle.net/vVsAn/5051/
Results
When div1 is hidden, div2 has a top property of 50px
When div1 is not hidden:
If div1 height is less than 50px, then div2 is placed at 50px
If div1 height is more than 50px, then div2 is placed right under div1
$(window).on("resize", function () {
if ($('#div1').css('display', 'none')){
$("#div2").addClass('minTop');
} else if ($('#div1').css('display', 'block')){
$("#div2").removeClass('minTop');
}
}).resize();
#div1{
width:100px;
height:100px;
background-color:#ff0000;
position:absolute;
display:block;
/* display:none; */
}
#div2{
width:100px;
background-color:#ffff00;
top:150px;
position:absolute;
}
#div2.minTop{
top:50px !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
<div id='div1'>div 1</div>
<div id='div2'>div 2</div>
</body>
</html>
Solution using margins
See also solution using position:sticky.
The following solution uses a css3 selector "directly preceded by" or "placed immediately after" and it works by toggling a predetermined class (.hidden in this example) on the preceding element.
#div1.hidden + #div2 {
margin-top: 50px;
}
.hidden {
display: none;
}
const toggle = () => div1.classList.toggle('hidden')
#div1.hidden + #div2 {
margin-top: 50px;
}
.hidden {
display: none;
}
div {
border: 1px solid red;
height: 100px;
margin-bottom: 10px;
}
section {
position: absolute;
border: 1px solid blue;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 10px;
overflow: hidden;
margin: 5px;
}
aside {
position: absolute;
top: 40px;
right: 20px;
z-index: 1;
display: flex;
flex-direction: column;
}
<section>
<div id='div1'>This div may be hidden</div>
<div id='div2'>This div must not be placed above 50px</div>
</section>
<aside>
<button type="button" onclick="toggle()">Toggle #div1</button>
</aside>
Solution using position: sticky
See also solution using margins.
To achieve somewhat similar you can use position: sticky. It's not exactly same as top-min would have ideally been, but it can be tweaked cleverly with parent styles to achieve what you have in mind.
.sticky {
/* Note: The parent element must have a non-default position set too. */
position: sticky;
top: 50px;
}
Note: The parent of position:sticky element must have a non-default position set as well.
What this does is that when the element moves up by either scrolling, reducing viewport height or layout changes, it will stick to the defined position and will not move until the parent element itself crosses the boundary and pushes the element out of the way (as seen in animation below).
const toggle = () => div1.classList.toggle('hidden')
const toggleSticky = () => div2.classList.toggle('sticky')
.sticky {
position: sticky;
top: 50px;
}
.hidden {
display: none;
}
section {
/* Note: The parent of position:sticky element must have a non-default position set. */
position: absolute;
border: 1px solid blue;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 10px;
overflow: hidden;
margin: 5px;
}
div {
border: 1px solid red;
height: 100px;
margin-bottom: 10px;
}
aside {
position: absolute;
top: 40px;
right: 20px;
z-index: 1;
display: flex;
flex-direction: column;
}
<section>
<div id='div1'>This div may be hidden</div>
<div id='div2' class="sticky">This div must not be placed above 50px</div>
</section>
<aside>
<button type="button" onclick="toggle()">Toggle #div1</button>
<button type="button" onclick="toggleSticky()">Toggle #div2 sticky</button>
</aside>
Related
I want to make a vertical line between two divs. we have hr for horizontal line but none for vertical line as I know. Is there anyway to make it without using border?
<style>
#wrapper_1 {
background-color:pink;
height:100px;
float:left;
width: 100px;
}
#wrapper_2 {
background-color:brown;
height:100px;
width: 100px;
float:right;
}
</style>
<div id="wrapper_1">
Creating slideshows PHP
</div>
<div id="wrapper_2">
Creating slideshows with WordPress
</div>
You can also use pseudo elements to make a vertical separator. You don't need an extra div to make a separator just use the pseudo elements and style it according to your needs.
#wrapper_1 {
background-color: pink;
height: 100px;
float: left;
width: 100px;
}
#wrapper_1:after {
content: "";
background-color: #000;
position: absolute;
width: 5px;
height: 100px;
top: 10px;
left: 50%;
display: block;
}
#wrapper_2 {
background-color: brown;
height: 100px;
width: 100px;
float: right;
}
<div id="wrapper_1">
Creating slideshows PHP
</div>
<div id="wrapper_2">
Creating slideshows with WordPress
</div>
PS: Beware of the absolute positioning of the pseudo elements.
Thanks.
You can use <hr>, as it is semantically correct, and then use CSS to convert it to a vertical line.
hr.vertical {
height:100%; /* you might need some positioning for this to work, see other questions about 100% height */
width:0;
border:1px solid black;
}
Create a new div between your two div and add this class:
.vertical-row {
Float:left;
height:100px;
width:1px; /* edit this if you want */
background-color: your color
}
I am not a css hacker but this is how would I do it.. Please notice that you should use clear: both; after floating elements.
HTML:
<div class="container">
<div id="wrapper_1">
Creating slideshows PHP
</div>
<div class="seperator"></div>
<div id="wrapper_2">
Creating slideshows with WordPress
</div>
<div class="clearfix"></div>
</div>
CSS:
#wrapper_1 {
background-color:pink;
height:100px;
float:left;
width: 100px;
}
#wrapper_2 {
background-color:brown;
height:100px;
width: 100px;
float:right;
}
.seperator {
height: 100%;
width: 1px;
background: black;
top: 0;
bottom: 0;
position: absolute;
left: 50%;
}
.container {
position: relative;
}
.clearfix {
clear: both;
}
DEMO: jsfiddle
sure you can:
just wrap the elements into a wrapper and make that one display:table-cell.
.bigwrapper{
display:table;
width:100%;
}
second: create another div width class "vr" between your two wrappers and style it as follows:
.vr{
width:1px;
display:table-cell;
background-color:black;
height:100%;
}
Final Demo at:
https://plnkr.co/edit/uJsmrCaF9nns49J5RcYj?p=preview
If you are using flex element and you are having issues with element(s) transforming to columns because of the display: flex; property, use the box-shadow property on the element as it does not add up to the container space.
I have two divs that I am trying to stack over each other but the one I want on top is not showing. I want the blue background div to lay on top of the red background div. Any advice? The reason why I want to overlay the blue div is because the container is a centered grid and I want the red div to be the background for the first half of the page.
JSFIDDLE
CSS
.buddy {
width: 50%;
height: 629px;
display: inline-block;
position: relative;
background: red;
}
.buddy-content {
position: absolute;
top: -629px;
z-index: 10;
background: blue;
}
.container {
max-width: 1000px;
margin: 0 auto;
overflow:hidden;
position:relative;
padding: 0 10px;}
You have made the second div absolute so you don't need to give the negative value for top. The second div is hiding because you top -629px; Try making the top:0 and see. And also for your current code. Remove the overflow hidden and put z-index like this:
.buddy {
width: 50%;
height: 629px;
display: inline-block;
position: relative;
z-index:9;
background: red;
}
.buddy-content {
position: absolute;
top: -629px;
z-index: 10;
background: blue;
}
.container {
max-width: 1000px;
margin: 0 auto;
width:200px;
height:200px;
position:relative;
padding: 0 10px;
}
.buddy {
width: 50%;
height: 629px;
display: inline-block;
position: absolute;
background: red;
}
.buddy-content {
position: absolute;
z-index: 10;
background: blue;
}
<div class="buddy BlueGradient">
</div>
<div class="container">
<div class="buddy-content">
ROGER
</div>
</div>
https://jsfiddle.net/kt77cp3e/6/
just add z-index : higher to the div that you want to show on top and set z-index low to the other one ..
ant one thing your code is working good just you need to remove " top : -629px;"
that thing is not allowing blue div to be on top just it is showing at the -629 px position..!!!!
If you can update your code like this, it may solve the issue:
Demo:https://jsfiddle.net/kt77cp3e/7/
CSS:
html, body {
height:100%;
width:100%:
}
.container {
width:50%;
height:100%;
background:red;
position:relative;
}
.container>div {
position:relative;
left:0;
right:0;
}
.container>div:first-child {
top:0;
height:50%;
background:blue
}
.container>div:last-child {
bottom:0;
height:50%;
background:green
}
HTML:
<div class="container">
<div></div>
<div></div>
</div>
Update: Considering the latest updated code, I think you should remove overflow:hidden from the container styles. That should do the trick
You should set the dimension on the .container div.
CSS:
.container {
position:relative;
width:100px; //You may modify these values
height:100px
}
Demo: https://jsfiddle.net/kt77cp3e/1/
.buddy { width: 50%; height: 629px; display: inline-block; position: relative; background: red;}
.buddy-content { position: absolute; top: 0px; z-index: 10; background: blue; }
.container {max-width: 1000px; margin: 0 auto; overflow:hidden; position:relative; padding: 0 10px; position: relative;}
<div class="container">
<div class="buddy BlueGradient">
<div class="buddy-content">ROGER</div>
</div>
</div>
This brings the text "Roger" with blue background on top of the red background
I'm curious whether it's possible with CSS to have a <div> overlaying the <div> above and below, like so:
I've tried to use margin-top: -40px;, but that doesn't seem to work. I've tried position:relative; without any luck, either. Any ideas?
Thanks!
Sure!
Demo Fiddle
The trick is managing the positioning of your divs, then setting the offset (top) correctly for the div you want overlapping.
<div></div>
<div>
<div></div>
</div>
CSS
div {
width:100%;
height:100px;
position:relative; /* ensure the parent divs have a position set */
}
div:first-child {
background:red;
}
div:last-child {
background:blue;
}
div:last-child div {
opacity:.5;
height:50px;
background:white;
position:absolute; /* position relative to the parent */
top:-25px; /* position the top to -25px (half its height) above the top of the parent */
}
There are many ways to do this:
With all div's absolutely positioned
You can use position: absolute to achieve this. This is better if you are trying to build a web app as it sticks to the edges of the screen.
Fiddle here
HTML
<div id="top-section"></div>
<div id="banner-section"></div>
<div id="btm-section"></div>
CSS
div {
position: absolute;
left: 0;
width: 100%;
}
#top-section {
top: 0;
bottom: 50%;
background: red;
}
#btm-section {
top: 50%;
bottom: 0;
background: blue;
}
#banner-section {
height: 100px;
margin-top: -50px;
top: 50%;
background: rgba(255,255,255,0.5);
z-index: 2;
}
With the #banner-section relatively positioned
You mentioned that you tried relative position. This is how you can achieve what you were trying to do. In this case, you want the #banner-section to be nested inside the #btm-section:
Fiddle here
HTML
<div id="top-section"></div>
<div id="btm-section">
<div id="banner-section"></div>
</div>
CSS
#banner-section {
position: relative;
top: -50px;
height: 100px;
background: rgba(255,255,255,0.5);
}
With a negative margin on #banner-section
You also mentioned that you tried using a negative value for the margin-top. Here is a working example of that:
Fiddle here
HTML
(Also nested)
<div id="top-section"></div>
<div id="btm-section">
<div id="banner-section"></div>
</div>
CSS
#banner-section {
margin-top: -50px;
height: 100px;
background: rgba(255,255,255,0.5);
}
You can also have it poking out of the top section
If the #top-section is static and the bottom section can extend past the bottom of the page, this might be the best option for you.
Fiddle here
HTML
<div id="top-section">
<div id="banner-section"></div>
</div>
<div id="btm-section"></div>
CSS
#banner-section {
position: absolute;
bottom: -50px;
z-index: 2;
height: 100px;
background: rgba(255,255,255,0.5);
}
Without further details you can do it as follows:
JSFiddle Example
HTML
<div class="top-section"></div>
<div class="banner-section"></div>
<div class="btm-section"></div>
CSS
.top-section{
height:60px;
background-color:red;
}
.btm-section{
height:60px;
background-color:blue;
}
.banner-section{
position:absolute;
z-index:1;
margin-top:-20px;
height:40px;
width:100%;
background-color:rgba(255,255,255,0.5);
}
End Result
The trick here is to have the middle div banner-section positioned absolutly, and with a margin-top value negative corresponding to half its height, giving us this end result:
Explanation
Since the element with the CSS class .banner-section gets positioned absolutely, it will rise above in the document stack order. So the elements .top-section and .btm-section stay one after the other.
An element with position:absolute will then need some extra css to keep up with the desirable appearence, like a width declaration and a height declaration to set its size.
Check if this one helps you
http://codepen.io/anon/pen/EJBCi.
<div class="outer">
<div class="topSec"></div>
<div class="midSec">Midcontent</div>
<div class="btmSec"></div>
</div>
CSS
.outer {
position: relative;
height: 400px;
text-align: center;
}
.topSec {
height: 50%;
background: red ;
}
.btmSec {
height: 50%;
background: yellow ;
}
.midSec {
position: absolute;
background: rgba(255,255,255,0.7);
z-index: 1;
top: 50%;
height: 60px;
margin-top: -30px;
left: 0;
right: 0;
line-height: 60px
}
I've stumbled upon some unexpected behaviour when testing a layout in Firefox. It seems that when a parent is set to display:table-cell and position:relative, its children do not respect the parent width when positioned absolutely and given 100% width. Instead, the child width is set to the parent's parent width. I've recreated this issue with a fiddle:
http://jsfiddle.net/D6Rch/1/
which is structured as:
<div class="table">
<div class="cell-1">
<div class="content-1">this must be positioned absolutely</div>
<div class="content-2">as these divs will be overlapping</div>
</div>
<div class="cell-2">
<div class="advert">fixed width advert</div>
</div>
</div>
.table {
width:600px;
height:400px;
border:3px solid black;
display: table;
position: relative;
table-layout: fixed;
}
.cell-1 {
width: auto;
display: table-cell;
background: yellow;
position: relative;
margin-right:10px;
}
.cell-2 {
margin-right:10px;
width: 100px;
display: table-cell;
background: pink;
position: relative;
}
.content-1 {
position: absolute;
top: 10px;
width: 100%;
background: lightgreen;
z-index: 5;
}
.content-2 {
position: absolute;
top: 50px;
width: 100%;
background: lightblue;
z-index: 5;
}
.advert {
position: relative;
border: 1px solid red;
}
It functions as expected in Chrome & Safari, but not on Firefox. Question is, why does this happen? And is there a workaround for this or should I take an altogether different approach?
Thanks in advance,
This is a known bug in Gecko. See the Gecko Notes here - https://developer.mozilla.org/en-US/docs/Web/CSS/position
So, you'll have to wrap you content divs in another positioned div. Like so
http://jsfiddle.net/D6Rch/4/
<div class="cell-1">
<div class="wrapper">
<div class="content-1">this must be positioned absolutely</div>
<div class="content-2">as these divs will be overlapping</div>
</div>
</div>
.wrapper {
position: relative;
}
I have a in my webpage which carries 2 images. I want one image to be aligned left and other to the right end of the division.
The JsFiddle
Here's my HTML:
<div class="header">
<img id ="ttl" src="Home_files/images/ttl.png">
<img id ="se" src="Home_files/images/se.png">
</div>
and CSS:
.header {
position: relative;
top: 0%;
height: 20%;
}
/*Header CSS*/
img#ttl {
position: relative;
top:50%;
height: 50%;
left: 0px;
}
img#se {
position: relative;
top:60%;
height:30%;
vertical-align:right;
margin-right: 2%;
}
PS: I tried float:right;. Its works in in Chrome and FF but not in IE.
And ofcourse this div has a parent div. But I don't think that will be a problem.
You can wrap the images inside a position relative container and use position: absolute; to position them to bottom left and bottom right
Demo
<div class="wrap">
<img src="http://images.google.com/intl/en_ALL/images/logos/images_logo_lg.gif" />
<img src="http://images.google.com/intl/en_ALL/images/logos/images_logo_lg.gif" />
</div>
div.wrap {
width: 600px;
border: 1px solid #f00;
height: 300px;
position: relative;
}
.wrap img {
border: 1px solid blue;
position: absolute;
bottom: 0;
}
.wrap img:nth-of-type(1) {
left: 0;
}
.wrap img:nth-of-type(2) {
right: 0;
}
Note: Am using nth-of-type to select images so that I don't have to
declare classes for each image, if you want to support older browsers,
you need to add class for each image and replace :nth-of-type with
those classes
try this
<div class="header">
<div class="left"><img id ="ttl" src="Home_files/images/ttl.png"></div>
<div class="right"><img id ="se" src="Home_files/images/se.png"><div>
</div>
CSS
.left{
float:left;
}
.right{
float:right;
}
Demo
I used a table in a basic HTML header div for an email. It worked fine. In tr, had one image on left as td and another on right with float: right in another td.