What I'm trying to achieve:
I'm trying to position three elements alongside each other. Two content boxes with a dividing div in between. I am getting overflow problems with the right content box. It always appears below the two other divs.
It may be a problem with how the centre divider is positioned but I can't think of a better method of positioning it.
Codepen of what I currently have:
http://codepen.io/anon/pen/vNNKpB?editors=110
Here's my CSS:
.contact {
height: 300px;
}
.container {
width: 70%;
margin-left: 15%;
margin-right: 15%;
}
.centre-divider {
width: 0.1%;
margin-left: 49.95%;
margin-right: 49.95%;
height: 300px;
background-color: darkgray;
}
.left-contact {
width: 500px;
float: left;
height: 300px;
background-color: lightgray;
}
.right-contact {
float: right;
width: 500px;
height: 300px;
background-color: lightgrey;
}
If you use width in % for .container you should use width in % for the child elements. Otherwise, you always will have errors on the different screen size.
The new way of the positioning you want is to use flexbox without floats:
.container {
display: flex;
justify-content: space-between;
flex-wrap: nowrap;
/* ... another styles here */
}
Demo: http://codepen.io/anon/pen/RWWROr
But if you use flexbox don't forget about browser prefixes, you can get them here http://autoprefixer.github.io/
You can add another div inside the .centre-divider div which will be the vertical line, then just set a display: inline-block; on .centre-divider:
body {
font-family: Garamond, serif;
}
h1 {
font-family: Minion Pro, serif;
text-align: center;
font-size: 80px;
}
.contact {
height: 300px;
}
.container {
width: 70%;
margin-left: 15%;
margin-right: 15%;
}
.centre-divider {
width: 50%;
display: inline-block;
height: 300px;
}
.centre-divider > div {
width: 1px;
height: inherit;
background: gray;
margin: 0 auto;
}
.left-box {
width: 25%;
float: left;
height: 300px;
background-color: lightgray;
}
.right-box {
float: right;
width: 25%;
height: 300px;
background-color: lightgrey;
}
<body>
<header>
<h1>Heading</h1>
</header>
<div class="contact">
<div class="container">
<div class="left-box">
</div>
<div class="centre-divider">
<div></div>
</div>
<div class="right-box">
</div>
</div>
</div>
</body>
You will have to adjust the widths but you get the idea.
Just Add this CSS:
body {
font-family: Garamond, serif;
}
h1 {
font-family: Minion Pro, serif;
text-align: center;
font-size: 80px;
}
.contact {
height: 300px;
}
.container {
width: 70%;
float:left;
margin-left: 15%;
margin-right: 15%;
}
.centre-divider {
width: 0.1%;
float:left;
margin-left: 5%;
margin-right: 4%;
height: 300px;
background-color: darkgray;
}
.left-box {
width: 400px;
float: left;
height: 300px;
background-color: lightgray;
}
.right-box {
float: left;
width: 400px;
height: 300px;
background-color: lightgrey;
}
you can use display: inline-block; instead of floating the elements. when you text-align: center on the .contact div, then the .left-box, .right-box, and .centre-divider are automatically centered in spacing (so you dont have to calculate it yourself, and it still is responsive to the width of the screen.
body {
font-family: Garamond, serif;
}
h1 {
font-family: Minion Pro, serif;
text-align: center;
font-size: 80px;
}
.contact {
height: 300px;
}
.container {
text-align: center;
}
.centre-divider {
width: 2px;;
display: inline-block;
margin-left: 50px;
margin-right: 50px;
height: 300px;
background-color: darkgray;
}
.left-box {
width: 200px;
display: inline-block;
height: 300px;
background-color: lightgray;
}
.right-box {
display: inline-block;
width: 200px;
height: 300px;
background-color: lightgrey;
}
<body>
<header>
<h1>Heading</h1>
</header>
<div class="contact">
<div class="container">
<div class="left-box">
</div>
<div class="centre-divider"></div>
<div class="right-box">
</div>
</div>
</div>
</body>
Related
I know this must be a very simple question but I am having trouble in auto adjusting the height of text based div. Basically I am displaying two horizontal divs in a row. One is text based and the other is image based. Image based div is always auto adjusting its height but text based div is not auto resizing its height accordingly. May be it is because of the padding I have added but don't know how to adjust it according to different screen resolutions. Please find the below two screenshots for better understanding.
Desktop View:
Mobile or Tablet View:
Below is the code for reference:
<style>
.container {
display:block;
width:100%;
}
#custom-section2 .left, #custom-section2 .right {
float: left;
width: 50%;
}
#custom-section2 .left {
background-color: #F7E3EC;
height: 464.67px;
}
#custom-section2 .right {
background-color: #FFF;
}
.section2-with-text1{
padding-top: 15%;
font-size: 2vw;
font-family: 'Arial';
letter-spacing: 0.1em;
}
.section2-with-text2{
padding-top: 5%;
font-size: 1.4vw;
font-family: 'Arial';
}
.section2-with-text3{
padding-top: 15%;
}
.section2-with-text3 .button {
background-color: #000;
border: none;
color: white;
padding: 8px 24px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
margin: 4px 2px;
cursor: pointer;
display:inline-block;
}
.img-style{
height: auto;
}
#media only screen and (min-width:1901px) {
#custom-section2 .right img{
height: 660px;
}
#custom-section2 .left{
height: 660px;
}
}
#media only screen and (max-width:1900) {
#custom-section2 .right img{
height: auto;
}
#custom-section2 .left{
height: auto;
}
}
#custom-section2 .right img{
width: 100%;
}
</style>
<div class="container" id="custom-section2">
<div class="right">
<img src="https://cdn.shopify.com/s/files/1/2200/5487/files/Rectangle_8.jpg?v=1582366707" class="img-style" alt="">
</div>
<div class="left">
<div class="section2-with-text1"><center>TEETH WHITENING KITS</center></div>
<div class="section2-with-text2"><center>Get that insta-famous smile, from the convenience <br> from your home. Formulated with whitening <br> ingredients previously only available at your dentist.</center></div>
<div class="section2-with-text3"><center><button class="button">SHOP NOW</button></center></div>
</div>
</div>
Please suggest a possible solution. I would be grateful.
Thank you
Instead of using float to horizontally align your elements, it would be much easier to use display: flex;
Using flex will keep the left and right elements the same height.
Also note: You'll need to remove the height: 464.67px; declaration in #custom-section2 .left and remove float: left; from #custom-section2 .left, #custom-section2 .right.
(see all my comments in the CSS code)
Like so: (run code snippet)
.container {
display:block;
width:100%;
}
#custom-section2 {
display: flex; /*Add this!*/
}
#custom-section2 .left, #custom-section2 .right {
width: 50%;
/*float: left;*/ /*remove this!*/
}
#custom-section2 .left {
background-color: #F7E3EC;
/*height: 464.67px;*/ /*Remove this!*/
}
#custom-section2 .right {
background-color: #FFF;
}
.section2-with-text1{
padding-top: 15%;
font-size: 2vw;
font-family: 'Arial';
letter-spacing: 0.1em;
}
.section2-with-text2{
padding-top: 5%;
font-size: 1.4vw;
font-family: 'Arial';
}
.section2-with-text3{
padding-top: 15%;
}
.section2-with-text3 .button {
background-color: #000;
border: none;
color: white;
padding: 8px 24px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
margin: 4px 2px;
cursor: pointer;
display:block;
}
/*.img-style{
height: auto;
}/*
/* You can remove all this: */
/*#media only screen and (min-width:1901px) {
#custom-section2 .right img{
height: 660px;
}
#custom-section2 .left{
height: 660px;
}
}
#media only screen and (max-width:1900) {
#custom-section2 .right img{
height: auto;
}
#custom-section2 .left{
height: auto;
}
}*/
#custom-section2 .right img{
width: 100%;
height: auto; /*Add this!*/
display: block; /*Add this!*/
}
<div class="container" id="custom-section2">
<div class="right">
<img src="https://cdn.shopify.com/s/files/1/2200/5487/files/Rectangle_8.jpg?v=1582366707" class="img-style" alt="">
</div>
<div class="left">
<div class="section2-with-text1"><center>TEETH WHITENING KITS</center></div>
<div class="section2-with-text2"><center>Get that insta-famous smile, from the convenience <br> from your home. Formulated with whitening <br> ingredients previously only available at your dentist.</center></div>
<div class="section2-with-text3"><center><button class="button">SHOP NOW</button></center></div>
</div>
</div>
I'm trying to make a simple game, and I've run into few problems I can't seem to solve:
I can't center vertically floated elements (.stat and .clickable).
Total height of all elements should fit exactly into screen height, however it goes beyond it.
Images differ a bit in their width depending on value I give them (at my screen they look the same at 32% or 29%, but on 30% upper one has slightly wider (and a bit blurry) right border).
Height property of img elements has no effect.
Here's my code (Images are 450px wide squares):
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
background-color: #e6e6e6;
}
.statsBar,
.buttons {
color: #333333;
font-family: Impact, Charcoal, sans-serif;
text-transform: uppercase;
background-color: #bfbfbf;
height: 13%;
}
#score {
float: left;
margin-left: 5%;
}
#hp {
float: right;
margin-right: 5%;
}
.stats:after {
content: "";
display: block;
clear: both;
}
.clickable {
float: left;
width: 29.33%;
margin: 1%;
padding: 1%;
background: #f2f2f2;
}
.game {
width: 50%;
height: 100%;
text-align: center;
margin: auto;
background-color: #999999;
}
img {
width: 32%;
display: block;
margin: auto;
}
#enemyHand {
transform: rotate(180deg);
margin-top: 5%;
}
#playerHand {
margin-bottom: 5%;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src='game.js'></script>
</head>
<body>
<div class="game">
<div class="statsBar">
<p id="score" class="stat">score: 0</p>
<p id="hp" class="stat">hp: 3</p>
</div>
<div class="hands">
<img id="enemyHand" src="paper.png">
<img id="playerHand" src="scissors.png">
</div>
<div class="buttons">
<a id="paper" class="clickable" onclick="document.getElementById('playerHand').src='paper.png'">Paper</a>
<a id="rock" class="clickable" onclick="document.getElementById('playerHand').src='rock.png'">Rock</a>
<a id="scissors" class="clickable" onclick="document.getElementById('playerHand').src='scissors.png'">Scissors</a>
</div>
</div>
</body>
</html>
I don't know what you mean with your first question. However I can help you with the second. I made some small changes to your code, but I don't have the image. Look at the code bellow. The game container now is set to max-height: 100%; and height: 100vh; that should help. (100vh means the hole page. I also made body overflow: hidden;, because I think scrolling isn't necessary. I made the buttons container to the bottom of the page.
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
background-color: #e6e6e6;
overflow:hidden;
}
.statsBar,
.buttons {
color: #333333;
font-family: Impact, Charcoal, sans-serif;
text-transform: uppercase;
background-color: #bfbfbf;
height: 13%;
}
.buttons {
bottom: 0;
clear:both;
}
#score {
float: left;
margin-left: 5%;
}
#hp {
float: right;
margin-right: 5%;
}
.stats:after {
content: "";
display: block;
clear: both;
}
.clickable {
float: left;
width: 29.33%;
margin: 1%;
padding: 1%;
background: #f2f2f2;
}
.game {
width: 50%;
max-height: 100%;
height: 100vh;
text-align: center;
margin: auto;
background-color: #999999;
}
img {
height: 50%;
display: block;
margin: auto;
}
#enemyHand {
transform: rotate(180deg);
margin-top: 5%;
}
#playerHand {
margin-bottom: 5%;
}
For the third question, we don't have the images...
For the height property try display: block; and no width then. Check your classed normally it should work.
I hope I helped you !!!
You can take advantage of flexbox in this case (note the scroll is generated by the snippet's viewport height, ideally it wouldn't even overflow, but if it did, overflow: auto is set just to handle it, you can comment it though based on your benefit):
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
background-color: #e6e6e6;
}
.statsBar,
.buttons {
color: #333333;
font-family: Impact, Charcoal, sans-serif;
text-transform: uppercase;
background-color: #bfbfbf;
height: 13%;
display: flex;
flex-flow: row wrap;
justify-content: space-around;
align-items: center;
}
.hands {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
/* comment if content will never overflow */
overflow-x: auto;
}
.buttons {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
}
.clickable {
float: left;
width: 29.33%;
margin: 1%;
padding: 1%;
background: #f2f2f2;
}
.game {
width: 50%;
height: 100%;
/*text-align: center;*/
margin: auto;
background-color: #999999;
display: flex;
flex-flow: column wrap;
justify-content: center;
}
img {
width: 32%;
display: block;
margin: auto;
}
/*#score {
float: left;
margin-left: 5%;
}*/
/*#hp {
float: right;
margin-right: 5%;
}*/
/*.stats:after {
content: "";
display: block;
clear: both;
}*/
/*#enemyHand {
transform: rotate(180deg);
margin-top: 5%;
}*/
/*#playerHand {
margin-bottom: 5%;
}*/
<div class="game">
<div class="statsBar">
<p id="score" class="stat">score: 0</p>
<p id="hp" class="stat">hp: 3</p>
</div>
<div class="hands">
<img id="enemyHand" src="paper.png">
<img id="playerHand" src="scissors.png">
</div>
<div class="buttons">
<a id="paper" class="clickable" onclick="document.getElementById('playerHand').src='paper.png'">Paper</a>
<a id="rock" class="clickable" onclick="document.getElementById('playerHand').src='rock.png'">Rock</a>
<a id="scissors" class="clickable" onclick="document.getElementById('playerHand').src='scissors.png'">Scissors</a>
</div>
</div>
Please check this code. I solve your question 1 and 2. I don't understand about your image issue.
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
background-color: #e6e6e6;
}
.statsBar,
.buttons {
display: table;
color: #333333;
font-family: Impact, Charcoal, sans-serif;
text-transform: uppercase;
background-color: #bfbfbf;
height: 13%;
width: 100%;
}
#score,
#hp{
display: table-cell;
vertical-align: middle;
padding: 10px;
}
#score {
/*float: left;
margin-left: 5%;*/
text-align: left;
}
#hp {
/*float: right;
margin-right: 5%;*/
text-align: right;
}
.stats:after {
content: "";
display: block;
clear: both;
}
.clickable {
/*float: left;*/ /*Float sould not use here */
display: table-cell;
width: 29.33%;
/*margin: 1%;
padding: 1%;*/
border: 5px solid #bfbfbf;
vertical-align: middle;
background: #f2f2f2;
}
.game {
width: 50%;
height: 100%;
text-align: center;
margin: auto;
background-color: #999999;
}
img {
width: 32%;
display: block;
margin: auto;
}
#enemyHand {
transform: rotate(180deg);
margin-top: 5%;
}
#playerHand {
margin-bottom: 5%;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src='game.js'></script>
</head>
<body>
<div class="game">
<div class="statsBar">
<p id="score" class="stat">score: 0</p>
<p id="hp" class="stat">hp: 3</p>
</div>
<div class="hands">
<img id="enemyHand" src="http://placehold.it/450x450">
<img id="playerHand" src="http://placehold.it/450x450">
</div>
<div class="buttons">
<a id="paper" class="clickable" onclick="document.getElementById('playerHand').src='paper.png'">Paper</a>
<a id="rock" class="clickable" onclick="document.getElementById('playerHand').src='rock.png'">Rock</a>
<a id="scissors" class="clickable" onclick="document.getElementById('playerHand').src='scissors.png'">Scissors</a>
</div>
</div>
</body>
</html>
When I view the following code I see three 25% width divs but they're all aligned left. I'm trying to center the three without setting static px sizes of the divs. The .icon-container div is rendering as width: 75% and height: 17px. Am I missing something simple?
.greybox {
width: 100%;
background-color: #a99e93;
padding: 0 5%;
margin: 0 auto 1rem auto;
}
.icon-container {
margin: 0 auto;
text-align: center;
}
.feature-icon {
width: 25%;
height: 100%;
display: inline-block;
padding-top: 2em;
padding-bottom: 2em;
}
.feature-icon img {
margin: 0 auto;
}
.feature-icon p {
font-size: 1.2rem;
color: white;
padding-top: .8em;
}
<div class="greybox">
<div class="icon-container">
<div class="feature-icon">
<img src="http://www.pickeringusa.com/wp-content/uploads/2015/01/commercial.png" style="height:128px;width:128px">
<p>Commercial</p>
</div>
<div class="feature-icon">
<img src="http://www.pickeringusa.com/wp-content/uploads/2015/01/industrial.png" style="height:128px;width:128px">
<p>Industrial</p>
</div>
<div class="feature-icon">
<img src="http://www.pickeringusa.com/wp-content/uploads/2015/01/information.png" style="height:128px;width:128px">
<p>More Information</p>
</div>
</div>
</div>
Try making these changes:
.icon-container {
margin: 0;
text-align: center;
width: 100%;
}
.feature-icon {
width: 25%;
height: 100%;
display: inline-block;
padding-top: 2em;
padding-bottom: 2em;
text-align: left;
}
Edit: The text-align: left is only required if you dont want the text center aligned
You can try this:
.icon-container {
display:table;
width:100%;
}
.feature-icon {
display:table-cell;
}
I'm having a simple row with three utf-8 arrows
<div id="container">
<div id="one">▼</div>
<div id="two">▲</div>
<div id="three">▼</div>
</div>
So what I am trying to do is to have the arrows in the same row, but I want them to be in the middle of their height and their width - no matter what text size value they will get.
I've tried the next CSS code -
#container{
display: inline-block;
height: 80px;
width: 100%;
}
#one{
float:left;
width: 20%;
font-size: 90px;
}
#two{
float:left;
width: 20%;
font-size: 50px;
}
#three{
float:left;
width: 20%;
font-size: 60px;
}
As you can understand it sure don't work, any ideas what can I do?
Thanks for any kind of help
Just add some styles to the 3 elements:
#container{
height: 80px;
width: 100%;
display: table;
}
#one{
width: 20%;
font-size: 90px;
}
#two{
width: 20%;
font-size: 50px;
}
#three{
width: 20%;
font-size: 60px;
}
#one,#two,#three{
text-align: center;
display: table-cell;
vertical-align: middle;
}
WORKING FIDDLE
You have to display elements as inline-block and set vertical-align: middle, text-align: center.
#container {
display: inline-block;
height: 80px;
width: 100%;
}
#one,
#two,
#three {
display: inline-block;
text-align: center;
vertical-align: middle;
}
#one {
width: 20%;
font-size: 90px;
}
#two {
width: 20%;
font-size: 50px;
}
#three {
width: 20%;
font-size: 60px;
}
<div id="container">
<div id="one">▼</div>
<div id="two">▲</div>
<div id="three">▼</div>
</div>
I am trying to make a header for a site that has a logo in the left column, and a rotating image banner and the top-level navigation on the right, without using floats. What am I doing wrong here?
This is what I would like it to look like:
Here is my HTML:
<!doctype html>
<head>
<title></title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="header">
<div id="logo"><p>Logo</p></div>
<div id="right">
<div id="rotator"><p>Rotator</p></div>
<div id="navigation"><p>Navigation</p></div>
</div>
</div>
</body>
</html>
Here is my CSS:
#header{
width: 1024px;
margin-left: auto;
margin-right: auto;
background-color: yellow;
top: 10px;
font-size: 0px;
}
#logo{
display: inline-block;
background-color: red;
width: 306px;
height: 192px;
font-size: 0px;
}
#right{
display: inline-block;
background-color: black;
width: 718px;
height: 192px;
font-size: 0px;
}
#rotator{
display: block;
background-color: green;
width: 718px;
height: 132px;
}
#navigation{
display: block;
background-color: blue;
width: 718px;
height: 60px;
}
p{
font-size: 24px;
margin:0;
padding: 0;
}
This is what it ends up looking like:
Try putting vertical-align: top; on the logo and right divs
Here's the fiddle
#logo{
display: inline-block;
background-color: red;
width: 306px;
height: 192px;
font-size: 0px;
vertical-align: top;
}
#right{
display: inline-block;
background-color: black;
width: 718px;
height: 192px;
font-size: 0px;
vertical-align: top;
}
#right {
background-color: black;
font-size: 0;
height: 192px;
position: absolute;
right: 168px;
top: 28px;
width: 718px;
}
Here's one way to do it using display:table & table-cell.
http://jsfiddle.net/zR9GZ/
<div class="container">
<div class="col1">LOGO</div>
<div class="col2">
<div class="rotator">ROTATOR</div>
<div class="navigation">NAVIGATION</div>
</div>
</div>
.container {
display: table;
width: 100%;
color:# fff;
}
.col1, .col2 {
display: table-cell;
}
.col1 {
background: red;
width: 25%;
}
.col2 {
width: 75%;
}
.rotator {
background: green;
}
.navigation {
background: blue;
}
Though flexbox isn't quite ready for production designs, here's what a responsive solution would look like (try resizing it!):
#header {
display: flex;
flex-flow: row wrap;
}
#header{
background-color: yellow;
font-size: 0px;
}
#logo{
background-color: red;
width: 306px;
height: 192px;
font-size: 0px;
}
#right{
background-color: black;
font-size: 0px;
flex: 1 1 auto;
display: flex;
flex-flow: column nowrap;
min-width: 40%;
}
#rotator{
background-color: green;
flex: 2 1 auto;
}
#navigation{
background-color: blue;
flex: 1 1 auto;
}
http://jsfiddle.net/2UjC3/ (prefixes not included)
Until enough browsers support flexbox, my recommendation is to use the display table/table-cell solution by Billy Moat.