I'm trying to vertically align my 3 items, that the reason why I use
display: flex;
align-items: center; /* center items vertically, in this case */
Not sure If it is good to practise, but now that my items are aligned correctly I cant spread the items to the left corner (menu), right corner (about), and the middle (logo). How can I do this?
Are there other alternatives to align items without flex, I have tried a lot and none of them worked so far.
canvas {
position: absolute;
background: black;
width: 100%;
height: 100%;
}
#moveItem {
z-index: 1;
opacity: 0.85;
filter: alpha(opacity=85); /* For IE8 and earlier */
}
body, html{
font-family: Arial;
margin: 0px;
height: 100%;
width: 100%;
overflow-y: hidden;
background: black;
}
#navigator {
z-index: 2;
position: relative;
padding: 0.5rem;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: flex;
align-items: center; /* center items vertically, in this case */
}
#navIcon{
float: left;
color: white;
font-size: 30px;
cursor:pointer;
}
.about {
float: right;
color: white;
font-size: 30px;
cursor: pointer;
}
#navigator a {
text-decoration: none;
color: white;
}
.logo {
display: inline;
}
.logo img {
vertical-align: middle;
height: 50px;
width: auto;
}
.logoheader{
background: rgba(0, 0, 0, 0.5);
display: inline-block;
border-radius: 20px;
}
.logoText {
letter-spacing: 2px;
text-transform: uppercase;
vertical-align: middle;
display: inline;
font-size: 1.3rem;
margin-left: -12px;
}
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div id="navigator">
<div id="navIcon" onclick="openNav()"> ☰</div>
<div class="logoheader">
<a href="/price/">
<div class="logo"><img src="/images/logo.png"></div>
<div class="logoText">Title</div>
</a>
</div>
<div class="about">
About
</div>
</div>
</body>
Don't use float with flexbox, use justify-content and align-items instead. float should only be used for images in a text paragraph, nothing else.
Also, there are many options to align your content like that, but most of them only exist because flex wasn't always a thing, and the old ways are usually extremely hacky. grid and flex are the modern ways for CSS layouting.
Example: (you can use justify-content: space-between; on the container to achieve the desired alignment, or experiment with margin-right: auto and margin-left: auto)
canvas {
position: absolute;
background: black;
width: 100%;
height: 100%;
}
#moveItem {
z-index: 1;
opacity: 0.85;
filter: alpha(opacity=85); /* For IE8 and earlier */
}
body, html{
font-family: Arial;
margin: 0px;
height: 100%;
width: 100%;
overflow-y: hidden;
background: black;
}
#navigator {
z-index: 2;
position: relative;
padding: 0.5rem;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: flex;
align-items: center; /* center items vertically, in this case */
justify-content: space-between;
}
#navIcon{
color: white;
font-size: 30px;
cursor:pointer;
}
.about {
color: white;
font-size: 30px;
cursor: pointer;
}
#navigator a {
text-decoration: none;
color: white;
}
.logo {
display: inline;
}
.logo img {
vertical-align: middle;
height: 50px;
width: auto;
}
.logoheader{
background: rgba(0, 0, 0, 0.5);
display: inline-block;
border-radius: 20px;
}
.logoText {
letter-spacing: 2px;
text-transform: uppercase;
vertical-align: middle;
display: inline;
font-size: 1.3rem;
margin-left: -12px;
}
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div id="navigator">
<div id="navIcon" onclick="openNav()"> ☰</div>
<div class="logoheader">
<a href="/price/">
<div class="logo"><img src="/images/logo.png"></div>
<div class="logoText">Title</div>
</a>
</div>
<div class="about">
About
</div>
</div>
</body>
Related
I have a header that works perfectly fine in its own html file and I have a product details page that also is fine on its own. When I add the header to the product page it messes up entirely and pushes the header out of the way, placing part of the product details to the right of the header.
I tried using inspect element and found no padding or magins that would be doing this and adding a margin or padding does not fix the issue.
I assume it's a problem with the product page as inspect element does highlight that section of the page when I was troubleshooting.
Any help would be amazing!
some of the product html (https://i.stack.imgur.com/tsGDT.png)](https://i.stack.imgur.com/tsGDT.png)
PRODUCT HTML:
#import url(https://fonts.googleapis.com/css2?family=Rubik:wght#100;200;300;400;500;600;800;900&display=swap);
* {
margin: 0;
padding: 0;
font-family: 'Rubik', sans-serif;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
.small-container{
max-width: 1000%;
margin: auto;
padding-left: 25px;
padding-right: 20px;
}
.row{
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: space-around;
}
.single-product{
margin-top: 80px;
}
.small-img-row{
display: flex;
justify-content: space-around;
max-width: 300px;
max-height: 500px;
}
.col-2 img {
max-width: 100%;
/* padding: 0px 0; */
max-width: 300px;
max-height: 500px;
}
.small-img-col{
flex-basis: 24%;
cursor: pointer;
}
.single-product .col-2 img{
padding: 0;
}
.single-product .col-2{
padding: 20;
}
.col-2{
flex-basis: 50%;
min-width: 300px;
}
.col-2 h1{
font-size: 50px;
line-height: 60px;
margin: 5px 0;
}
.single-product select{
display: block;
padding: 10px;
margin-top: 20px;
}
.single-product h4{
margin: 20px 0;
font-size: 22px;
font-weight: bold;
}
a{
text-decoration: none;
}
p{
color: #9ba0a3;
margin-top: 10px;
}
.btn{
display: inline-block;
background: #4B7AB4;
color: #fff;
padding: 8px 30px;
margin: 30px 0;
border-radius: 30px;
transition: background 0.5s;
}
.btn:hover{
background: #314f74;
}
.header{
width: 100%;
height: 80px;
display: block;
/* background-color: #101010; */
background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url(background-nav.png);
background-size: cover;
}
.inner-header{
width: 1000px;
height: 100%;
display: block;
margin: 0 auto;
/* background-color: red; */
}
.logo-container{
height: 100%;
display: table;
float: left;
}
.logo-container img{
max-width: 60px;
max-height: 60px;
display: table-cell;
padding: 10px;
vertical-align: middle;
}
.navigation{
float: right;
height: 100%;
}
.navigation a{
height: 100%;
display: table;
float: left;
padding: 0px 20px;
}
.navigation a li{
display: table-cell;
vertical-align: middle;
height: 100%;
color: white;
font-family:'Rubik';
font-size: 16px;
}
.gibsonrating {
list-style: none;
display: flex;
justify-content: left;
align-items: center;
padding-top: 0;
}
li {
padding-top: 5px;
}
.fa {
font-size: 10px;
margin: 1px;
color: #939a9e;
}
.checked {
color: #ff9f43;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="utf-8" />
<title>fret - Guitars for the People!</title>
<link rel="stylesheet" type="text/css" href="./gibson.css" />
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"
rel="stylesheet" type='text/css'>
</head>
<body>
<div class="header">
<div class="inner-header">
<div class="logo-container">
<img src="fretlogo.png"/>
</div>
<ul class="navigation">
<li>Home</li>
<li>Products</li>
<li>About</li>
<li>Login</li>
</ul>
</div>
</div>
<div class="smallcontainer" single-product>
<div class="row">
<div class="col-2">
<img src="https://bdbo2.thomann.de/thumb/bdb3000/pics/bdbo/17180483.jpg" width="100%"
id="ProductImg">
<div class="small-img-row">
<div class="small-img-col">
<img src="https://bdbo2.thomann.de/thumb/bdb3000/pics/bdbo/17180543.jpg" width="100%"
class="small-img">
</div>
<div class="small-img-col">
<img src="https://bdbo2.thomann.de/thumb/bdb3000/pics/bdbo/17180503.jpg" width="100%"
class="small-img">
</div>
<div class="small-img-col">
<img src="https://bdbo2.thomann.de/thumb/bdb3000/pics/bdbo/17180483.jpg" width="100%"
class="small-img">
</div>
<div class="small-img-col">
<img src="https://bdbo2.thomann.de/thumb/bdb3000/pics/bdbo/17180534.jpg" width="100%"
class="small-img">
</div>
</div>
</div>
<div class="col-2">
<p>Home / Gibson G-200</p>
<h1>Gibson G-200</h1>
<h4>€1,990</h4>
<select>
<option>Select Quantity</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5+</option>
</select>
<ul class="gibsonrating">
<li><i class="fa fa-star checked"></i></li>
<li><i class="fa fa-star checked"></i></li>
<li><i class="fa fa-star checked"></i></li>
<li><i class="fa fa-star checked"></i></li>
<li><i class="fa fa-star-half-o checked"></i></li>
</ul>
Add to Cart
<h3>Product Details</h3>
<br>
<p>
<ul>
<li>Body Shape: J-200 with cutaway</li>
<li>Top: solid Sitka spruce</li>
<li>Neck: utile</li>
<li>Profile: advanced response</li>
<li>Dovetail neck construction</li>
<li>Fretboard: striped ebony</li>
<li>Fretboard inlays: G-collection single bars</li>
<li>Nut width 43,80 mm (1,725")</li>
<li>Scale: 648 mm (25,5")</li>
<li>Made in Bozeman, USA</li>
</ul>
</p>
</div>
</div>
</div>
</body>
</html>
PRODUCT CSS:
product page on its own (https://i.stack.imgur.com/Vnd9J.png)](https://i.stack.imgur.com/Vnd9J.png)
header on its own (https://i.stack.imgur.com/eQE3g.png)](https://i.stack.imgur.com/eQE3g.png)
the mix of both the header and the product details (https://i.stack.imgur.com/9y2t1.png)](https://i.stack.imgur.com/9y2t1.png)
I tried looking for disruptive padding and margins
I tried adding padding and margins to the smallcontainer and row in css
If your header and your product page are wrapped into a .row, the behavior is pretty normal (a row is made to manage its child vertically).
https://getbootstrap.com/docs/4.0/layout/grid/#vertical-alignment
You should remove it or change it to a .col.
.col{
display:flex;
flex-flow:column;
}
I believe you might have a float problem. You are using floats but I don't see and clearfixes for them. This could create such behaviour.
In general I recommend using float only to wrap text around another element and otherwise get rid of it. You should use flexbox more often.
As I couldn't reconstruct your problem with the code given I just removed the float:
full codepen here
adapted css:
* {
margin: 0;
padding: 0;
font-family: 'Rubik', sans-serif;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
.small-container{
max-width: 1000%;
margin: auto;
padding-left: 25px;
padding-right: 20px;
}
.row {
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: space-around;
}
.single-product {
margin-top: 80px;
}
.small-img-row {
display: flex;
justify-content: space-around;
max-width: 300px;
max-height: 500px;
}
.col-2 img {
max-width: 100%;
/* padding: 0px 0; */
max-width: 300px;
max-height: 500px;
}
.small-img-col{
flex-basis: 24%;
cursor: pointer;
}
.single-product .col-2 img{
padding: 0;
}
.single-product .col-2 {
/* CAREFUL: was 20 only! if it's not 0, don't forget to add a unit! */
padding: 20px;
}
.col-2 {
flex-basis: 50%;
min-width: 300px;
}
.col-2 h1 {
font-size: 50px;
line-height: 60px;
margin: 5px 0;
}
.single-product select {
display: block;
padding: 10px;
margin-top: 20px;
}
.single-product h4 {
margin: 20px 0;
font-size: 22px;
font-weight: bold;
}
a {
text-decoration: none;
}
p {
color: #9ba0a3;
margin-top: 10px;
}
.btn {
display: inline-block;
background: #4B7AB4;
color: #fff;
padding: 8px 30px;
margin: 30px 0;
border-radius: 30px;
transition: background 0.5s;
}
.btn:hover{
background: #314f74;
}
.header {
display: block;
width: 100%;
height: 80px;
/* background-color: #101010; */
background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url(background-nav.png);
background-size: cover;
}
.inner-header {
display: flex; /*changed*/
justify-content: space-between;
align-items: center;
width: 1000px;
height: 100%;
margin: 0 auto;
/* background-color: red; */
}
/*changed*/
.logo-container {
display: flex;
justify-content: center;
align-items: center;
}
.logo-container img {
max-width: 60px;
max-height: 60px;
/* display: table-cell;
padding: 10px;
vertical-align: middle; */
}
/*changed*/
.navigation {
display: flex;
height: 100%;
/* float: right; */
}
/*changed*/
.navigation a {
height: 100%;
display: table;
/* float: left; */
/* padding: 0px 20px; */
}
/*added*/
.navigation a + a {
margin-left: 20px;
}
.navigation a li {
display: table-cell;
vertical-align: middle;
height: 100%;
color: white;
font-family:'Rubik';
font-size: 16px;
}
.gibsonrating {
list-style: none;
display: flex;
justify-content: left;
align-items: center;
padding-top: 0;
}
li {
padding-top: 5px;
}
.fa {
font-size: 10px;
margin: 1px;
color: #939a9e;
}
.checked {
color: #ff9f43;
}
I marked the changed parts with a comment. You also had an other error, a missing unit for a padding.
If your problem is not fixed with this check out JohnSs answer as you might have a container around it with display: flex; and as he stated the incorrect flex-direction.
I'm trying to position a circular instagram icon so it is always centered towards the bottom of a landing page. All my efforts so far such as using position:fixed; have resulted in the icon not remaining underneath the rest of my content when the screen size changes.
My html is like this:
<!DOCTYPE html>
<html>
<head>
<title>RBM Makeup</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<section class="intro">
<div class="inner">
<div class="content">
<h1> Rebecca Bermingham Maguire</h1>
<div class="container">
Portfolio
Contact
About Me
</div>
</div>
</div>
<div class="footer">
<div class="instagram">
</div>
</div>
</section>
</body>
</html>
And my CSS is like this:
:root{
--maroon: #85144b;
--fuchsia: #f012be;
--purple: #b10dc9;
--lime: #01ff70;
--black: #000000;
--white: #ffffff;
--blue: #89cff0;
}
#font-face{
font-family: 'milkshake';
src:url(fonts/Milkshake.ttf);
font-style: normal;
font-weight: 100;
}
#font-face{
font-family: 'amble';
src:url(fonts/Amble-Regular.ttf);
font-style: normal;
font-weight: 100;
}
html, body{
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
/**/
.intro{
height:100%;
width:100%;
margin-right: 20px;
margin: auto;
background: url("images/eye.jpg") no-repeat 50% 50%;
display: table;
top: 0;
background-size: cover;
opacity: 0.92;
}
.intro .inner{
display: table-cell;
vertical-align: middle;
width: 100%;
max-width: none;
}
.content h1{
color: var(--black);
font-size: 350%;
margin: 0px 0px;
text-align: center;
text-transform: bold;
font-family: milkshake;
font-weight: 100;
}
.container{
display: flex;
flex-wrap: wrap;
overflow: hidden;
justify-content: center;
margin-top: 50px;
}
.container a{
border-radius: 9px;
color: var(--black);
font-size: 135%;
padding: 10px 20px;
text-decoration: none;
border: solid var(--black) 5px;
text-transform: uppercase;
margin: 20px 40px;
font-family: amble;
font-weight: 150;
font-style: bold;
}
/*Instagram Icon*/
.fa {
padding: 20px;
font-size: 55px;
width: 40px;
text-align: center;
text-decoration: none;
border-radius: 50%;
align-content: center;
}
.fa:hover{
opacity:0.7;
}
.fa-instagram {
background: var(--black);
color: var(--white);
}
.footer{
position: fixed;
bottom: 0;
width: 100%;
height: 100px;
left: 47.5%;
}
Any help would be greatly appreciated, thanks :)
Modified two places of your code.
1. .foot
left: 50% plus margin-left: - { width } / 2 can make footer align center no matter how the window changes.
```
.footer {
position: fixed;
bottom: 0;
width: 95px; // here
height: 100px;
left: 50%; // here
margin-left: calc(-95px / 2); // here
}
```
2. .fa
In your code, the Instagram icon is not aligning center inside the black circle, so I make some changes for it.
As the Instagram icon is square, you should not set the width 40px when it's font-size is 55px.
```
.fa {
padding: 20px;
font-size: 55px;
width: 55px; /* here */
text-align: center;
text-decoration: none;
border-radius: 50%;
align-content: center;
}
```
If you have more questions about my answer, feel free to contact me :)
:root {
--maroon: #85144b;
--fuchsia: #f012be;
--purple: #b10dc9;
--lime: #01ff70;
--black: #000000;
--white: #ffffff;
--blue: #89cff0;
}
#font-face {
font-family: 'milkshake';
src: url(fonts/Milkshake.ttf);
font-style: normal;
font-weight: 100;
}
#font-face {
font-family: 'amble';
src: url(fonts/Amble-Regular.ttf);
font-style: normal;
font-weight: 100;
}
html,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
/**/
.intro {
height: 100%;
width: 100%;
margin-right: 20px;
margin: auto;
background: url("images/eye.jpg") no-repeat 50% 50%;
display: table;
top: 0;
background-size: cover;
opacity: 0.92;
}
.intro .inner {
display: table-cell;
vertical-align: middle;
width: 100%;
max-width: none;
}
.content h1 {
color: var(--black);
font-size: 350%;
margin: 0px 0px;
text-align: center;
text-transform: bold;
font-family: milkshake;
font-weight: 100;
}
.container {
display: flex;
flex-wrap: wrap;
overflow: hidden;
justify-content: center;
margin-top: 50px;
}
.container a {
border-radius: 9px;
color: var(--black);
font-size: 135%;
padding: 10px 20px;
text-decoration: none;
border: solid var(--black) 5px;
text-transform: uppercase;
margin: 20px 40px;
font-family: amble;
font-weight: 150;
font-style: bold;
}
/*Instagram Icon*/
.fa {
padding: 20px;
font-size: 55px;
width: 55px; /* need to fit the font-size */
text-align: center;
text-decoration: none;
border-radius: 50%;
align-content: center;
}
.fa:hover {
opacity: 0.7;
}
.fa-instagram {
background: var(--black);
color: var(--white);
}
.footer {
position: fixed;
bottom: 0;
width: 95px;
height: 100px;
left: 50%;
margin-left: calc(-95px / 2);
}
<section class="intro">
<div class="inner">
<div class="content">
<h1> Rebecca Bermingham Maguire</h1>
<div class="container">
Portfolio
Contact
About Me
</div>
</div>
</div>
<div class="footer">
<div class="instagram">
</div>
</div>
</section>
set the parent as
.intro {
width:100%;
height:100vh;
position:relative;
}
and the icon element as
.footer {
position:absolute;
bottom:0;
left:50%;
width:40px;
margin-left:-20px;
}
as an alternative:
.footer {
position:absolute;
bottom:0;
left:0;
width:100%;
text-align:center;
}
.footer > div {
display:inline-block;
}
this will do better as you can add other elements if you end up wanting to add other links
I don't understand why in this setup the padding-top is various times bigger than the padding-bottom. Tried tweaking stuff around to find the culprit property but so far nothing. I did notice, that I accidentally left a " after the spans, the issue was gone, but not sure how that relates.
https://jsfiddle.net/3n0yuzs3/1/
body
{
font-family: sans-serif;
}
#window
{
background-color: black;
color: white;
display: flex;
flex-direction: column;
opacity: 1;
left: 50%;
bottom: 0px;
position: fixed;
width: auto;
height: auto;
min-width: 600px;
min-height: auto;
max-width: 80vw;
max-height: 80vh;
transform: translateX(-50%);
outline: 0px;
cursor: default;
z-index: 5000002;
zoom: 1;
}
#container
{
overflow-y: auto;
overflow-x: hidden;
border: none;
outline: 0;
margin: 0;
flex-grow: 1;
}
#content
{
font-size: 22px;
text-align: center;
overflow-wrap: break-word;
padding-top: 1.6em;
padding-bottom: 1.6em;
padding-left: 1.6em;
padding-right: 1.6em;
}
.snack_msg
{
padding-right: 200px;
float:left;
}
.snack_btn
{
color:#5fce49;
text-transform: uppercase;
letter-spacing:3px;
cursor:pointer;
float:right;
}
<div id='window'>
<div id='container'>
<div id='content'>
<span class='snack_msg'>New message arrived</span>
<span class='snack_btn' onclick='open_snack_message()'>open</span>
</div>
</div>
</div>
The issue is with floating elements and not padding. As you can see below, you have equal padding in all the sizes :
And if you check well you will see also that you have a height equal to 0 because you have floating element and since the parent is not floating it will collapse (which means no height). To fix this you need to add oveflow:auto to #content.
body {
font-family: sans-serif;
}
#window {
background-color: black;
color: white;
display: flex;
flex-direction: column;
opacity: 1;
left: 50%;
bottom: 0px;
position: fixed;
width: auto;
height: auto;
min-width: 600px;
min-height: auto;
max-width: 80vw;
max-height: 80vh;
transform: translateX(-50%);
outline: 0px;
cursor: default;
z-index: 5000002;
zoom: 1;
}
#container {
overflow-y: auto;
overflow-x: hidden;
border: none;
outline: 0;
margin: 0;
flex-grow: 1;
}
#content {
font-size: 22px;
text-align: center;
overflow-wrap: break-word;
padding-top: 1.6em;
padding-bottom: 1.6em;
padding-left: 1.6em;
padding-right: 1.6em;
overflow: auto;
}
.snack_msg {
padding-right: 200px;
float: left;
}
.snack_btn {
color: #5fce49;
text-transform: uppercase;
letter-spacing: 3px;
cursor: pointer;
float: right;
}
<div id='window'>
<div id='container'>
<div id='content'>
<span class='snack_msg'>New message arrived</span>
<span class='snack_btn' onclick='open_snack_message()'>open</span>
</div>
</div>
</div>
Here is some usefull questions where you can gather more information and more ways to prevent this behavior:
How do you keep parents of floated elements from collapsing?
Why does 'overflow: auto' clear floats? And why are clear floats needed?
I have a layout that looks sort of like a bookshelf, see my jsfiddle example. The bookshelf is responsive so no fixed widths. The issue I'm faced with is that I cannot center the text within the panels, "horizontally" within the books sides. It's extra tricky since the text is transformed to be displayed vertically. Does anyone have any ideas of how to make this work?
HTML
<div class="panel">
<a href="#first">
<span>first</span>
</a>
</div>
CSS
.panel {
float: left;
height: 100%;
width: 15%;
margin-right: 5%;
}
.panel a {
text-align: right;
background: green;
padding: 20px 10px;
height: 100%;
display: block;
white-space: nowrap;
color: white;
float: left;
width: 100%;
text-decoration:none;
}
.panel a span {
white-space: nowrap;
color: white;
text-transform: lowercase;
-ms-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
transform-origin: top right;
display: block;
width: 300px;
margin-left: -300px;
letter-spacing: 1px;
font-size: 20px;
}
you have 2 easy options, with either display:flex or table :
display:table example:
body,
html,
.panel-wrapper {
height: 100%;
width: 100%;
}
.panel-wrapper {
display: table;
border-collape: collapse;
table-layout: fixed;
background: white;
}
.panel {
display: table-cell;
height: 100%;
width: 20%;/* you have five here*/
}
.panel a {
display: block;
text-align: center;
background: green;
padding: 20px 10px;
box-sizing:border-box;/*includes padding and borders */
height: 100%;
width: 75%;/* each is 15% width */
text-decoration: none;
white-space: nowrap;
}
.panel a:before {
content: '';
height: 100%;
display: inline-block;
vertical-align: middle;/*inline content will vertical-align middle aside it */
}
.panel a span {
display: inline-block;/* triggers transform*/
color: white;
text-transform: lowercase;
transform: rotate(-90deg);
letter-spacing: 1px;
font-size: 20px;
vertical-align: middle;
}
<div class="panel-wrapper">
<div class="panel"><span>first</span>
</div>
<div class="panel"><span>second</span>
</div>
<div class="panel"><span>third</span>
</div>
<div class="panel"><span>fourth</span>
</div>
<div class="panel"><span>fifth</span>
</div>
</div>
http://codepen.io/gc-nomade/pen/JGEbLX
or flex:
body,
html,
.panel-wrapper {
height: 100%;
width: 100%;
margin: 0;
}
.panel {
float: left;
height: 100%;
width: 15%;
margin-right: 5%;
}
.panel a {
text-align: right;
background: green;
padding: 20px 10px;
height: 100%;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
;
white-space: nowrap;
color: white;
text-decoration: none;
}
.panel a span {
white-space: nowrap;
color: white;
transform: rotate(-90deg);
letter-spacing: 1px;
font-size: 20px;
}
<div class="panel-wrapper">
<div class="panel"><span>first</span>
</div>
<div class="panel"><span>second</span>
</div>
<div class="panel"><span>third</span>
</div>
<div class="panel"><span>fourth</span>
</div>
<div class="panel"><span>fifth</span>
</div>
</div>
http://codepen.io/gc-nomade/pen/obBYyY
Do the following:
.panel a span {
white-space: nowrap;
color: white;
text-transform: lowercase;
-ms-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
transform-origin: top right;
display: block;
width: 300px;
margin-left: -300px;
letter-spacing: 1px;
font-size: 20px;
position:relative;
left: 45%;
}
See my demo here or your jfiddle
You may need a small adjustment at tiny smartphones with a media query, but other than that it works
Add this to the responsive css:
#media (max-width: 560px){
.panel a span {
left: 25%;
}
}
Add these lines to your code :
.panel a{
position:relative;
}
.panel a span {
position:absolute;
left:40%;
/* top:50%; */
}
Here is the fiddle
I f you want center the text vertically use the below property below the text-align: center in .panel a span make the text in corner center of a panel
.panel a span {
text-align: center;
}
and if you want center text in the middle of the panel not in corner
.panel a span {
text-align: center;
margin-left: -260px;
}
Just wondering if anyone can help me to get 1st half and 2nd half on this codepen to display on the same line? I have tried display:inline; however this did not fix the issue.
http://codepen.io/EuanR/pen/BNEBvE
HTML:
<HTML>
<HEAD>
<title>Homepage</title>
</HEAD>
<HEADER>
<H1 id="landingpagelg">Header</H1>
<H2 id="landingpagesm">Sub Header</H2>
</HEADER>
<BODY>
<div class="footerwrapper">
<div class="BFS">
<P>1st half</P>
</div>
<div class="BLFS">
<P>2nd half</P>
</div>
</div>
</script>
</html>
CSS:
a {
text-decoration: none;
}
body {
background-color: #161616;
}
header {
height: 100%;
background-image: url(http://i.imgur.com/11nVLmd.jpg);
background-size: cover;
background-position: center;
margin-bottom: 0;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
text-align: center
}
#landingpagelg {
font-family: Caviar Dreams;
font-size: 42px;
color: #FFF;
letter-spacing: 1px
}
#landingpagesm {
font-family: Caviar Dreams;
font-size: 21px;
color: #FFF
}
#CMSub {
min-width: 75px;
}
a {
color: #000;
}
a.hover {
color: 0000EE;
}
::selection {
background: #FFB870;
/*#CCCCCC*/
}
::-moz-selection {
background: #FFB870;
}
img::selection {
background: transparent
}
img::-moz-selection {
background: transparent
}
input {
width: 150px;
border: 1px solid;
border-radius: 6px;
height: 25px;
padding: 4px;
}
textarea {
border: 1px solid;
max-width: 500px;
max-height: 250px;
border-radius: 5px;
width: 250px;
height: 125px;
}
#github {
padding-right: 5px;
}
.footerwrapper {
width: 100%;
}
.BFS {
height: 150px;
width: 50%;
background-color: #161616;
}
.BLFS {
height: 150px;
width: 50%;
background-color: #99CCFF;
}
.footerwrapper {
width: 100%;
display:flex;
}
Display Flex solves the issue
.footerwrapper {
width: 100%;
border: 1px solid black;
overflow: hidden;
}
.BFS {
height: 150px;
background-color: #161616;
width: 50%;
float:left; /* add this */
}
.BLFS {
height: 150px;
width: 50%;
background-color: #99CCFF;
float:left; /* add this */
}
Hope this helps
If you don't want to edit your CSS, then simply add the following lines
.footerwrapper {
font-size: 0; /*Removes white space in inline-block elements*/
}
.BFS {
box-sizing: border-box;
display: inline-block;
}
.BLFS {
box-sizing: border-box;
display: inline-block;
}
Make sure you set the font-size in every element that is a child of .footerwrapper
Use
.BFS {float:left;}
.BLFS {float:right;}
Alternatively put the BLFS element first in your HTML and float it to the right. Then the .BFS{float:left;} is unnecessary since it will fill on the left anyway.