Develop Reference

how do I make the a title appear on the top of the div boxes in css

I am trying to include some game recommendations in my website and I am trying to have the title above the three boxes of games.
this is how it looks like right now. I need the title in the center and above the other boxes.
Here is the code that I have used for it:
Html:
<div class="second-box">
<div class="game-section">
<h1 id="games"> Game Recommendations </h1>
<div class="box1">
<p> This is the first game </p>
</div>
<br>
<br>
<div class="box2">
<p> This is the first game </p>
</div>
<br>
<br>
<div class="box3">
<p> This is the first game </p>
</div>
</div>
</div>
below is the css code for the website:
CSS:
.game-section{
height: 400px;
align-content: center;
width: 100%;
background-color: darkkhaki;
display: inline-flex;
/* inline flex allows inside the game-section div allows the smaller divs to extend horizontally when inline block is displayed on each of them. */
}
#game{
font-size: 23px;
}
.box1{
background-color: darkolivegreen;
grid-area: box1;
height:230px;
width: 250px;
display:inline-block;
margin: 20px;
}
.box2{
background-color: rgba(108, 148, 39, 0.267);
grid-area: box2;
height:230px;
width: 250px;
display: inline-block;
margin: 20px;
}
.box3{
grid-area:box3;
background-color:rgb(104, 99, 26);
height:230px;
width: 250px;
display: inline-block;
margin: 20px;
}
/* The end of the game recommendation boxes. */

.game-section{
height: 400px;
align-content: center;
width: 100%;
background-color: darkkhaki;
display: flex;
flex-direction:column;
justify-content:center;
text-align:center;
/* inline flex allows inside the game-section div allows the smaller divs to extend horizontally when inline block is displayed on each of them. */
}
#game{
font-size: 23px;
}
.boxes{
display:flex;
gap:1rem;
justify-content:center;
}
.box1{
background-color: darkolivegreen;
grid-area: box1;
height:230px;
width: 250px;
display:inline-block;
margin: 20px;
}
.box2{
background-color: rgba(108, 148, 39, 0.267);
grid-area: box2;
height:230px;
width: 250px;
display: inline-block;
margin: 20px;
}
.box3{
grid-area:box3;
background-color:rgb(104, 99, 26);
height:230px;
width: 250px;
display: inline-block;
margin: 20px;
}
/* The end of the game recommendation boxes. */
<div class="second-box">
<div class="game-section">
<h1 id="games"> Game Recommendations </h1>
<div class="boxes">
<div class="box1">
<p> This is the first game </p>
</div>
<div class="box2">
<p> This is the first game </p>
</div>
<div class="box3">
<p> This is the first game </p>
</div>
</div>
</div>
</div>

.game-section{
height: 400px;
align-content: center;
width: 100%;
background-color: darkkhaki;
display: inline-flex;
/* inline flex allows inside the game-section div allows the smaller divs to extend horizontally when inline block is displayed on each of them. */
}
#game{
font-size: 23px;
}
.box1{
background-color: darkolivegreen;
grid-area: box1;
height:230px;
width: 250px;
display:inline-block;
margin: 20px;
}
.box2{
background-color: rgba(108, 148, 39, 0.267);
grid-area: box2;
height:230px;
width: 250px;
display: inline-block;
margin: 20px;
}
.box3{
grid-area:box3;
background-color:rgb(104, 99, 26);
height:230px;
width: 250px;
display: inline-block;
margin: 20px;
}
h1{
width: 100%;
text-align: center;
background-color: darkkhaki;
margin: 0px!important;
}
/* The end of the game recommendation boxes. */
<div class="second-box">
<div class ="textGame">
<h1 id="games"> Game Recommendations: </h1>
</div>
<div class="game-section">
<div class="box1">
<p> This is the first game </p>
</div>
<br>
<br>
<div class="box2">
<p> This is the first game </p>
</div>
<br>
<br>
<div class="box3">
<p> This is the first game </p>
</div>
</div>
</div>

How to make the content in a horizontally scrollable div broken into two lines?

The code below produces a horizontally scrollable div. I want to make it such that this text: I want to break this text up into two lines, is broken into two lines instead of having it on one long line. I tried reducing the width of the .navigation-item-content but it didn't break the text into two lines and just moved the .navigation-item-content div's around.
Any suggestions? I just can't get it to work.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
.navigation {
white-space: nowrap;
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
background-color: white;
background-color: lightgray;
}
.navigation-item {
padding: 12px 11px 7px 11px;
width: 100%;
}
.navigation-item-content {
display: flex;
flex-direction: row;
justify-content: center;
align-content: center;
}
.navigation-item-title {
text-align: center;
}
</style>
</head>
<body>
<div class="navigation">
<div class="navigation-item">
<div class="navigation-item-content">
<p class="navigation-item-title">
<span>I want to break this text up into two lines</span>
</p>
</div>
</div>
<div class="navigation-item">
<div class="navigation-item-content">
<p class="navigation-item-title ">
<span>I want to break this text up into two lines</span>
</p>
</div>
</div>
<div class="navigation-item">
<div class="navigation-item-content">
<p class="navigation-item-title ">
<span>I want to break this text up into two lines</span>
</p>
</div>
</div>
<div class="navigation-item">
<div class="navigation-item-content">
<p class="navigation-item-title ">
<span>I want to break this text up into two lines</span>
</p>
</div>
</div>
</div>
</body>
</html>

You need some changes to your styles. .navigation class makes width: 100% and .navigation-item class add width divide 100 by your items number. like:
.navigation {
white-space: nowrap;
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
background-color: white;
background-color: lightgray;
flex: 1 1 100%;
position: relative;
}
.navigation-item {
display: flex;
flex-wrap: wrap;
padding: 12px 11px 7px 11px;
flex: 1 0 25%;
white-space: normal;
}
.navigation-item-content {
display: flex;
flex-direction: row;
justify-content: center;
align-content: center;
}
.navigation-item-title {
text-align: center;
}

You can either add a <br> tag where you want to break the line,
or you can remove white-space:nowrap from the .navigation so that it doesn't all go in the same line

Consider adding a specific width to create the line break and disable the shrinking:
.navigation {
display: flex;
overflow: auto;
background-color: white;
background-color: lightgray;
}
.navigation-item {
padding: 12px 11px 7px 11px;
width: 200px;
flex-shrink: 0; /* don't forget this*/
}
.navigation-item-title {
text-align: center;
}
<div class="navigation">
<div class="navigation-item">
<p class="navigation-item-title">
I want to break this text up into two lines
</p>
</div>
<div class="navigation-item">
<p class="navigation-item-title ">
<span>I want to break this text up into two lines
</p>
</div>
<div class="navigation-item">
<p class="navigation-item-title ">
I want to break this text up into two lines
</p>
</div>
<div class="navigation-item">
<p class="navigation-item-title ">
I want to break this text up into two lines
</p>
</div>
</div>

How to make 3 column two side by side one middle my divs takes everything to left

I am trying to make simple css layout. I want 3 box
{Left} {center} {right}
So I write this code
#myleft {
position: relative;
float: left;
width: 20%;
background-color: #CC6600;
}
#mycenter {
width: 60%;
background-color: #f2f4f4;
}
* html #mycenter {
height: 1%
}
#myright {
position: relative;
float: right;
width: 20%;
background-color: #FF6633;
}
<div id='left'> Left </div>
<div id='mycenter'> Center </div>
<div id='right'> right </div>
but instead of
{left} {center} {right}
{left}
{center}
{right}
I don't know why but it goes like this even the float is left and right

You didn't name your div id's correctly. they should be myleft and myright
body {
width: 100%;
}
#myleft {
position:relative;
float:left;
width:20%;
background-color:#CC6600;
}
#mycenter {
width:60%;
float: left;
background-color:#f2f4f4;
}
#mycenter {
height:1%
}
#myright {
float:left;
width:20%;
background-color:#FF6633;
}
<div id='myleft'> Left </div>
<div id='mycenter'> Center </div>
<div id='myright'> right </div>

Wrap your divs into a main div and try to use Flexbox
Stack Snippet
.d-flex {
display: flex;
flex-wrap: wrap;
}
#myleft {
position: relative;
width: 20%;
background-color: cyan;
}
#mycenter {
width: 60%;
background-color: #f2f4f4;
}
#myright {
position: relative;
width: 20%;
background-color: cyan;
}
<div class="d-flex">
<div id='myleft'> Left </div>
<div id='mycenter'> Center </div>
<div id='myright'> right </div>
</div>

And, of course, there is grid. First wrap the "gridded" elements
<div id='wrapper'>
<div id='left'> Left </div>
<div id='center'> Center </div>
<div id='right'> right </div>
</div>
#wrapper {
display: grid;
grid-template-columns: 2fr 6fr 2fr;
}
Then, optionally, if you want the content of each sub-div to be centered:
#left, #right, #center {
margin-left:auto;
margin-right:auto;
}

.container {
display: flex;
}
.box1 {
flex: 1 ;
text-align: center;
background-color: gray;
}
.box2 {
flex: 2;
text-align: center
}
.box3 {
flex: 1;
text-align: center;
background-color: gray;
}
<div class="container">
<div class="box1">
<p> text</p>
</div>
<div class="box2">
<p> text</p>
</div>
<div class="box3">
<p> text</p>
</div>
</div>

Force image div container to stretch inside custom image box layout

I develop custom image box html control which contains image area along with small image thumbnails collection located at the bottom, top, left or right from the main image.
The problem is the main image div container doesnt stretch to fill remain area in main frame div.
Here is my code
.wvIBoxFrameDiv {
width: 300px;
height: 300px;
background: red;
}
.wvIBoxMainImageDiv {
background: green;
}
.wvIBoxThumbContainerDiv{
background: black;
overflow: hidden;
white-space: nowrap;
}
.wvIBoxThumbImagesContainerDiv{
background: blue;
display: inline-block;
}
.wvIBoxThumbNavigationDiv{
background: purple;
display: inline-block;
height: 30px;
width: 30px;
}
.wvIBoxThumbImageDiv{
background: orange;
display: inline-block;
height: 40px;
width: 40px;
}
<div class="wvIBoxFrameDiv">
<div class="wvIBoxMainImageDiv">
</div>
<div class="wvIBoxThumbContainerDiv">
<div class="wvIBoxThumbNavigationDiv"></div>
<div class="wvIBoxThumbImagesContainerDiv">
<div class="wvIBoxThumbImageDiv"></div>
<div class="wvIBoxThumbImageDiv"></div>
<div class="wvIBoxThumbImageDiv"></div>
<div class="wvIBoxThumbImageDiv"></div>
<div class="wvIBoxThumbImageDiv"></div>
<div class="wvIBoxThumbImageDiv"></div>
</div>
<div class="wvIBoxThumbNavigationDiv"></div>
</div>
</div>
Here I need thumbnails div container (with black background) placed in the bottom of main (red) frame div, while main image div (with green background) should stretch to fill remain area.
What am I do wrong?

Give height and width as 100% to .wvIBoxMainImageDiv
.wvIBoxFrameDiv {
width: 300px;
height: 300px;
background: red;
}
.wvIBoxMainImageDiv {
background: green;
height:100%; /*this here*/
width:100%; /*and here*/
}
.wvIBoxThumbContainerDiv{
background: black;
overflow: hidden;
white-space: nowrap;
}
.wvIBoxThumbImagesContainerDiv{
background: blue;
display: inline-block;
}
.wvIBoxThumbNavigationDiv{
background: purple;
display: inline-block;
height: 30px;
width: 30px;
}
.wvIBoxThumbImageDiv{
background: orange;
display: inline-block;
height: 40px;
width: 40px;
}
<div class="wvIBoxFrameDiv">
<div class="wvIBoxMainImageDiv">
</div>
<div class="wvIBoxThumbContainerDiv">
<div class="wvIBoxThumbNavigationDiv"></div>
<div class="wvIBoxThumbImagesContainerDiv">
<div class="wvIBoxThumbImageDiv"></div>
<div class="wvIBoxThumbImageDiv"></div>
<div class="wvIBoxThumbImageDiv"></div>
<div class="wvIBoxThumbImageDiv"></div>
<div class="wvIBoxThumbImageDiv"></div>
<div class="wvIBoxThumbImageDiv"></div>
</div>
<div class="wvIBoxThumbNavigationDiv"></div>
</div>
</div>

You can also use flex, (using auto-prefixer):
<div class="fullGallery">
<div class="mainImage">
</div>
<div class="bottomImages">
<div class="navigationButton">
</div>
<div class="imageContainer">
<div class="oneImage"></div>
<div class="oneImage"></div>
<div class="oneImage"></div>
</div>
<div class="navigationButton">
</div>
</div>
</div>
.fullGallery {
width: 300px;
height: 300px;
background-color: red;
display: flex;
flex-direction: column;
}
.mainImage {
width: 100%;
flex: 1;
background-color: yellow;
}
.bottomImages {
width: 100%;
height: 70px;
background-color: green;
display: flex;
}
.navigationButton {
width: 40px;
height: 100%;
background-color: pink;
}
.imageContainer {
flex: 1;
display: flex;
justify-content: space-around;
}
.oneImage {
background-color: blue;
width: 26%;
}
http://codepen.io/anon/pen/JYrdQJ
I like it more

CSS3 Divs side by side, arrangement

I have problem with divs arrangement.
Here is my code:
#container{
}
#block1{
vertical-align: top;
display: inline-block;
width:49%;
height:50px;
background-color:red;
}
#block2{
vertical-align: top;
display: inline-block;
width:49%;
height:100px;
background-color:blue;
}
<div id="container">
<div id="block1"></div>
<div id="block2"></div>
<div id="block1"></div>
<div id="block1"></div>
</div>
And issue is arrangement, it looks like this:
But i need to look like this. Arrange divs up without white spaces.
Any ideas here? Thanks :).
Here is JSFiddle, so you can play with it: http://jsfiddle.net/cn2r3tga/

css
#container{
}
#block1{
background-color: #FF0000;
display: inline-block;
float: left;
height: 50px;
margin: 2px 0;
vertical-align: top;
width: 100%;
}
#block2{
background-color: #0000FF;
display: inline-block;
float: left;
height: 100px;
margin: 2px 0;
vertical-align: top;
width: 100%;
}
.alignment{
float: left;
width: 50%;
}
HTML
<div id="container">
<div class="alignment">
<div id="block1"></div>
<div id="block1"></div>
</div>
<div class="alignment">
<div id="block2"></div>
<div id="block1"></div>
</div>
</div>
Note: ID of any HTML control should be unique

Reorder your div's like this (also changed the id to class):
<div id="container">
<div class="block2"></div>
<div class="block1"></div>
<div class="block1"></div>
<div class="block1"></div>
</div>
Then use float instead of inline-block:
.block1{
vertical-align: top;
float: right;
width:49%;
height:50px;
background-color: red;
}
.block2{
float: right;
width:49%;
height:100px;
background-color: blue;
}
Updated Fiddle

You can group them into two divs and then get the desired result. As shown below:
#container{
}
.left{
float:left;
width:49%;
margin-right:2%
}
.right{
float:right;
width:49%;
}
.block1{
vertical-align: top;
display: inline-block;
width:100%;
height:50px;
margin-bottom: 10px;
background-color:red;
}
.block2{
vertical-align: top;
display: inline-block;
width:100%;
height:100px;
background-color:blue;
}
<div id="container">
<div class="left">
<div class="block1"></div>
<div class="block1"></div>
</div>
<div class="right">
<div class="block2"></div>
<div class="block1"></div>
</div>
</div>

https://jsfiddle.net/cn2r3tga/3/
Updated fiddle.
"float:right"
should be used for those going to the right.

first you use id which should be used only once so use classes instead which you can re-use as many times as you want.
Secondly I would add another 2 div within your .container to make the result you want and add the css to keep the shape your want:
<div class="container">
<div calss="left">
<div class="block1"></div>
<div class="block1"></div>
</div>
<div class="right">
<div class="block2"></div>
</div>
</div>