I have a text in the h1 tag. I want to imitate what I have on the image. How can I have letters sitting on the bottom of the div and descenders of going to a div below it?
You can use position like this:
.top, .bottom {
height:100px;
}
.top {
background:#eaf4fe;
}
.bottom {
background:#f6f4f5;
text-align:center;
}
h1 {
position:relative;
top:-25px;
margin:0;
}
<div class="container">
<div class="top"></div>
<div class="bottom">
<h1>Lorem Ipsum</h1>
</div>
</div>
You could accomplish the same thing with negative margin and absolute positioning as well.
Just playing with position and line-height values. I think it will change depending on the font-family.
Hope this is what you were looking for. Happy to explain or help in a better solution if needed.
.top,
.bottom {
height: 50vh;
width: 100vw;
position: relative;
}
h1 {
font-size: 5em;
margin: 0;
line-height: 0.7em;
position: absolute;
z-index: 1;
bottom: 0;
color: white;
}
.top {
background: teal;teal
}
.bottom {
background: aqua;
}
<div class="top"><h1>Made Easy</h1></div>
<div class="bottom"></div>
Related
<div class="wrapper">
<div class="header">
</div>
<div class="featured">
</div>
</div>
The css look like this
.header {
background: green;
height:620px;
}
.footer {
background: blue;
height:200px;
}
.featured {
background: yellow;
width:500px;
height:420px;
margin:0 auto;
position: relative;
top: -200px;
}
while pushing a negative top, the silbing div "footer" will not move up accordingly. That's a large empty space in between two divs
This is my code
http://codepen.io/adrianmak/pen/qZRqwy
Give margin-top:-200px instead of top:-200px. As it is relative element. It will take space even if you are moving it by giving negative top.
.featured {
background: yellow;
width:500px;
height:420px;
margin:-200px auto 0;
position: relative;
}
Working Fiddle
I hope you want this
.wrapper{
position: relative;
}
.header {
background: green;
height:620px;
}
.footer {
background: blue;
height:200px;
}
.featured {
background: yellow;
width: 500px;
height: 420px;
margin: 0 auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin-top: 200px;
}
<div class="wrapper">
<div class="header">
</div>
<div class="featured">
</div>
<div class="footer">
</div>
</div>
It's because you are using position relative. When you add top-200px it move that <div> up but did not leave his space, you need to use position absolute or negative margin(-ve).
jsfiddle.net/zrsgb2rd/
Sorry if the title is confusing. Basically, I'm working on a tumblr theme where I need three adjacent divs wrapped in a fixed-width container. None of their contents are fixed, so they all have variable widths. The middle div should always be centered to the container, while the divs to the left and right will always be "touching" the middle div, and, thus, move around as the middle div's width changes (the left and right s may be images, so text-align doesn't always work). Plus, I may also need to hide the left, right, or both the left and right divs.
Here's a conceptual image:
I can obtain this using flexboxes easily (JFiddle), but flex only has 86% global support.
This is the closest I could get without using flexboxes, but I can't get that middle div (with the text) centered to the title div, while preserving the relative positions of the two images on either side: JFiddle
* {
height: 100%;
position: relative;
}
body {
height: 200px;
}
/* just to get rid of scrollbar */
p {
margin: 0;
}
.title {
background: #aaa;
height: 22px;
width: 450px;
/* for example */
margin: 0 auto;
}
.container {
background: #abc;
float: left;
}
.lr {
transform: translate(0, -100%);
}
.left {
background: green;
float: left;
}
.left img {
transform: translate(-100%);
}
.center {
background: red;
display: inline-block;
z-index: 2;
}
.right {
background: blue;
float: right;
}
.right img {
transform: translate(100%);
}
.left img, .right img {
height: 100%;
}
<div class="title">
<div class="container">
<div class="center">CENTERCENTERCENTERCEN</div>
<div class="lr">
<div class="left">
<img src="http://i.imgur.com/7bvErJN.jpg" />
</div>
<div class="right">
<img src="http://i.imgur.com/q8Mq0YZ.jpg" />
</div>
</div>
</div>
</div>
Other people have mentioned trying to display the title as a table, but that would require centering the middle cell to the whole row, and having the cells to the left and right take up the rest of the space, and I'm not sure if you can do that when their widths aren't fixed.
Anyone know of any other solutions?
If you can change your HTML then apply this:
First move the left and right elements inside center:
<div class="center">
CENTERCENTERCENTERCEN
<div class="left">
testtest<img src="http://i.imgur.com/7bvErJN.jpg" />
</div>
<div class="right">
<img src="http://i.imgur.com/q8Mq0YZ.jpg" />
</div>
</div>
Then on the CSS :
/*Keep the center container on the middle*/
.title {
text-align:center;
}
.center {
position:relative;
display:inline-block;
}
/*Position elements based on the relative center parent*/
.left {
position:absolute;
top:0;left:0;
transform:translateX(-100%)
}
.right {
position:absolute;
top:0;right:0;
transform:translateX(100%)
}
Check this DemoFiddle
Using position: absolute should help in this.
I changed your HTML to following:
<div class="title">
<div class="container">
<img class="left" src="http://i.imgur.com/7bvErJN.jpg" />
<div class="center">CENTERCENTERCENTERCEN</div>
<img class="right" src="http://i.imgur.com/q8Mq0YZ.jpg" />
</div>
</div>
CSS
.title {
background: #aaa;
height: 22px;
width: 450px;
/* for example */
margin: 0 auto;
text-align: center;
}
.container {
background: #abc;
display: inline-block;
margin: 0 auto;
position: relative;
text-align: left;
}
.center {
background: red;
}
.left, .right {
position: absolute;
top: 0px;
}
.left {
right: 100%;
}
.right {
left: 100%;
}
Working Fiddle
Updated to show OP Update
No need for flex here, why not just use percentages? Float all the containers and put the percentages as relative to the sizes you want. (50% for the middle, 25% for the outside containers).
You can use the outside containers as wrappers so you can still use a border on the inner containers without messing up the sizing. Then just float the inner containers within the outside containers (if that makes sense). The example below just floats the inner p tags to the outer containers.
This makes it always hug the inner container, while keeping relative sizes and also keeping the middle centered.
Example below:
Fiddle
HTML
<div class="container">
<div class="flexa">
<div class="left">
<p>leftleft</p>
</div>
<div class="center"><p>CENTERCENTdsfdfdERCENTsdfdfsfERCEN</p></div>
<div class="right">
<p>ri</p>
</div>
</div>
<div class="bottom">BOTTOMOMOM</div>
</div>
CSS
* {
margin: 0;
padding: 0;
}
div {
background: #aaaaaa;
overflow: hidden;
}
p{
border: 1px solid black;
}
.container {
width: 500px;
/* for example */
margin: 0 auto;
}
.right p{ /* This is what makes it work. This could be a div with class of inner or something like that. */
float:left;
}
.left p{
float:right;
}
.flexa div{
float:left;
}
.left {
width:25%;
}
.center {
width: 50%;
}
.right {
width:25%;
}
.bottom {
display: block;
margin: 0 auto;
text-align: center;
}
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
}
pretty new to web design and I thought it would be a good idea to create a basic mockup of a website with a header, a paragraph and a sticky footer just to ensure I've got some basics down :)
I'm wondering how to center the .paragraph div vertically as well as horizontally and also if there are any obvious problems or inefficiency with the code that I should be aware of. I just want to make sure I can code a basic layout without developing bad habits.
So I ended up with this css:
.head {
margin: auto;
height: 100%;
width: 100%;
background-color: #000;
color:white;
text-align:center;}
body {
background-color:#99C;
}
.h1 {
font-size:50px;
font-family:Georgia, "Times New Roman", Times, serif;
padding:30px;
}
.paragraph {
color:#FFF;
text-align:center;
background-color:#333;
width:35%;
margin:auto;
margin-top:165px;
padding:10px;
}
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
/* equal to footer height */
margin-bottom: -70px;
}
.wrapper:after {
content: "";
display: block;
}
.site-footer, .wrapper:after {
/* .push must be the same height as footer */
height: 70px;
}
.site-footer {
background: orange;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-size:40px;
line-height:70px;
}
And here's how it looks:
Thanks in advance!!!
Adam H
what about when you need to change the header/footer height for some reason?
you'll need to alter more than one rule in your CSS to keep your layout as you want it.
Here's the same layout that you desire, without fixing any height, using pure CSS.
Working Fiddle
HTML:
<div class="Container">
<div class="Header">
<p>I'm in the header</p>
<p>my height is not fixed</p>
</div>
<div class="HeightTaker">
<div class="Wrapper Container Inverse">
<div>
<div class="Footer">
<p>I'm in the footer</p>
<p>my height is not fixed</p>
</div>
</div>
<div class="HeightTaker">
<div class="Wrapper">
<div class="Content">
<div>
<p>I'm in the content</p>
<p>I always span the rest of the page.</p>
<p>If my content is bigger than my available space, I will scroll</p>
<p>This Layout has been tested on: IE10, FireFox, Chrome, Safari, Opera using Pure CSS only</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
*
{
margin: 0;
padding: 0;
}
html, body, .Container
{
height: 100%;
}
.Container:before
{
content: '';
height: 100%;
float: left;
}
.HeightTaker
{
position: relative;
z-index: 1;
}
.HeightTaker:after
{
content: '';
clear: both;
display: block;
}
.Wrapper
{
position: absolute;
width: 100%;
height: 100%;
}
.Inverse, .Inverse > *
{
-moz-transform: rotateX(180deg);
-ms-transform: rotateX(180deg);
-o-transform: rotate(180deg);
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
}
.Header
{
/*for demonstration only*/
background-color: #bf5b5b;
}
.Content
{
height: 100%;
overflow: auto;
text-align: center;
font-size: 0;
/*for demonstration only*/
background-color: #90adc1;
}
.Content:after
{
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.Content > div
{
font-size: medium;
display: inline-block;
vertical-align: middle;
}
.Footer
{
/*for demonstration only*/
background-color: #b5a8b7;
}
Notice: the only Downside in my approach, is that I have to construct the footer before the content (in the HTML).
I am trying to make 3 div's in row design. Where the header and footer have fixed height.
The center div expands to fill the empty space. I have tried but the closest I got is the code below. Still having problems with the center div which expands over the footer div.
html:
<div id='container'>
<div id='rowOne'>row 1</div>
<div id='rowTwo'>row 2</div>
<div id='rowThree'>row 3</div>
</div>
css:
#rowOne {
width: 100%;
height: 50px;
background: green;
}
#rowTwo {
width: 100%;
background: limegreen;
height:100%;
overflow:hidden;
}
#rowThree {
width: 100%;
position: fixed;
clear: both;
background: green;
position:absolute;
bottom:0;
left:0;
height:50px;
}
#container {
height: 100%;
}
Three Row pure CSS
I know this post is getting on a bit, but despite claims to the contrary, you can do this very simply with CSS. No need for JavaScript, jQuery, CSS 3 hacks etc.
Here's a couple of jsf's that show fixed header and footer and dynamic body div.
This first one shows fixed pixel height header and footer and dynamic body EXACTLY as you wanted in your image
http://jsfiddle.net/LBQ7K/
<body>
<div class="header"><p>Header</p></div>
<div class="cssBody"><p>Hello World</p></div>
<div class="footer"><p>Footer</p></div>
</body>
html, body, {
height: 100%;
}
.header {
position: absolute;
top: 0px;
height: 50px;
width: 100%;
background: #f00;
}
.footer {
position: absolute;
bottom: 0;
height: 50px;
width: 100%;
background: #00f;
}
.cssBody {
position: absolute;
top: 50px;
bottom: 50px;
width: 100%;
background: #0f0;
}
The second shows you can use the same technique to have dynamic headers & footers.
http://jsfiddle.net/reqXJ/
<body>
<div class="header"><p>Header</p></div>
<div class="cssBody"><p>Hello World</p></div>
<div class="footer"><p>Footer</p></div>
</body>
html, body, {
height: 100%;
}
.header {
position: absolute;
top: 0px;
height: 15%;
width: 100%;
background: #f00;
}
.footer {
position: absolute;
bottom: 0;
height: 15%;
width: 100%;
background: #00f;
}
.cssBody {
position: absolute;
top: 15%;
bottom: 15%;
width: 100%;
background: #0f0;
}
This is a very common problem, one of the solutions that worked for me is from the following website:
http://ryanfait.com/sticky-footer/
with the code:
http://ryanfait.com/sticky-footer/layout.css
and another popular choice:
http://www.cssstickyfooter.com/
If this does not meet your needs, let us know, we can help more.
Seems like you are try to do a sticky footer, well... you will need a few hacks:
HTML:
<div id='container'>
<div class="header">
<h1>Sticky Footer!</h1>
</div>
<div id='rowOne'>row 1</div>
<div id='rowTwo'>row 2</div>
<div id='rowThree'>row 3</div>
<div class="push"></div>
</div>
<div id='footer'></div>
CSS
.container {
min-height: 100%;
height: auto !important;height: 100%;
/* the bottom margin is the negative value of the footer's height */
margin: 0 auto -142px;
}
.footer, .push{
height: 142px; /* .push must be the same height as .footer */
}
Note: Replace the footer and push height for your fixed height and don't forget to insert the push div after the rows in the container.
You can fake this by absolutely positioning the rows, and adding padding to top and bottom for the middle row. You cannot do this like you were doing with tables
#container { position:relative; height:800px } // needs height
#rowOne, #rowTwo, #rowThree { position:absolute }
#rowOne { top:0; left:0 }
#rowThree { bottom:0; left:0 }
#rowTwo { left:0; top:0; padding:50px 0; } // top and bottom padding 50px
could this line of code help?
DEMO
Try this:
#container{
...
position:relative;
}
#content{
min-height: xxx;
}
This should exactly do what you want:
html code:
<div id="header">
header
</div>
<div id='container'>
<div id='rowOne'>one</div>
<div id='rowTwo'>two</div>
<div id='rowThree'>three</div>
</div>
<div class="clearfix"></div>
<div id="footer">
footer
</div>
CSS code:
.clearfix {
clear: both;
}
#header, #footer {
background-color: red;
}
#container {
width: 100%;
}
#rowOne {
width: 25%;
background: green;
float: left;
}
#rowTwo {
width: 55%;
height: 100px;
background: limegreen;
float: left;
}
#rowThree {
width: 20%;
background: green;
float: left;
}
You can also test it on jsFiddle
Have you tried looking at a CSS framework? They come with default classes you can use to set up something like that within a few short minutes. They also help producing cleaner html and interfaces that you can easily redesign at a later time.
http://twitter.github.com/bootstrap/index.html
I hope you are looking like this :- DEMO
CSS
#container {
height: 100%;
}
#rowOne {
height: 50px;
background: green;
position:fixed;
left:0;
right:0;
}
#rowTwo {
background: limegreen;
min-height:500px;
position:absolute;
left:0;
right:0;
top:50px;
}
#rowThree {
position: fixed;
background: green;
bottom:0;
left:0;
right:0;
height:50px;
}
HTML
<div id='container'>
<div id='rowOne'>row 1</div>
<div id='rowTwo'>row 2</div>
<div id='rowThree'>row 3</div>
</div>
In response to your comment on jedrus07's answer:
all this sollutions expand the center div behind the footer div. I want a solution with each div having only his own space.
The only way to do that is with CSS 3 calc(). If you don't need to support very many browsers, that's an option, and here's a demo of it in action:
http://jsfiddle.net/5QGgZ/3/
(Use Chrome or Safari.)
HTML:
<html>
<body>
<div id='container'>
<div id='rowOne'>row 1</div>
<div id='rowTwo'>row 2</div>
<div id='rowThree'>row 3</div>
</div>
</body>
</html>
CSS:
html, body, #container {
height: 100%;
}
#rowOne {
height: 50px;
background: #f00;
}
#rowTwo {
height: -webkit-calc(100% - 100px);
background: #0f0;
}
#rowThree {
height: 50px;
background: #00f;
}
If you want wider browser support, you're going to have to go with a sticky footer solution like the ones jedrus07 mentioned, or Tom Sarduy's answer.
One way would be using Jquery to set the minimum height of the middle div to be the height of the screen, minus the height of the other two divs (100px)
something like this should work:
$(document).ready(function() {
var screenHeight = $(document).height() - 100px;
$('#rowTwo').css('min-height' , screenHeight);
});