I'm trying to center container of divs (gray boxes) so that A=B. This equality should be preserved during resizing of the browser windows. Also, when the window is smaller then the width of current number of divs in a row, div arrangement should change to less number of columns.
I was trying to find some code, but no luck. Hope that someone could help.
And this is the code I have for now
HTML:
<div id="Area">
<div id="container">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
</div>
CSS:
#Area {
padding: 30px 50px; /* top and bottom 25px, left and right 50px */
}
#container{
width: 90%;
margin: 0 auto;
}
.square {
display: inline-block;
margin: 7 auto;
width: 350px;
height: 200px;
background-color: gray;
border: 1px black solid;
}
UPDATE.
After Shai's help, I've come up to a new problem. Divs are now stacked liked this:
But I would like to have them like this:
Add text-align: center; to the #container.
Working JSFiddle
A quick fix without changing your markup and styles would be to give your #area the position:relative; and width:100% attributes as well as changing the width:90% to a full width:100% of your #container
#Area {
padding: 30px 50px; /* top and bottom 25px, left and right 50px */
width: 100%;
position: relative;
}
#container{
width: 100%;
margin: 0 auto;
}
http://jsfiddle.net/8a0035ep/
Another solution(which i prefer most) is to remove dsiplay: inline-block(so keep default block) and use margin: 0 auto. Also add margin-bottom at x px according to your needs.
#Area {
padding: 30px 50px;
/* top and bottom 25px, left and right 50px */
}
#container {
width: 90%;
margin: 0 auto;
}
.square {
margin: 7 auto;
width: 350px;
height: 200px;
background-color: gray;
border: 1px black solid;
margin: 0 auto;
margin-bottom: 5px;
}
<div id="Area">
<div id="container">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
</div>
Could your heard about media query. I use the attribute to achieve your purpose.
This is my JSFiddle. The main code:
#media screen and (min-width:352px){
#container{
text-align: center;
}
}
Related
I want to apply this style to my current code but the spaces dont fit the grid div they spill out under it:
.square {
width: 20%;
height: 20%;
border: 1px solid black;
box-sizing: border-box;
margin: 1%;
border-radius: 5px;
}
Here is my current HTML/CSS:
.container {
display: flex;
justify-content: center;
align-items: center;
height: 500px;
}
.grid {
display: flex;
flex-wrap: wrap;
width: 500px;
height: 500px;
margin: 0 50px;
}
.square {
width: 20%;
height: 20%;
border: 1px solid black;
box-sizing: border-box;
}
.selector {
width: 200px;
height: 500px;
display: flex;
flex-direction: column;
align-items: center;
margin: 0 50px;
}
.bet-amount {
margin: 50px;
}
.button {
margin: 50px;
}
<html>
<head>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
<div class="grid">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
<div class="selector">
<div class="amount">
<label for="amount-input">Amount:</label>
<input type="text" id="amount-input">
</div>
<div class="button">
<button>Play</button>
</div>
</div>
</div>
</body>
</html>
I also want to center the whole container vertically and horizontally in the center of the screen and convert the px to %.
I have tried editing the various heights and widths of the elements but can't seem to get it to work.
Here is the first code that's all I wanted. but with the grid layout. this is float based layout
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
max-width: 600px;
margin: 0 auto;
background-color: #232323;
}
.square {
padding-bottom: 30%;
width: 30%;
background-color: #399099;
float: left;
margin: 1.66%;
}
.content {
clear: both;
}
</style>
</head>
<body>
<div class="header">
<h1><span id="target">RGB</span> color game</h1>
</div>
<div id="manue">
<button id="reset">New Color</button>
<p id="massage"></p>
<div id="lavel">
<button id="easy">Easy</button>
<button id="heard">Heard</button>
</div>
</div>
<div class="container">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="content"></div>
</div>
<script src="index.pack.js"></script>
</body>
</html>
<script src="index.pack.js"></script>
</body>
</html>
This is the result all I wanted but with grid
Here is the Codepen link
I tried first this one
max-width: 650px;
margin: 0 auto;
padding: 4rem;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
grid-gap: 10px;
}```
I got this I don't want the squares stack on top of each other on mobile view
then I tried this one
grid-template-columns: repeat(3, 1fr);
But this time I got this Why they so far from each other?
Can anyone please tell me how can I achieve the float-based layout with gird?
Working Code !!
I have removed width property of .square class and make the padding-bottom: 100%
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
max-width: 600px;
margin: 0 auto;
background-color: #232323;
display: grid;
grid-template-columns: repeat(3, 1fr)
}
.square {
padding-bottom: 100%;
background-color: #399099;
float: left;
margin: 1.66%;
}
.content {
clear: both;
}
</style>
</head>
<body>
<div class="header">
<h1><span id="target">RGB</span> color game</h1>
</div>
<div id="manue">
<button id="reset">New Color</button>
<p id="massage"></p>
<div id="lavel">
<button id="easy">Easy</button>
<button id="heard">Heard</button>
</div>
</div>
<div class="container">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="content"></div>
</div>
<script src="index.pack.js"></script>
</body>
</html>
<script src="index.pack.js"></script>
</body>
</html>
I saw that someone beat me to an answer but since I already made this ima leave it here incase you think this design is nicer.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
max-width: 600px;
margin: 0 auto;
background-color: #232323;
display: grid;
grid-template-columns: repeat(3, 1fr);
border:1px solid black;
}
.square {
background-color: #399099;
margin:0 auto;
padding:30%;
border:1px solid black;
width:100%;
}
.content {
clear: both;
}
<div class="header">
<h1><span id="target">RGB</span> color game</h1>
</div>
<div id="manue">
<button id="reset">New Color</button>
<p id="massage"></p>
<div id="lavel">
<button id="easy">Easy</button>
<button id="heard">Heard</button>
</div>
</div>
<div class="container">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="content"></div>
</div>
I think the code speaks for itself. I tried using percentage as grid-gap and padding on .container but grid can't calculate height in that case according to this post.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
max-width: 600px;
margin: 0.5rem auto;
background-color: #232323;
/* NEW CODE */
display: grid;
padding: 0.5rem;
padding-bottom: 0px; /* Honestly don't know why I needed this */
grid-gap: 0.5rem;
grid-template-columns: 1fr 1fr 1fr;
}
.square {
padding-top: 100%; /* ASPECT RATIO 1:1 */
background-color: #399099;
}
<div class="header">
<h1><span id="target">RGB</span> color game</h1>
</div>
<div id="manue">
<button id="reset">New Color</button>
<p id="massage"></p>
<div id="lavel">
<button id="easy">Easy</button>
<button id="heard">Hard</button>
</div>
</div>
<div class="container">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="content"></div>
</div>
I'm trying to create a 'grid' of squares using CSS. So far I've tried:
.square {
display: block;
float: left;
border: 1px solid black;
width: 50px;
height: 50px;
margin: 30px;
}
<div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
<div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
However, this simply display 6 squares in a row. I'd like to have two rows of 3 squares each, however. Why do the encompassing divs not have the 'normal' behavior that they are displayed beneath each other?
you have to clear your floatting elements
https://css-tricks.com/all-about-floats/
Clearing the Float
Float's sister property is clear. An element that has the clear property set on it will not move up adjacent to the float like the float desires, but will move itself down past the float....
.square {
display: block;
float: left;
border: 1px solid black;
width: 50px;
height: 50px;
margin: 30px;
}
body>div {overflow:hidden;}
<div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
<div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
It's because of float: left.
Option 1:
Use display:inline-block instead of float:left:
.square {
display: inline-block;
border: 1px solid black;
width: 50px;
height: 50px;
margin: 30px;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
<div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
</body>
</html>
Option 2
Use clearfix in parent div:
.square {
display: block;
float: left;
border: 1px solid black;
width: 50px;
height: 50px;
margin: 30px;
}
.parent{
clear: both;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="parent">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
<div class="parent">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
</body>
</html>
Something like this?
<!DOCTYPE html>
<html>
<head>
<style>
.square-wrapper {
width: 276px;
}
.square {
display: inline-block;
float: left;
border: 1px solid black;
width: 30px;
height: 50px;
margin: 30px;
}
</style>
</head>
<body>
<div class="square-wrapper">
<div class="square">1</div>
<div class="square">2</div>
<div class="square">3</div>
</div>
<div class="square-wrapper">
<div class="square">4</div>
<div class="square">5</div>
<div class="square">6</div>
</div>
</body>
</html>
You can place the blocks inside of a containing div that has a fixed width. This will force the blocks to stack given their display type. For example, placing the width of the container to 400px makes enough space for only three blocks in a row. Frameworks use a system that is very useful for creating grids that are evenly dispersed throughout the container.
<!DOCTYPE html>
<html>
<head>
<style>
.square {
display: block;
float: left;
border: 1px solid black;
width: 50px;
height: 50px;
margin: 30px;
}
.container {
width:400px;
}
</style>
</head>
<body>
<!-- Place all of your blocks in a single container -->
<div class="container">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<!-- The container is not large enough to display all of the blocks in one row -->
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
</body>
</html>
Created a codepen at http://codepen.io/cbireddy/pen/vmYxbz
.board {
display: flex;
width: 600px;
height: 400px;
justify-content: flex-start;
flex-flow: row wrap;
}
.square {
width: 200px;
height: 200px;
border: 5px solid black;
border-radius: 10px;
}
<div class="=board">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
I was thinking the squares should be in a 2x3 matrix. Instead they are all stacked vertically. What am I missing? Thought that display: flex will align the items along main axis, which is horizontal.
Can someone please look into this and tell me what am I doing wrong? Goal is to visualize the squares in a 2x3 matrix.
-Thanks
Chakri
You need to fix the typo and add box-sizing: border-box to .square so that the borders don't push beyond the defined width.
.board {
display: flex;
width: 600px;
height: 400px;
justify-content: flex-start;
flex-flow: row wrap;
}
.square {
width: 200px;
height: 200px;
border: 5px solid black;
border-radius: 10px;
box-sizing: border-box;
}
<div class="board">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
In row 24 of your HTML (in Codepen), you have typo. Just change <div class="=board">to <div class="board">
<div class="=board">
Replace this with
<div class="board">
Should do the trick.
Try This code
.board {
display: flex;
width: 600px;
height: 400px;
justify-content: flex-start;
flex-flow: row wrap;
}
.square {
width: 200px;
height: 200px;
border: 5px solid black;
border-radius: 10px;
}
<div class="board">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
I'm new to html and css and I'm trying to create a website, part of the code is here:
HTML:
<div class="row">
<div class="circle"></div>
</div>
<div class="row">
<div class="circle"></div>
<div class="circle"></div>
</div>
<div class="row">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
<div class="row">
<div class="circle"></div>
<div class="circle"></div>
</div>
<div class="row">
<div class="circle"></div>
</div>
CSS:
.circle
{
border-style: solid;
border-color: red;
width: 70px;
border-radius: 40px;
float:left;
margin: 2px;
}
.row
{
border-style: solid;
border-color: black;
height: 100px;
width: 700px;
margin: 10px;
}
http://jsfiddle.net/ubd9W/
I'm trying to centre red circles (horizontally and vertically) within the black boxes but I can't seem to manage it. I've tried using 'text-align' and setting the left and right margin to auto but that doesn't work. I also can't use 'absolute' positioning because I have a fixed menu bar at the top of the page and that gets ruined if you scroll.
Any help will be greatly appreciated. Thanks
very simple to understand with the same code you provide you just need to give the parent element a text-align:center; and a position:relative;
.row{
border:4px solid black;
height: 100px;
width: 700px;
margin: 10px;
text-align:center;
position:relative;
}
then set the children margin:10px auto; and display:inline-block;
.circle{
border:4px solid red;
height: 70px;
width: 70px;
border-radius: 40px;
position:relative;
margin:10px auto;
display:inline-block;
}
or if you want more margin between them change margin:10px auto; to margin: 10px 40px;
demo: http://jsfiddle.net/ubd9W/14/
I don't think you can achieve this only with CSS, without hardcoding values.
You can use flexbox http://coding.smashingmagazine.com/2013/05/22/centering-elements-with-flexbox/ (not so good browser support) or a JavaScript solution.
EDIT:
I'm using jQuery.
for three circles:
var rowWidth = jQuery('.row').width();
var circleWidth = jQuery('.circle').width();
var equalSpace = rowWidth - (3*circleWidth);
jQ('.row').css("padding-left", equalSpace + "px").css("padding-right", equalSpace + "px");
for a dynamic number of circles:
var rowWidth = jQuery('.row').width();
var circleWidth = jQuery('.circle').width();
jQuery('.row').each(function(){
var circNumber = jQuery(this).children('.row').length; //this will give you the number of circles inside the current row.
var thisWidth = rowWidth - (circNumber * circleWidth);
jQ(this).css('padding-left', thisWidth + "px").css('padding-right', thisWidth + "px")
})
We iterate through all the row and see how many circles we have in them and multiply theyr number to a circle's width so we can substract the left/right padding.
using flexbox it's by far the best option, but it's now supported by ie<10 http://caniuse.com/#feat=flexbox
If you need it to work on browsers that doesn't support flexbox, the horizontal alignment is easy, you can do it adding a the attributes display: inline on .circle and text-align: center on .row.
http://jsfiddle.net/BTh2t/2/
.circle
{
border-style: solid;
border-color: red;
height: 70px;
width: 70px;
border-radius: 40px;
display: inline-block;
margin: 2px;
}
.row
{
border-style: solid;
border-color: black;
height: 100px;
width: 700px;
margin: 10px;
text-align: center;
}
For the vertical alignment i could make it work using percentages for the height of the circle and i change the box-sizing property and the top and bottom margin, so the percentage assigned make sense and assign position relative to the circle class so we it can use the top property using the half of the remaining percentage ex:
circle height = 70%,
circle top = 15%
http://jsfiddle.net/BTh2t/3/
.circle
{
border-style: solid;
border-color: red;
height: 70%;
width: 70px;
border-radius: 40px;
display: inline-block;
margin-left: 2px;
margin-right: 2px;
position: relative;
top: 15%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.row
{
border-style: solid;
border-color: black;
height: 100px;
width: 700px;
margin: 10px;
text-align: center;
}
keep in mind that with this approach if you increase the height of the .row class the height of the circle will increase automatically.
I hope it helps!
Another simple solution with the display:table property as well:
HTML
<div class="row">
<div class="wrapper">
<div class="circle"></div>
</div>
</div>
<div class="row">
<div class="wrapper">
<div class="circle"></div>
<div class="circle"></div>
</div>
</div>
<div class="row">
<div class="wrapper">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
</div>
<div class="row">
<div class="wrapper">
<div class="circle"></div>
<div class="circle"></div>
</div>
</div>
<div class="row">
<div class="wrapper">
<div class="circle"></div>
</div>
</div>
CSS to add:
.wrapper {
display: table;
margin: auto;
}
Link to Fiddle
For horizontal aligning: use text-align: center; + display:inline-block;
For vertical aligning: use line-height + vertical-align: middle;
FIDDLE
CSS
.circle
{
border-style: solid;
border-color: red;
height: 70px;
width: 70px;
border-radius: 40px;
margin: 2px;
display:inline-block; /* for horizontal alignment */
vertical-align: middle; /* for vertical alignment */
}
.row
{
border-style: solid;
border-color: black;
height: 100px;
line-height: 100px; /* for vertical alignment */
width: 700px;
margin: 10px;
text-align: center; /* for horizontal alignment */
}