Vertically center content between header and footer - css

I wonder if any one can help me. I have a website with a header, footer and content containers. Now I wish to vertically centre the content between the header and footer containers instead of the page. Does anybody have any ideas how to achieve this???


try the below css
<div >header</div>
<div class="container">
<p>This small paragraph...</p>
</div>
<div >footer</div>
CSS:
div.container {
min-height: 10em;
display: table-cell;
vertical-align: middle ;}


try the below css
<div class="wrapper">
<div >header</div>
<div class="container">
<p>This small paragraph...</p>
</div>
<div >footer</div>
</div>
CSS:
.wrapper{ display: table; }
div.container {
min-height: 10em;
display: table-cell;
vertical-align: middle ;
}
Try this i just added wrapper with display:table style.
table-cell property will work only with a wrapper having display:table property

Related

Why does Sticky Footer break when I wrap it in 2 divs?

I was trying to implement sticky footer with zurb foundation 5.5.3 off-canvas menu for hours and I can't figure out what's causing the error.
Sticky footer works: https://codepen.io/marko_avlijas/pen/dWBJVM
When I wrap it in off canvas menu, it doesn't: https://codepen.io/marko_avlijas/pen/vmqpey
This is minimal html and css, so this question doesn't depend on codepen.
HTML
<div class="wrapper">
<div class="content">
<h1>Sticky Footer of Unknown Height (no javascript)</h2>
<button id="button-show">Toggle Content</button>
</div>
<div class="footer">
<h3>Sticky footer</h3>
<p>Footer of variable height</p>
</div>
</div>
CSS
html, body {
height: 100%;
margin: 0;
}
.wrapper {
display: table;
table-layout: fixed;
height: 100%;
width: 100%;
}
.content {
display: table-row;
height: 100%;
/* ...as content is added (won't scroll) */
}
.footer {
display: table-row;
}
Broken HTML
<div class="off-canvas-wrap" data-offcanvas>
<div class="inner-wrap">
<!-- This part is same like before -->
<div class="wrapper">
<div class="content">
<h1>Sticky Footer Broken!!!</h2>
<button id="button-show">Toggle Content</button>
</div>
<div class="footer">
<h3>Sticky footer</h3>
<p>Footer of variable height</p>
</div>
</div>
</div>
</div>

You need to add:
.off-canvas-wrap, .inner-wrap {height:100%;}
When you are using 100% height, the parent needs to have a fixed height... or if still want it 100%, all parents till htmlneeds 100% to make it work.

How can I fix the div to the bottom of the bigger div?

I am creating a simple css chart responsive that works on any browser.
This is my code:
<div style="width:500px;height:300px;">
<div style="width:10%;height:20%;background:#00ffff;float:left;"></div>
<div style="width:10%;height:40%;background:#00ffff;float:left;"></div>
<div style="width:10%;height:80%;background:#00ffff;float:left;"></div>
</div>
But as you can see, the chart is inverted:
http://jsfiddle.net/xkd6twsq/
I tried with:
position:relative;
bottom:0px;
but doesn't work:
http://jsfiddle.net/xkd6twsq/1/

Use display: inline-block instead of float. The parent needs display: table-cell and vertical-align to align graph to bottom.
<style>
div {
display: table-cell;
vertical-align: bottom;
}
div div {
display: inline-block;
width: 10%;
background: #0ff;
}
</style>
<div style="width:500px;height:300px;">
<div style="height:20%;"></div>
<div style="height:40%;"></div>
<div style="height:80%;"></div>
</div>
http://jsfiddle.net/xkd6twsq/4/

The problem is the float:left, using display: inline-block will get what you want:
<div style="width:500px;height:300px;">
<div style="width:10%;height:20%;background:#00ffff;display:inline-block;"></div>
<div style="width:10%;height:40%;background:#00ffff;display:inline-block;"></div>
<div style="width:10%;height:80%;background:#00ffff;display:inline-block;"></div>
</div>
All about floats from CSS-tricks explains when to use floats and this display types answer details why floats are not the best option.

Horizontal layout issues - divs overlapping

I am having an issue with a horizontal layout: http://jsfiddle.net/GqH6s/4/
It seems the parent #content div gets its width from its first child (#projects), not the total of all its children.
I know I could work around it with jQuery but I'd like to use CSS if possible.
Thanks for your help!
The basic html:
<div id="content">
<div id="projects" class="section">
<div class="block">Content</div>
</div>
<div id="profile" class="section">
<div class="block">Content</div>
</div>
<div id="team" class="section">
<div class="block">Content</div>
</div>
</div>
And CSS:
#content {
white-space: nowrap;
display: inline-block;
}
.section {
display: inline-block;
}
.block {
white-space: normal;
}

You need to place the #profile and #team div's within the #project div so that they appear inline with the rest of the sections.
Should looks something like this:

How to center align content in a DIV tag

I have two div tags:
<div id="parent">
<div id="content">
//content
</div>
</div>
the content of the <div id="content"> is added dynamically so I don't know its width and I can't set width and margin to it.
How can I center align <div id="parent"> content?
PS: I don't want to use javascript to do this.

Try this:
#parent {
text-align: center;
}
#content {
display: inline-block;
}

You can use text-align property.
#parent {
text-align: center;
}

Fluid divs - left fluid with inside fluid and fix, right fix

I have HTML structure
<div class="wraper">
<div class="lewy-fluid">
<div class="lewy-fluid-fluid">
TITLE
</div>
<div class="lewy-fluid-fix">
Kontakt
</div>
</div>
<div class="prawy-fix">
Czat
</div>
</div>
And need to make:
_____________________________________________________________________________
| .LEWY-FLUID | .PRAWY-FIX |
and inside .LEWY-FLUID:
_________________________________________________________
| .LEWY-FLUID-FLUID | .LEWY-FLUID-FIX |
So I have fluid and fixed div and inside that fluid div I also have fluid and fixed div.
How can I make things inside .LEWY-FLUID to be how I want to?
fiddle link: http://fiddle.jshell.net/ozeczek/hu4JH/

I checked here and found a solution to the problem you are having. The main trick here is flipping the order of the divs (put the fixed right div first in your html, then the fluid left div after that).
<div class="wraper">
<div class="prawy-fix">Czat</div>
<div class="lewy-fluid">
<div class="lewy-fluid-fix">Kontakt</div>
<div class="lewy-fluid-fluid">Headshot media</div>
</div>
</div>
Then for your css, set your fixed divs with float:right and your desired width, and your fluid divs to have width:auto and overflow:hidden so they take up the remaining space.
Demo: http://fiddle.jshell.net/5kXHR/
For more about why you should use overflow:hidden, read here.

How about trying Flexbox? Right now I can only test on the latest version of browsers, but this seems to work fine and accomplish what you need:
HTML:
<div class="wrap">
<div class="fluid wrap">
<div class="fluid"></div>
<div class="fixed"></div>
</div>
<div class="fixed"></div>
</div>
CSS:
.wrap {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.wrap div {
height: 5em;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
}
.fluid {
background: tomato;
width: 100%;
}
.fixed {
background: beige;
width: 150px;
min-width: 150px;
}
.fluid.wrap .fluid {
background: orange;
}
.fluid.wrap .fixed {
background:tomato;
}
Fiddle: http://jsfiddle.net/xdLPZ/2/

Resources