I have 3 simple boxes that I would like to align horizontally next to each other. But currently they are just stacking on-top of each other vertically. I am using Twitter Boostrap as well for the 'row' class.
HTML:
.img-box-kai {
width: 300px;
height: 450px;
border: 3px solid red;
}
.img-box-lucas {
width: 300px;
height: 450px;
border: 3px solid red;
}
.img-box-bryant {
width: 300px;
height: 450px;
border: 3px solid red;
}
<div class="container">
<div class="row">
<div class="img-box-kai">Rectangle Test</div>
<div class="img-box-lucas">Rectangle Test</div>
<div class="img-box-bryant">Rectangle Test</div>
</div>
</div>
This is what they look like currently: picture
If you intend on using Bootstrap, you'll want to remove the set widths and use the grid system to stack them horizontally using Bootstrap:
.img-box-kai {
height: 450px;
border: 3px solid red;
}
.img-box-lucas {
height: 450px;
border: 3px solid red;
}
.img-box-bryant {
height: 450px;
border: 3px solid red;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-4 img-box-kai">Rectangle Test</div>
<div class="col-xs-4 img-box-lucas">Rectangle Test</div>
<div class="col-xs-4 img-box-bryant">Rectangle Test</div>
</div>
</div>
Use display: flex on .row, like:
.row {
display: flex;
}
Have a look at the snippet below:
.img-box-kai {
width: 300px;
height: 450px;
border: 3px solid red;
}
.img-box-lucas {
width: 300px;
height: 450px;
border: 3px solid red;
}
.img-box-bryant {
width: 300px;
height: 450px;
border: 3px solid red;
}
.row {
display: flex;
justify-content: center; /* Aligning Horizontally */
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="img-box-kai">Rectangle Test</div>
<div class="img-box-lucas">Rectangle Test</div>
<div class="img-box-bryant">Rectangle Test</div>
</div>
</div>
Hope this helps!
you need to add float:left to each of them.
like
.img-box-kai {
width: 300px;
height: 450px;
float:left;
border: 3px solid red;
}
.img-box-lucas {
width: 300px;
height: 450px;
float:left;
border: 3px solid red;
}
.img-box-bryant {
width: 300px;
height: 450px;
float:left;
border: 3px solid red;
}
You can add this code and will work.
.row{
display: flex;
flex-direction: row
}
.img-box-kai {
width: 300px;
height: 450px;
border: 3px solid red;
}
.img-box-lucas {
width: 300px;
height: 450px;
border: 3px solid red;
}
.img-box-bryant {
width: 300px;
height: 450px;
border: 3px solid red;
}
.row{
display: flex;
flex-direction: row
}
<div class="container">
<div class="row">
<div class="img-box-kai">Rectangle Test</div>
<div class="img-box-lucas">Rectangle Test</div>
<div class="img-box-bryant">Rectangle Test</div>
</div>
</div>
You need to use Bootstrap class to each of them. like
HTML:
<div class="container">
<div class="row">
<div class="img-box-kai col-md-4 pull-left">Rectangle Test</div>
<div class="img-box-lucas col-md-4 pull-left">Rectangle Test</div>
<div class="img-box-bryant col-md-4 pull-left">Rectangle Test</div>
</div>
</div>
CSS:
.img-box-kai {
min-height: 450px;
border: 3px solid red;
}
.img-box-lucas {
min-height: 450px;
border: 3px solid red;
}
.img-box-bryant {
min-height: 450px;
border: 3px solid red;
}
Related
I want to center horizontally a div but it works in Google Chrome but in IE not work.
This is my code:
.app-content {
width: 100%;
height: calc(100%);
position: relative;
}
.pagination--custom {
width: fit-content;
margin: 0 auto;
border: 1px solid blue;
}
.pagination {
border: 1px solid black;
height: 50px;
}
<div class="app-content">
<div class="pagination--custom">
<div class="pagination">
</div>
</div>
</div>
fit-content is experimental and won't work in ie or edge: https://developer.mozilla.org/en-US/docs/Web/CSS/width.
Make it display: inline-block instead and put text-align: center on the parent
.app-content {
width: 100%;
height: calc(100%);
position: relative;
text-align:center;
}
.pagination--custom {
display:inline-block;
margin: 0 auto;
border: 1px solid blue;
}
.pagination {
border: 1px solid black;
width: 50px;
height: 50px;
}
<div class="app-content">
<div class="pagination--custom">
<div class="pagination">
</div>
</div>
</div>
Try This: Tested its working!
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style>
.pagination--custom {
width: 50px;
height: 50px;
border: 1px solid #000;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="app-content">
<div class="pagination--custom">
<div class="pagination">
</div>
</div>
</div>
</body>
</html>
JUST SET margin: 0 auto; for pagination
Your margin: 0 auto; has to be on .pagination and remove width: fit-content;.
.app-content {
width: 100%;
height: calc(100%);
position: relative;
}
.pagination--custom {
border: 1px solid blue;
}
.pagination {
border: 1px solid black;
width: 50px;
height: 50px;
margin: 0 auto;
}
<div class="app-content">
<div class="pagination--custom">
<div class="pagination">
</div>
</div>
</div>
The below diagram was given to me in an interview questions and the interviewer told me that I am missing clear:both in my code.
I tried something like this. But couldn't get the desired results
.name3 {
border: 1px solid black;
height: 50px;
width: 90px;
}
.name {
border: 1px solid black;
height: 10px;
width: 90px;
}
.name1 {
border: 1px solid black;
height: 40px;
width: 30px;
}
#name2 {
border: 1px solid black;
height: 20px;
width: 30px;
float: left;
}
<body>
<div class="name3">
<div class="name"></div>
<div class="name1"></div>
<div id="name2"></div>
<div id="name2"></div>
<div id="name2"></div>
<div id="name2"></div>
</div>
</body>
Try this
.name3 {
border: 1px solid black;
height: 55px;
width: 100px;
float: left;
}
.name {
border: 1px solid black;
height: 10px;
width: 99px;
float: left;
}
.name1 {
border: 1px solid black;
height: 42px;
width: 34px;
float: left;
}
#name2 {
border: 1px solid black;
height: 20px;
width: 30px;
float: left;
}
<body>
<div class="name3">
<div class="name"></div>
<div class="name1"></div>
<div id="name2"></div>
<div id="name2"></div>
<div id="name2"></div>
<div id="name2"></div>
</div>
</body>
I tried to reproduce this with Flexbox.
Here you can learn more: https://www.w3schools.com/css/css3_flexbox.asp
.top,.side,.square {
padding: 5px;
box-sizing: border-box;
border: 1px solid black;
}
.container {
display: flex;
flex-direction: column;
width: 200px;
}
.container .main {
display: flex;
flex-direction: row;
max-width: 200px;
}
.container .main .content {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.container .main .content .square {
width: 50%;
}
<div class="container">
<div class="top">.top</div>
<div class="main">
<div class="side">.side</div>
<div class="content">
<div class="square">.square</div>
<div class="square">.square</div>
<div class="square">.square</div>
<div class="square">.square</div>
</div>
</div>
</div>
Hi SIMIN i have read your question and here is my solution to that. Copy past the code below in your editor. Also note that i was using opera browser for running this code, so if you are using different browser there may be a little difference in output. Good luck
<html>
<head>
<style>
.name3{
border: 1px solid black;
height: 53px;
width: 93px;
}
.name{
border: 0.5px solid black;
height: 10px;
width: 92px;
float: left;
}
.name1{
border: 0.5px solid black;
height: 41px;
width: 30px;
float: left;
clear: left;
}
#name2one{
height: 20px;
width: 30px;
border: 0.5px solid black;
float: left;
clear: none;
}
</style>
</head>
<body>
<div class="name3">
<div class="name"></div>
<div class="name1"></div>
<div id="name2one"></div>
<div id="name2one"></div>
<div id="name2one"></div>
<div id="name2one"></div>
</div>
</body>
</html>
How about using percentage in width
<div class="wrapper">
<div class="header"></div>
<div class="sidebar"></div>
<div class="article"></div>
<div class="article"></div>
<div class="article"></div>
<div class="article"></div>
</div>
.wrapper, .header, .sidebar, .article{
border: 1px solid black;
float: left;
}
.wrapper {
height: 100px;
width: 100px;
}
.header{
width: 100%;
height: 20px;
}
.sidebar {
height: 80px;
width: 33.33%;
}
.article {
height: 40px;
width: 33.33%;
}
This might be an easy one. Below is a structure which I want to create:
But I always end up with either this:
Or this:
Here is my code:
HTML
.newdiv2,
.newdiv3,
.newdiv4,
.newdiv5 {
width: 25px;
height: 25px;
margin-bottom: 5px;
border: 3px solid black;
}
.newdiv6 {
width: 150;
height: 150;
border: 3px solid black;
}
.newdiv {
height: 250px;
width: 450px;
float: left;
border: 3px solid black;
}
.divwrapper {
float: left;
border: 3px solid blue;
}
.mainwrapper {
display: block;
}
<div class="mainwrapper">
<div class="newdiv"></div>
<div class="divwrapper">
<div class="newdiv2"></div>
<div class="newdiv3"></div>
<div class="newdiv4"></div>
<div class="newdiv5"></div>
</div>
</div>
<div class="newdiv6"></div>
This looks like the second image above (in my Chrome browser).
You can also reset the block formating context of the main container, so it minds inside and outside floatting elements.
here the simpliest is to add : overflow:hidden; since no size are involved
.newdiv2,
.newdiv3,
.newdiv4,
.newdiv5 {
width: 25px;
height: 25px;
margin-bottom: 5px;
border: 3px solid black;
}
.newdiv6 {
width: 150px;
height: 150px;
border: 3px solid black;
}
.newdiv {
height: 250px;
width: 450px;
float: left;
border: 3px solid black;
}
.divwrapper {
float: left;
border: 3px solid blue;
}
.mainwrapper {
display: block;
/* reset bfc */
overflow:hidden;
}
<div class="mainwrapper">
<div class="newdiv"></div>
<div class="divwrapper">
<div class="newdiv2"></div>
<div class="newdiv3"></div>
<div class="newdiv4"></div>
<div class="newdiv5"></div>
</div>
</div>
<div class="newdiv6"></div>
You need to clear the <div>. Use clear: both; on .newdiv6:
.newdiv2,
.newdiv3,
.newdiv4,
.newdiv5 {
width: 25px;
height: 25px;
margin-bottom: 5px;
border: 3px solid black;
}
.newdiv6 {
width: 150px;
height: 150px;
border: 3px solid black;
clear: both;
}
.newdiv {
height: 250px;
width: 450px;
float: left;
border: 3px solid black;
}
.divwrapper {
float: left;
border: 3px solid blue;
}
.mainwrapper {
display: block;
}
<div class="mainwrapper">
<div class="newdiv"></div>
<div class="divwrapper">
<div class="newdiv2"></div>
<div class="newdiv3"></div>
<div class="newdiv4"></div>
<div class="newdiv5"></div>
</div>
</div>
<div class="newdiv6"></div>
Also use px after the numbers, else it won't work.
Preview
Have a structure:
<div id="div1">
<div id="div2"></div>
</div>
<div id="div3"></div>
How can I make div3 floating left to div2, and then make a left shift on div2?
Try This:
#div1 {
float: left;
width: 200px;
height: 30px;
border: 5px solid #ccc;
margin: 5px;
padding: 2px;
text-align: center;
}
#div2 {
float: right;
width: 80px;
text-align: center;
border: 5px solid #000;
}
#div3 {
float: left;
width: 200px;
height: 30px;
border: 5px solid red;
margin: 5px;
padding: 2px;
text-align: center;
}
<div id="div1">
div 1
<div id="div2">div 2</div>
</div>
<div id="div3">div 3</div>
Here is jsfiddle : https://jsfiddle.net/nmsptskp/
Use display:inline-block on all 3 div & float:right on div2
#div1 {
border: 1px solid #f00;
height: 20px;
width: 100px;
display:inline-block;
}
#div2 {
float: right;
border: 1px solid #0f0;
height: 20px;
width: 50px;
display:inline-block;
}
#div3 {
border: 1px solid #00f;
height: 20px;
width: 50px;
display:inline-block;
}
<div id="div1">
<div id="div2"></div>
</div>
<div id="div3"></div>
My answer is using flexbox css
.container{
display: flex;
}
#div1{
flex-grow: 1;
border:5px solid #ccc;
text-align:center;
display: flex;
justify-content: space-between;
flex-direction: col;
}
#div2{
width: 50%;
text-align:center;
border:5px solid #000;
self-
}
#div3{
flex-grow: 1;
border:5px solid red;
text-align:center;
}
<div class="container">
<div id="div1">
div 1
<div id="div2"> div 2</div>
</div>
<div id="div3"> div 3</div>
</div>
Use float left and right
<style>
#div1{width:300px;height:50px;background:green;margin:10px;float:left;}
#div2{width:100px;height:50px;background:red;float:right;opacity:0.7}
#div3{width:100px;height:50px;background:yellow;margin:10px;float:left;}
</style>
<div id="div1">
<div id="div2"></div>
</div>
<div id="div3"></div>
I write this code: jsfiddle.net/4ror198u/1/
That zombi class is ok and when my mouse goes over it it show me that pink box, but why when my mouse is over blue i canno't see the green class ?
Can you help me where im wrong and what i need to do to fix this problem, also to suggest some examples why this thing hapening and how to prevent it in feature.
Thanx in advance! :)
You have misplaced the class green with class shell so I rearranged that and I placed some attributes to the .green class in order the difference to be obvious.The blue box works exactly as the effect that you have for the zombieone.
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
color: yellow;
margin: 0;
padding: 0;
}
.zombitwo {
height: 200px;
width: 200px;
background: pink;
border-radius: 10px;
text-align: center;
line-height: 200px;
display: none;
}
.zombione:hover + .zombitwo {
display: block;
}
.black{
//border: 5px solid red;
background-color: black;
width: 300px;
height: 300px;
}
.blue{
width: 300px;
height: 300px;
background-color: blue;
//border: 5px solid blue;
}
.green{
height: 300px;
width: 300px;
background-color: green;
color:red;
//border: 5px solid green;
display: none;
text-align:center;
}
.blue:hover + .green{
display: block;
}
</style>
<div class="zombione">test</div>
<div class="zombitwo">work</div>
<div class="wrapper">
<div class="shell">
<div class="black">
<div class="blue">
<div class="shell">
</div>
</div>
<div class="green">
<div class="shell">
<div class="sblack"></div>
<div class="sred"></div>
<div class="sgreen">It works fine!!</div>
</div>
</div>
</div>
</div>
</div>