I've been sitting at this problem now for about 4h. Way to long I suppose. So here I am:
I would like to distribute div containers vertically as soon as the viewport exceeds a specific height. Here's a sketch of an example.
HTML:
<div class="bubu">
<div class="center1"></div>
<div class="center2">
<div class="element"></div>
</div>
<div class="center3"></div>
<div class="center4">
<div class="element"></div>
</div>
<div class="center5"></div>
</div>
CSS:
* {
margin:0;
padding:0
}
body {
margin:0;
text-align:center;
background: no-repeat fixed center center #030303;
allowtransparency:true
}
.bubu {
background-color:#eee;
position: absolute;
height: 100%;
width:500px;
left: 50%;
margin-left: -275px;
/* width / 2 */
}
.center1 {
background-color:red;
position: relative;
height: 10%;
width:100%
}
.center2 {
background-color:yellow;
position: relative;
height: 35%;
width:100%
}
.center3 {
background-color:red;
position: relative;
height: 10%;
width:100%
}
.center4 {
background-color:yellow;
position: relative;
height: 35%;
width:100%
}
.center5 {
background-color:red;
position: relative;
height: 10%;
width:100%
}
.element {
background-color:#123456;
position: absolute;
height: 250px;
width:500px;
top:50%;
margin-top: -125px;
/* width / 2 */
}
Since margin:auto 0; will not do the job (will convert to 0 in height) I tried all different kinds of solutions. This (jsfiddle) is the one that only came close to it.
What I did was basically to add five classes, three of them height:10%; and two of them containing my containers height:35%;
Everything surrounded by one container height:100%;
As you can see, every time the container expands (my example size) off 500px the center expands twice.
How on earth can I solve this??
I assume you want to do some responsive design.
So what about using bootstrap?
It has a very flexible Grid system and it works out of the box on the most devices.
Related
I have what seems to be a simple css question but having difficulty achieving. I have 2 divs that sit one on top of the other. I would like the combined height of both divs to be 100% but the top to be a static defined height. The bottom div will contain a list of data that will overflow to scroll. What is the best way to achieve this? Below is sample code for something close.
#container{
height:auto;
height:100%;
min-height:100%;
}
#top{
height:175px;
min-height:175px;
max-height:175px;
}
#bottom{
height:70%;
}
<div id="container">
<!-- top div set to 100px -->
<div id="top"></div>
<!-- bottom div dynamic height based on remaining real estate -->
<div id="bottom"></div>
</div>
You could use CSS calc(), so #bottom {height:calc(100% - 175px);}.
html, body {
height:100%;
margin:0;
}
#container {
height:100%;
}
#top {
height:175px;
background:lime;
}
#bottom {
height:calc(100% - 175px);
background:teal;
}
<div id="container">
<div id="top">top</div>
<div id="bottom">bottom</div>
</div>
Or use CSS table layout if you need to support more browsers.
html, body {
height:100%;
margin:0;
}
#container {
height:100%;
width:100%;
display:table;
}
#top, #bottom {
display:table-row;
}
#top {
height:175px;
background:lime;
}
#bottom {
height:100%;
background:teal;
}
<div id="container">
<div id="top">top</div>
<div id="bottom">bottom</div>
</div>
You can use height:calc(100% - 175px); for this:
http://jsfiddle.net/9ygz4pnj/
html,body,#container{
height:100%;
}
#top{
height:175px;
border:1px solid red;
}
#bottom{
height:calc(100% - 175px);
border:1px solid green;
}
You can achieve this by defining a height and min-height on your containers.
First of all you need to define a height: 100% in your body (and html).
Than you need to create a container div which will be the mother of your top and bottom divs.
Than use position: relative and min-height: 100% in your container div.
You can align your top div to top: 0 and left: 0 a definite height and position absolute.
You can align your bottom div to bottom: 0 and left: 0 a calc function and position absolute. For the content scrolling part in bottom div use overflow scroll.
JSFiddle Example
Right now, I am using a french (or german keyboard) which is quite hard for me to use. I will edit the answer with a more meaningful text when I return home.
This is a basic css file that you can use.
html, body { height: 100%; margin:0; }
.container {
position: relative;
min-height: 100%;
}
.top {
background: black;
color: white;
height: 200px;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
.bottom {
position: absolute;
bottom: 0;
left: 0;
background: yellow;
height: calc(100% - 200px);
overflow: scroll;
}
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
}
This question already has an answer here:
Change div order with CSS depending on device-width
(1 answer)
Closed 3 years ago.
I've got 3 divs in a wrapper side by side, using:
<div id="left"><h1>title left</h1></div>
<div id="right"><h1>title right</h1></div>
<div id="center"><img src="img/titleimage.jpg" alt=""/></div>
aligned like this with css:
#left{
width:250px;
float:left;
margin:200px auto;
position:relative;
}
#right{
width:250px;
float:right;
position:relative;
margin:200px auto;
}
#center{
margin:60px auto;
margin-bottom:0;
width:500px;
position:relative;
float:left;
}
I would like for the divs to reorder when the browser window becomes smaller. I would like them to appear top to bottom like this :
LEFT
RIGHT
CENTER
or even better
CENTER
LEFT
RIGHT
Any ideas?
Move the center div all the way to the top
<div id="center"><img src="img/titleimage.jpg" alt=""/></div>
<div id="left"><h1>title left</h1></div>
<div id="right"><h1>title right</h1></div>
I think the key here is to think about this from a small-screen-first approach.
If your project can use flexbox, that is something you could work with and change the order of div's with CSS, but I am betting that is not the case. I think you are going to have to use a little absolute positioning once you get to a larger screen to get this working. Here is an example: and a fiddle
HTML
<div class="container">
<div class="inner-w">
<div class="block center">Center</div>
<div class="block left">Left</div>
<div class="block right">Right</div>
</div>
</div> <!-- .container -->
CSS
* {
box-sizing: border-box;
}
.container {
width: 100%;
float: left;
overflow: hidden; /* should be clearfix instead */
}
.container .inner-w {
position: relative;
max-width: 50em;
margin-right: auto;
margin-left: auto;
overflow: hidden; /* should be clearfix instead */
}
.block {
width: 100%;
float: left;
min-height: 10em; /* just for show */
}
#media (min-width: 50em) {
.center {
width: 50%;
position: relative;
left: 25%;
}
.left {
position: absolute;
top: 0;
left: 0;
width: 25%;
}
.right {
float: right;
width: 25%;
}
} /* end break-point */
I used the JsFiddle at jsfiddle.net/5tzk3/10. I changed it to display the div as square shaped dialog (both horizontally and vertically centered). The result is at jsfiddle.net/5tzk3/548.
As you see, centering horizontally was easy, but I could not get it centered vertically. Anyone who knows how to do that with pure CSS?
Edited code below:
<div class="blind">
<div class="wrapper">
<div class="main">
I'm your div with an aspect-ratio of 1:1!
</div>
</div>
</div>
html, body, .blind {
height: 100%;
width: 100%;
}
.blind {
left: 0;
position: fixed;
text-align: center;
top: 0;
}
.wrapper {
display: inline-block;
margin: auto;
position: relative;
width: 50%;
}
.wrapper:after {
content: '';
display: block;
padding-top: 100%;
}
.main {
background-color: rgb(0, 162, 232);
bottom: 0;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
}
Use display: table for the parent div, and display:table-cell; vertical-align: middle for the content div which you want to vertically center.
The most common way of doing this if you've got an element with known dimensions is to use positioning to firstly position it top: 50% (which places the top edge of the element 50% of the way down) and then use a negative top-margin of half the height of the element (pulling it back up by half it's height).
To give you an example, to absolutely position a 200x200 element dead-centre on the page you would use:
.element{
display: block;
width: 200px;
height: 200px;
position: absolute;
top: 50%;
margin-top: -100px
}
Alternatively, you can use a combination of display: table and then display: table-cell on the parents to open up the ability to use vertical-align although this is a bit nasty when it comes to laying out elements around it.
you can drop absolute positionning and use either display:table or inline-block with pseudo elements.
here is a mixed of the 2 methods
1) html/body as a table one cell
2) inner content with ratio preserved and content as inline box set in the middle.
.ratio1-1 {
width:25%;
vertical-align:middle;
margin:auto;
background:turquoise;
}
.ratio1-1:before {
content:'';
padding:50% 0;
width:0;
display:inline-block;
vertical-align:middle;
}
.ib {
display:inline-block;
vertical-align:middle;
}
/* center body content as a table cell */
html {
height:100%;
width:100%;
display:table;
}
body {
display:table-cell;
vertical-align:middle;
text-align:center;
}
<div class="ratio1-1">
<div class="ib">content in middle</div>
</div>
demo: http://codepen.io/gc-nomade/pen/pubFm
Hi all. I need help in arrange the div of my website.
My website has 3 main DIVs.
1. DIV1 - My Header (fixed height)
2. DIV2 - Dynamic Content area so height varies
3. DIV3 - My Footer (fixed height)
All DIVs have 100% width.
The DIV1 header must have 0px with respect to the top of the browser. I wanted the 3 DIVs must be on top of each other as shown in the image. If the user has a resolution taller than my 3 DIVs, what will be at the most bottom after the DIVs are just empty spaces. However, I cant seem to get that layout working. the DIV3 footer keep giving me trouble.
I've following CSS code:
div1 {
position: fixed;
top: 0px;
}
div2 {
position: relative;
top: 0px;
}
div3 {
position: fixed;
top: 0px;
}
If I use position: fixed for DIV3, and my DIV2 has a shorter content, the whole website will look weird.
If I try changed to position: relative for DIV3, DIV3 will overlap and appear in front of DIV1.
Is there any better suggestion for that?
Thank you very much.
Is there any reason why you're using positioning to layout the div's?
Div's will naturally stack on top of each other without any need for positioning.
I think that you want fixed header and footer positioning.
http://www.cssplay.co.uk/layouts/basics2.html
HTML
<div class="div1">header</div>
<div class="div2">Content area</div>
<div class="div3">Footer</div>
CSS
.div1 {
height:100px; background:red; width:100%
}
.div2 {
position: relative;
top: 0px; background:green; width:100%; height:100px;
}
.div3 {
background:blue; width:100%; height:100px;
}
Demo http://jsfiddle.net/K3Unz/2/
I hope this may be helpful to you
use footer as bottom: 0px; if you want to fixed this in bottom
Here the demo: fiddle
body{
background:green;
}
div.one {
position: fixed;
top: 0px;
width: 100%;
height: 50px;
background: #4f4f4f;
}
div.two {
height: 100%;
width: 100%;
margin-top: 50px;
}
div.three {
position: fixed;
bottom: 0px;
width: 100%;
height: 50px;
background: red;
}
Check this: CSS layout generator.
EDIT:
Check this fiddle
Try using:
.head{
position:fixed;
top:0px;
}
.footer{
position:fixed;
bottom:0px;
}
In style, I put same height for div1,div2,div3 = 100px :
<style>
body
{
margin: 0 auto;
}
#div1 {
height: 100px;
width:100%;
top: 0px;
background-color:#F00;
}
#div2 {
height: 100px;
width:100%;
top: 0px;
background-color:#00F;
}
#div3 {
height: 100px;
width:100%;
top: 0px;
background-color:#FF0;
}
</style>
and in html tags:
<body>
<div id="div1">Header</div>
<div id="div2">Cotent</div>
<div id="div3">Footer</div>
</body>
I hope this will fit your requirements,