I'm looking for a style which aligns the white box in this fiddle to the center of the screen.
I thought I could use text-align-middle in an outer div-element.
But unfortunately it doesn't work.
I've been trying for hours now and hope you can help me.
Thank you in advance.
Add this to your current CSS :
.abs {
width: 100%;
}
.box {
width: 220px;
margin: auto;
}
.background1{
margin:auto;
background-color:#000000;
min-width:100%;
min-height:500px;
}
.bgcolor {
position:relative;
width:100%;
height:100%;
background-color:#000000;
opacity:0.5;
}
.abs {
display:block;
margin:auto;
width:100%;
height:500px;
}
.box {
margin:auto;
position: relative;
width:220px;
height:80px;
background-color:#ffffff;
border:1px solid grey;
}
.abs{
position: aboslute;
width: 100%;
}
.box{
/*either use*/
width: 220px; /*or larger for fixed width*/
/*or use*/
max-width: 400px; /*or any other size to give it a flexible auto size*/
margin: auto; /* or margin: 0 auto 0 auto;*/
}
Older IE versions don't allow such constructs. In that case you have to add:
.abs{
text-align: center;
}
.box{
text-align: left;
}
For backwards compatibility.
Related
I'm having a small issue with my html layout .
When i have content - it works properly :
http://jsfiddle.net/exqofLft/
but when i have no content . the "wrap" height becomes 0 and the header and footer comes together.
e.g : http://jsfiddle.net/aqgo9370/
When there is no content or little content . i want the header at the top , followed by the full size wrap and the footer at the bottom of the page.
Any ideas how to do this ?
e.g :
CSS :
html, body
{
height:auto;
background-color:grey;
position:relative;
margin:0;
}
#header
{
position:absolute;
width:auto;
min-width:100%;
height:75px;
background-color:yellow;
}
#wrap
{
position:relative;
width:auto;
min-width:100%;
height:auto;
background-color:blue;
margin:75px 0 0 0;
}
footer
{
position:absolute;
width:auto;
min-width:100%;
height:50px;
background-color:black;
}
By using vw/vh we can size elements to be relative to the size of the viewport. Add the below code in this id #wrap{}, Demo
min-height: 100vh;
You could use jquery for this.
var headerH = $('#header').height();
var footerH = $('footer').height();
var windowH = $(window).height();
$('#wrap').css({
'minHeight': (windowH - (headerH + footerH)) + 'px'
});
I made some changes in your html/css though.
Check the fiddle:
http://jsfiddle.net/skeurentjes/aqgo9370/9/
You can use box-sizing:border-box , and give it a padding to bottom , and top corresponding to footer and header respectively :
#header
{
top:0px;
position:relative;
width:100%;
height:75px;
background-color:yellow;
}
#wrap
{
position:relative;
width:100%;
height:100%;
background-color:blue;
box-sizing: border-box;
padding-top: 75px;
padding-bottom:50px;
}
footer
{
position:absolute;
width:auto;
min-width:100%;
height:50px;
background-color:black;
bottom:0px;
}
Example
Js and position is not needed to Do this. Try this, This is Technically called Sticky footer
html, body {
height:100%;
background-color:grey;
margin:0;
}
#content {
float: left;
width: 100%;
min-height: 100%;
padding-bottom: 50px;;/*height of your footer*/
box-sizing: border-box;
}
#header {
width:100%;
height:75px;
background-color:yellow;
}
#wrap {
width:100%;
height:auto;
background-color:blue;
}
footer {
float: left;
width:100%;
height:50px;
background-color:black;
margin-top: -50px;/*height of your footer*/
}
<div id="content">
<div id ="header"></div>
<div id = "wrap"></div>
</div>
<footer></footer>
Use padding-bottom with desired height like
#wrap
{
padding-bottom:100%;/*or 50% or px value like 50px*/
}
html,
body {
height: auto;
background-color: grey;
position: relative;
margin: 0;
}
#header {
position: absolute;
width: auto;
min-width: 100%;
height: 75px;
background-color: yellow;
}
#wrap {
position: relative;
width: auto;
min-width: 100%;
height: auto;
background-color: blue;
margin: 75px 0 0 0;
padding-bottom: 100%;
}
footer {
position: absolute;
width: auto;
min-width: 100%;
height: 50px;
background-color: black;
}
<div id="header">
<div>
<div id="wrap"></div>
<footer></footer>
It's working as it should. Elements always collapse to zero with no content. In order to achieve any height without content, you must assign a height value.
add Minimum height of wrap id
for example :
min-height:500px;
I try to vertically center an image in the middle of the body but nothing seems to work. I've tried different tricks found here (height 100%, table-cell, position:relative...), but with no luck until now. My code is
html:
<div id="container">
<div id="header">Header</div>
<div id="body">
<div class="image"></div>
</div>
<div id="footer">Footer</div>
</div>
CSS:
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ccc;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px;
}
.image {
background: url("http://lorempixel.com/300/200/nature/") no-repeat center;
height: 200px;
width: 100%;
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px;
background:#ccc;
}
I made a fiddle here: http://jsfiddle.net/dragoeco/hjcz6j0r/1/
I looking for a working solution with IE8+ so maybe there is a jQuery way to do that job? What is important for me is to keep the footer at the bottom of the viewport so that's why I used a obsolute position for footer. Thanks.
Something like this maybe :
LIVE EXAMPLE
html, body {
height: 100%;
}
#container {
height: 100%;
width: 100%;
display: table;
margin-top:-60px; //height of the footer
}
#body {
display: table-cell;
height: 100%;
vertical-align: middle;
}
.image {
background: url("http://lorempixel.com/300/200/nature/") no-repeat center;
height:200px;
}
#header {
background:#ccc;
padding:10px;
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px;
background:#ccc;
}
I had success with the following CSS:
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ccc;
padding:10px;
position: relative;
}
#body {
padding:10px;
padding-bottom:60px;
position: relative;
}
.image {
background: url("http://lorempixel.com/300/200/nature/") no-repeat center ;
position: absolute;
height: 200px;
width: 100%;
top: 50%;
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px;
background:#ccc;
}
Source: http://www.w3.org/Style/Examples/007/center.en.html#vertical
Add this:
.image{
position: absolute;
top: 50%;
margin-top: -100px;
}
It works everywhere (except IE6-7, position relative may be needed there). You can do the same for horizontal centering.
Here is the fiddle: http://jsfiddle.net/hjcz6j0r/7/
Hello I'm trying to align the "container2" div to bottom of "cointainer" but I'm having troubles and I dont know where, any help?
HTML
<div id="container">
<div id="container2">
<p>Text</p>
</div>
</div>
CSS
#container{
/*Colors*/
background-color:rgb(129, 159, 255);
/*Size Box*/
width:400px;
height:200px;
margin:0 auto;
overflow:auto; }
#container2{
/*Colors*/
background-color:black;
color:white;
/*Size Box*/
width:50%;
height:50%;
padding:20px;
margin:0 auto;
overflow:auto; }
http://jsfiddle.net/G4GT4/1/
With the current structure you would have to position the child with position:absolute.
JSfiddle Demo
CSS
#container{
/*Colors*/
background-color:rgb(129, 159, 255);
/*Size Box*/
width:400px;
height:200px;
margin:0 auto;
overflow:auto;
position: relative;
}
#container2{
/*Colors*/
background-color:black;
color:white;
/*Size Box*/
width:50%;
height:50%;
padding:20px;
margin:0 auto;
overflow:auto;
position: absolute;
bottom:0;
left:50%;
margin-left: -25%;
}
Add
#container { position: relative; }
#container2 { position: absolute; bottom: 0; }
Or simply use tables
Demo
#container {
background-color:rgb(129, 159, 255);
display: table-cell;
width:400px;
height:200px;
margin:0 auto;
overflow:auto;
text-align: center;
vertical-align: bottom;
}
#container2 {
background-color:black;
color:white;
/*Size Box*/
width:50%;
height:50%;
padding:20px;
margin:0 auto;
overflow:auto;
display: inline-block;
}
You have to set margin-top (you know both heights) or using positioning, I´ve chosen second variant.
#container {postition: relative}
#container2 {position: absolute; bottom: 0; left: 25%;}
http://jsfiddle.net/G4GT4/2/
You can set position relative to container2
Working fiddle here
#container2{
/*Colors*/
position: relative;
top: 15%;
background-color:black;
color:white;
/*Size Box*/
width:50%;
height:50%;
padding:20px;
margin:0 auto;
overflow:auto;
}
If you don't want to use position absolute; you can do this:
fiddle
css
#container{
text-align:center;
}
#container:before {
content:"";
height:100%;
display:inline-block;
vertical-align:bottom;
}
#container2{
display:inline-block;
vertical-align:bottom;
}
How to create fixed height 1st column layout?
I saw a kevinrose.com blog and i liked it, simple and clean layout, i wanted to use that layout so i was trying to create it but i stuck with this fixed height, i can easily set fixed bar like header, but column, i dont know how to do it
example:
#sidebar
{
background-color: red;
height: 700px;
width: 100px;
float: left;
}
#article
{
background-color: blue;
height: 400px;
width: 200px;
float: left;
}
#like
{
background-color: green;
height: 100px;
width: 200px;
position: fixed;
float: left;
z-index:-5;
}
Use position:fixed on the sidebar, and offset the rest using a margin
#sidebar
{
background-color: red;
width: 100px;
position: fixed;
}
#article
{
background-color: blue;
width: 200px;
margin-left: 100px;
}
Position fixed is how you achieve that. Have a look here: http://jsfiddle.net/wpHMA/
.wrap {
width:100%;
height:100%;
overflow:auto;
position:relative;
}
.sidebar {
background:#333;
color:#fff;
width:25%;
height:100%;
position:fixed;
top:0;
left:0;
}
.content {
width:75%;
float:right;
}
As per your given example "kevinrose.com" left panel is fixed position structure.
You can use following css/html code structure
Css
.leftPan{
width:27%;
background-color:#CCC;
position:fixed;
left:0;
min-height:100%;
}
.rightPan{
margin-left:27%;
height:1000px;
background-color:#999;
}
Html
<div class="leftPan">
Left Panel
</div>
<div class="rightPan">
Right Panel
</div>
here is jsFiddle File
I need to do with html and css such layout:
left width is static for 250px
right is fluid, for other rest of screen (100%-250px)
I try so(i'm using sass):
.wrapper{
width:100%;
margin: 0 auto;
.left{
width:250px;
float:left;
}
.right{
float:right;
width:100%;
margin-left: 250px;
}
}
So how can i solve this problem?
This is pretty simple to do: http://jsfiddle.net/joplomacedo/ExHzk/
If you can't see the fiddle, here's the html and css.
HTML:
<div class="fixed"></div>
<div class="fluid"></div>
CSS:
.fixed {
float: left;
width: 250px;
}
.fluid {
margin-left: 250px;
}
Aside
I left out the wrapper. It's not really relevant for the demonstration. One question though: If you're giving the wrapper a width of 100%, what's the margin: 0 auto for? And do you really need to specify the width?
Try this code if I have understand well:
.wrapper{
width:100%;
margin: 0 auto;
.left{
width:250px;
float:left;
}
.right{
float:right;
width:100%;
margin-right: 250px;
}
}
You could just remove the float:right on the .right like:
right{
width:100%;
margin-left: 250px;
}
http://jsfiddle.net/RfHqX/
Notice that I didn't use SASS-style.
use margin not float for right div
.wrapper{
width:100%;
margin: 0 auto;
}
.left{
width:250px;
height:100%;
float:left;
background:#f00;
}
.right{
height:100%;
margin-left: 250px;
background:#0f0;
}
DEMO