I know this has been asked many times before but I simply can't follow the instructions on these other topics. Nothing seems to be working for me. Please check the screenshot to get a better understanding of what I'm trying to accomplish. Also, I added my code to this post. Thanks!
header {
width: 960px;
height: 90px;
margin: auto;
background-color: #000;
}
.logo {
float: left;
width: 209px;
height: 54px;
background-color: #ced0d8;
}
<header>
<div class="logo"></div>
</header>
it's worth noting that you could also accomplish this easily with flexbox, like so:
header {
width: 960px;
height: 90px;
background-color: #000;
display:flex;
justify-content: center;
align-items: center;
}
.logo {
width: 209px;
height: 54px;
background-color: #ced0d8;
}
browser support is pretty good
Method 1
Using position:relative; and top:50 and transform: translateY(-50%) you can get it centered, this is so good if you don't know the height of the element, like this:
Support : IE9+ and all other browsers, caniuse.com.
JS Fiddle 1
header {
width: 960px;
height: 90px;
margin: auto;
background-color: #000;
}
.logo {
position:relative;
width: 209px;
height: 54px;
top:50%;
left:0;
transform: translateY(-50%);
background-color: #ced0d8;
}
<header>
<div class="logo"></div>
</header>
Method 2: using .calc() css function ,if you know the height of the element, like this:
Support : IE9+ and all other browsers, caniuse.com
JS Fiddle 2
header {
width: 960px;
height: 90px;
margin: auto;
background-color: #000;
}
.logo {
position:relative;
width: 209px;
height: 54px;
top:calc(50% - 27px); /* 50% parent height - 27px is half of 54px the height of .logo */
left:0;
background-color: #ced0d8;
}
<header>
<div class="logo"></div>
</header>
Method 3: if you know both elements height, you can manually subtract half the height of the .logo from half of the height of the parent div, so 90/2 - 54/2 = 18, like this:
Support: All browsers, caniuse.com.
JS Fiddle 3
header {
width: 960px;
height: 90px;
margin: auto;
background-color: #000;
}
.logo {
position:relative;
width: 209px;
height: 54px;
top:18px; /* 90/2 - 54/2 = 18 */
left:0;
background-color: #ced0d8;
}
<header>
<div class="logo"></div>
</header>
Try this for your logo class:
.logo {
position: relative;
top: 50%;
transform: translateY(-50%);
width: 209px;
height: 54px;
background-color: #ced0d8;
}
Have you heard of flexbox? It's great! Try this :
header {
width: 960px;
height: 90px;
margin: auto;
background-color: #000;
display: flex;
}
.logo {
width: 209px;
height: 54px;
background-color: #ced0d8;
margin: auto 0;
}
There is a 3 ways to solve this problem.
Method 1: Use transform property. ( IE9+ supported )
header {
width: 960px;
height: 90px;
margin: auto;
background-color: #000;
}
.logo {
float: left;
width: 209px;
height: 54px;
background-color: #ced0d8;
top:50%;
transform:translateY(-50%);
position:relative;
}
<header>
<div class="logo"></div>
</header>
Method 2: Use flex property. ( IE10+ supported )
header {
width: 960px;
height: 90px;
margin: auto;
background-color: #000;
display:flex;
align-items: center;
}
.logo {
float: left;
width: 209px;
height: 54px;
background-color: #ced0d8;
}
<header>
<div class="logo"></div>
</header>
Method 3: Use margin property. ( IE3+ supported )
header {
width: 960px;
height: 90px;
margin: auto;
background-color: #000;
}
.logo {
float: left;
width: 209px;
height: 54px;
background-color: #ced0d8;
margin-top: 18px;
/* (90px (header height) - 54px (logo height))/2 = 18px; */
}
<header>
<div class="logo"></div>
</header>
There is a neat trick using absolute positioning as shown below.
Since you specified a height and width for .logo, you can use margin: auto to center it both vertically and horizontally provided that .logo is absolutely positioned and all the offsets are set to zero.
This relies on CSS2 specifications and will work in quite a few browsers.
header {
width: 460px; /* narrow width for demo... */
height: 90px;
margin: auto;
background-color: #000;
position: relative;
}
.logo {
position: absolute;
left: 0; right: 0; top: 0; bottom: 0;
margin: auto;
width: 209px;
height: 54px;
background-color: #ced0d8;
}
<header>
<div class="logo"></div>
</header>
Just play around with the height and the padding of your header :
body {
margin : 0;
}
header {
width: 100%;
height: 54px;
margin: 0;
padding: 26px;
background-color: #000;
}
.logo {
display: block;
width: 209px;
height: 54px;
margin : auto;
background-color: #ced0d8;
border : 1px solid #000;
}
<header>
<div class="logo"></div>
</header>
See also this Fiddle!
There are many ways to vertically align an element, but in this case, where your <div> has an explicit height and sits inside a parent <header> which also has an explicit height, one of the simplest ways - supported by all browsers for the last decade and a half - is:
Apply an equal margin-top and margin-bottom.
header {
width: 960px;
height: 90px;
margin: auto;
background-color: #000;
}
.logo {
float: left;
width: 209px;
height: 54px;
margin-top: 18px;
margin-bottom: 18px;
background-color: #ced0d8;
}
<header>
<div class="logo"></div>
</header>
How to work out that the margin-top and margin-bottom should each be 18px?
(height of <header>) - (height of .logo) = 36px
36px / 2 = 18px
Related
I am trying to make the footer stay at the bottom of the page, NOT the bottom of the screen (fixed) but at the bottom of the entire page, so you can only see it after scrolling to bottom. However, for some reason it stays above the bottom, and I can't seem to find the reason...
FIDDLE:
https://jsfiddle.net/okfudezn/
Image:
HTML (the div has no wrappers etc):
<div class="footer">
<a>REGISTERED NAMES AND TRADEMARKS ARE THE PROPERTY OF THEIR RESPECTIVE OWNERS - Copyright © 2017 All rights reserved</a>
</div>
CSS:
.footer {
background-color: #4b4c46;
height: 55px;
line-height: 55px;
width: 100%;
text-align: center;
color: #e1dac5;
font-size: 14px;
}
Just change replace you content div height to auto
updated fiddle
.content {
position: relative;
width: 650px;
height: auto;
background-color: #e6e6e6;
border: 1px solid #bcbcbc;
margin: 0 auto;
margin-bottom: 80px;
top: -100px;
}
I would try with:
.footer {
position: absolute;
bottom: 0;
}
Change this css
.content {
background-color: #e6e6e6;
border: 1px solid #bcbcbc;
/*height: 650px;*/ /*Remove this*/
margin: 0 auto 30px;/*Change this*/
overflow: hidden;/*Add this*/
position: relative;
/*top: -100px;*//*Remove this*/
width: 650px;
}
.grid {
width: 600px;
/*height: 1000px;*/ /*Remove this*/
margin: 0 auto;
padding-top: 30px;
}
https://jsfiddle.net/okfudezn/
Here you go!
html, body {
margin:0;
padding:0;
height: 100%;
}
#container {
position: relative;
height: auto;
min-height: calc(100% - 54px);
padding-top: 54px; /* Header & Footer */
}
#header {
position: fixed;
top: 0;
width: 100%;
height: 54px;
background: red;
}
#content {
background: orange;
height: 100%;
}
#footer {
position: absolut;
bottom: 0;
width: 100%;
height: 54px;
background: yellow;
}
.simulateContent {
height: 1000px;
}
<div id="container">
<div id="header">
HEADER
</div>
<div id="content">
CONTENT START
<div class="simulateContent"></div>
CONTENT END
</div>
<div id="footer">
FOOTER
</div>
</div>
As a bare bones examples I have those 2 really simple divs:
(the green one is inside the red one)
Now how can I subtract 20 pixels from the bottom and the top of the green div?
html:
<div id="container">
<div id="rows">
</div>
</div>
css:
#container {
width: 200px;
height: 300px;
background: red;
}
#rows {
width: 50%;
height: 100%;
/* margin-top: 20px;
margin-bottom: 20px; */
/* padding-top: 20px;
padding-bottom: 20px; */
/* top: 20px;
bottom: 20px;
height: auto; */
background: green;
}
http://jsfiddle.net/clankill3r/2L6c2bLf/1/
Add padding to #container
padding: 20px 0px;
Edit:
as suggested by #Adam you should contain also
box-sizing: border-box;
to stylesheet if you want to preserve box height
Here is a way to do it without adding padding to the parent div or using a calc in the child div.
JSFIDDLE
#container {
width: 200px;
height: 300px;
background: red;
position: relative;
}
#rows {
position: absolute;
width:50%;
top: 20px;
bottom: 20px;
background: green;
}
This may be the solution:
height: calc(100% - 40px);
JSFiddle
Another solution is
padding:20px 0px;
box-sizing:border-box;
for your container. box-sizing:border-box; preserves the height changing of the container.
Here's a solution:
#rows {
width: 50%;
height: 260px;
margin-top: 20px;
margin-bottom: 20px;
float: left;
background: green;
}
http://jsfiddle.net/2L6c2bLf/5/
Could any one help me around this piece of stupid code where I lost almost 2hours trying to figure out how to make it work. Goal is to center input field verticaly and horizontaly inside horizontal bar.
Here is a simplified code:
HTML:
<div class="navigationBar">
<input type="text" id="searchField">
</div>
CSS:
.navigationBar{
width:100%;
height: 40px;
background-color: rgb(102,102,102);
}
#searchField{
margin; auto;
height: 25px;
width: 200px;
}
I've also tried with display modes, changing position types but no luck.
Here is the code
Adding a line-height wil make it centered vertically.
.navigationBar{
width:100%;
height: 40px;
background-color: rgb(102,102,102);
}
#seachfield
margin; 0, auto;
height: 25px;
line-height: 40px;
width: 200px;
}
Answer is simple, just remove padding for #nav element and set his height and line-height to 40px and then set display: inline-block for #search
#nav {
line-height: 40px;
height: 40px;
}
#search {
display: inline-block;
}
Try below CSS:
.navigationBar{
width:100%;
height: 40px;
background-color: rgb(102,102,102);
position:relative;
}
#searchField{
margin: auto;
height: 25px;
width: 200px;
position:absolute;
left:0px; right:0px; top:0px; bottom:0px;
}
PS : its not margin; auto;, the correct syntax is margin: auto;
DEMO
add display:block;
#searchField{
display:block;
margin: 2px auto;
height: 25px;
width: 200px;
}
margin auto: top and left
add 'text-align: center;'=> (not only alignment text)
.navigationBar{
width:100%;
height: 40px;
background-color: rgb(102,102,102);
text-align: center;
}
#searchField{
height: 25px;
width: 200px;
display:inline-block;
margin:4px auto;
}
2 ways to do it
second way is actually using latest css features so , take care
1.)
.navigationBar { position: relative;}
#searchField { width: 300px;
height: 100px;
padding: 20px;
position: absolute;
top: 50%;
left: 50%;
margin: -70px 0 0 -170px;
}
2.)
.navigationBar { position: relative;}
#searchField { position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
I have 3 divs in my footer, those divs are used for footer and you can see them horizontally on the bottom of the page.
<div class="footer-text footer_mainDIV">
<div class="footer_leftDIV">
All rights reserved
</div>
<div class="footer_middleDIV">
Help
</div>
<div class="footer_rightDIV">
Version 6.0
</div>
</div>
with css:
.footer_mainDIV {
position: relative;
width: 100%;
border-top: 1px solid #eeeeee;
margin: auto;
}
.footer_leftDIV {
text-align: left;
position : absolute;
top: 0px;
left: 20px;
height: 50px;
width: 33%;
margin: auto;
}
.footer_middleDIV {
height: 50px;
width: 33%;
margin: auto;
}
.footer_rightDIV {
text-align: right;
position: absolute;
top: 0px;
right: 20px;
height: 50px;
width: 33%;
margin: auto;
}
What is the way to make my divs from horizontal view to vertical when minimizing the browser using css?
I need the divs to become vertically when the browser is minimized and there is not enough width to see them horizontally.
Thanks,
You can use media query to achieve this. For example i have targeted 480 pixels.
#media all and (max-width: 480px)
{
.footer_leftDIV, .footer_middleDIV, .footer_rightDIV
{
width:100%;
position:relative;
text-align:left;
left:0;
}
}
SAMPLE DEMO
you can update your given css with it
.footer_mainDIV {
position: absolute;
width: 100%;
border-top: 1px solid #eeeeee;
margin: auto;
bottom: 0px;
left:20px;
}
.footer_leftDIV {
text-align: left;
height: 50px;
width: 33%;
float:left;
}
.footer_middleDIV {
height: 50px;
width: 33%;
float:left;
}
.footer_rightDIV {
float:left;
height: 50px;
width: 33%;
}
But add it in a relative property div i hope it will work for you.
Okay so I have been working on implementing the 'holy grail'-style layout for my website, so far it's pretty close but I noticed two things I want to fix.
The goal is a 'sticky' footer with the page length expands with the browser window height, a header, and 3 columns. 2 fixed columns on the left and right side, and a fluid column in the middle.
The issues I am having are that right now, my center 'fluid' column doesn't seem to be acting like I expected. Basically I want the fixed columns to always be fully shown, with the center column filling the remaining horizontal space. But the center column is taking up a lot of room and making it so that I have to scroll to view the right column (see image below). Also, the 'text-align: center' code doesn't appear to be centering text within the viewable area of the center column. Any help appreciated!
image: http://i.imgur.com/FPuSiIu.png
html:
<html>
<head>
<link type="text/css" rel="stylesheet" href="test.css" />
</head>
<body>
<div id="header">
<p>Header</p>
</div>
<div id="container">
<div id="center">
<p>Content</p>
</div>
<div id="left">
<p>Content</p>
</div>
<div id="right">
<p>Content</p>
</div>
</div>
<div id="footer">
<p>Footer</p>
</div>
</body>
</html>
css:
* {
margin: 0;
}
#container {
width:100%;
}
#header {
text-align: center;
background: #5D7B93;
height: 95px;
padding: 5px;
position: fixed;
top: 0;
width: 100%;
z-index: 15;
}
#center{
text-align: center;
margin-top: 105px;
background: red;
position: relative;
float: left;
width: 100%;
height: 100%;
}
#left {
height: 100%;
width: 150px;
text-align:center;
background:#EAEAEA;
margin-top: 105px;
margin-left: -100%;
overflow: scroll;
position: relative;
float: left;
}
#right {
position: relative;
height: 100%;
width: 150px;
margin-right: -100%;
margin-top: 105px;
background: blue;
text-align: center;
float: left;
}
#footer {
text-align:center;
background: #5D7B93;
height:25px;
padding:5px;
position: fixed;
bottom: 0;
width: 100%;
}
No need to float. Just position: absolute the sidebars and give the center div fixed margin on both sides.
JSFiddle
CSS
#container{
position: relative;
}
#left, #right {
width: 200px;
height: 100%;
position: absolute;
top: 0;
}
#left {
left: 0;
}
#right {
right: 0;
}
#center {
margin: 0 200px;
}
i've done this on my layout and it works fine for me
body,
html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#container{
display: inline-flex;
width: 100%;
height: 100%;
background: lightblue;
}
#left {
width: 240px!important;
min-width: 240px!important;
background: red;
height: 100%;
}
#right {
width: 400px!important;
min-width: 400px!important;
background: red;
height: 100%;
}
#center {
background: blue;
width: 100%;
min-width: 600px;
height: 100%;
}