This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Closed 1 year ago.
The webpage has two divs (Box1 and Box2), and Box2 contains two nested divs, Box2-1 and Box2-2.
I expect Box1 and Box2 to align side-by-side, but Box1 moves downwards and aligns with the sub-div at the bottom, Box2-2.
Please teach me why this occurs and how to fix this. Any help would be much appreciated.
#box1{
width: 200px;
height: 845px;
}
#box1, #box2{
border: 1px solid black;
display: inline-block;
margin: 0px 20px;
}
#box2-1, #box2-2{
height : 400px;
width: 200px;
border : 1px solid black;
box-sizing: border-box;
margin: 15px;
display: block
}
<!DOCTYPE html>
<html>
<head>
<title</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div id="box1">
<p>Box1</p>
</div>
<div id="box2">
<div class="box2" id="box2-1">
<p>Box2</p>
</div>
<div class="box2" id="box2-2">
<p>Box3</p>
</div>
</div>
</body>
</html>
add vertical-align:top; on #box1, #box2
#box1, #box2{
border: 1px solid black;
display: inline-block;
margin: 0px 20px;
vertical-align:top;
}
#box1{
width: 200px;
height: 845px;
}
#box1, #box2{
border: 1px solid black;
display: inline-block;
margin: 0px 20px;
vertical-align:top;
}
#box2-1, #box2-2{
height : 400px;
width: 200px;
border : 1px solid black;
box-sizing: border-box;
margin: 15px;
display: block
}
<!DOCTYPE html>
<html>
<head>
<title</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div id="box1">
<p>Box1</p>
</div>
<div id="box2">
<div class="box2" id="box2-1">
<p>Box2</p>
</div>
<div class="box2" id="box2-2">
<p>Box3</p>
</div>
</div>
</body>
</html>
I think this is what you want;
#main-div {
display: flex;
justify-content: space-evenly;
}
#box1 {
border: 1px solid black;
}
#box2 {
border: 1px solid black;
}
<!DOCTYPE html>
<html>
<head>
<title</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div id="main-div">
<div id="box1">
<p>Box1</p>
</div>
<div id="box2">
<div class="box2" id="box2-1">
<p>Box2</p>
</div>
<div class="box2" id="box2-2">
<p>Box3</p>
</div>
</div>
</div>
</body>
</html>
Please comment if you need explanation on this.
You can use css flexbox to easily achieve this.
Wrap box1 and box2 in a div with class of wrapper and in your css set the display property to flex;
You can read more about css flexbox here, it is used for arranging boxes in a html page.
.wrapper {
display: flex;
}
#box1{
width: 200px;
height: 845px;
}
#box1, #box2{
border: 1px solid black;
display: inline-block;
margin: 0px 20px;
}
#box2-1, #box2-2{
height : 400px;
width: 200px;
border : 1px solid black;
box-sizing: border-box;
margin: 15px;
display: block;
}
<!DOCTYPE html>
<html>
<head>
<title</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="wrapper">
<div id="box1">
<p>Box1</p>
</div>
<div id="box2">
<div class="box2" id="box2-1">
<p>Box2</p>
</div>
<div class="box2" id="box2-2">
<p>Box3</p>
</div>
</div>
</div>
</body>
</html>
It's because you have block level elements inside inline elements. You can read about it here.
One way around this would be to use
position: relative;
float: left;
instead of display: inline-block for divs box1 and box2.
Try it out:
#box1 {
width: 200px;
height: 845px;
}
#box1, #box2 {
position: relative;
float: left;
border: 1px solid black;
margin: 0px 20px;
}
#box2-1, #box2-2 {
height : 400px;
width: 200px;
border : 1px solid black;
box-sizing: border-box;
margin: 15px;
display: block;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="box1">
<p>Box1</p>
</div>
<div id="box2">
<div class="box2" id="box2-1">
<p>Box2</p>
</div>
<div class="box2" id="box2-2">
<p>Box3</p>
</div>
</div>
</body>
</html>
While the other answers have done a brilliant job of fixing the properties and values in CSS. I think we can achieve something similar using the table tag of HTML:
<!DOCTYPE html>
<html>
<head>
<title</title>
<!-- <link href="style.css" rel="stylesheet"> -->
</head>
<body id="body">
<table>
<tr>
<td rowspan="2">Box1</td>
<td>Box2</td>
</tr>
<tr><td>Box3</td></tr>
</table>
</body>
</html>
Your current output looks like this :
Note : Your Box-1 is shifted below because your Box2-1 and Box2-2 are marked as display: block. Please refer Image-2 (below) with display: inline-block.
Image-1 :
Image-2
Updated style for box2-1 and box2-2 :
#box2-1, #box2-2{
height : 400px;
width: 200px;
border : 1px solid black;
box-sizing: border-box;
margin: 15px;
display: inline-block;
}
Related
I'm new to both HTML and CSS. As a course module I have to align the three following cat pictures as stated below. Yet, I do have trouble to get them in the proper positioning. The pictures are in line right now but the second picture has to be a little "underneath" a horizontal line.
Can someone give me a hint how to do this? Below you find the outcome I'm aiming for as well as my code.
body {
background-color: white;
}
.box-wrap {
display: flex;
}
#cat1 {
border: 3px solid blue;
position: relative;
display: inline-block;
}
#cat2 {
border: 3px solid grey;
position: relative;
display: inline-block;
}
#cat3 {
border: 3px solid orange;
position: relative;
display: inline-block;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title>Cats</title>
</head>
<body>
<div class="box wrap">
<div id="cat1"><img src="images/kitty1_150x150.jpg">
</div>
<div id="cat2"><img src="images/kitty3_150x150.jpg">
</div>
<div id="cat3"><img src="images/kitty2_150x150.jpg">
</div>
</div>
</body>
</html>
Using CSS Grid, this layout becomes straightforward and maintainable:
.grid {
display: grid;
justify-content: space-between;
}
#cat2 {
grid-row-start: 2;
grid-column-start: 2;
}
#cat3 {
grid-column-start: 3;
}
<div class="grid">
<div id="cat1">
<img src="https://placekitten.com/120/120" alt="" />
</div>
<div id="cat2">
<img src="https://placekitten.com/120/120" alt="" />
</div>
<div id="cat3">
<img src="https://placekitten.com/120/120" alt="" />
</div>
</div>
remove flex and then align and center images
body {
background-color: white;
}
#cat1 {
border: 3px solid blue;
position: relative;
display: inline-block;
}
#cat2 {
border: 3px solid grey;
position: relative;
display: inline-block;
float:right;
}
#cat3 {
border: 3px solid orange;
position: absolute;
display: inline-block;
top: 25%;
left: 45%;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title>Cats</title>
</head>
<body>
<div class="box wrap">
<div id="cat1"><img src="images/kitty1_150x150.jpg">
</div>
<div id="cat2"><img src="images/kitty3_150x150.jpg">
</div>
<div id="cat3"><img src="images/kitty2_150x150.jpg">
</div>
</div>
</body>
</html>
hi you can try below code : https://jsfiddle.net/fh86hejs/
body {
background-color: white;
}
.box-wrap {
display: flex;
justify-content:space-between;
}
#cat1 {
border: 3px solid blue;
position: relative;
display: inline-block;
}
#cat2 {
border: 3px solid grey;
position: relative;
display: inline-block;
}
#cat3 {
border: 3px solid orange;
position: relative;
display: inline-block;
}
.text-center{
text-align:center;
}
HTML code as below
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title>Cats</title>
</head>
<body>
<div class="box-wrap">
<div id="cat1"><img src="https://imaginicupisici.ro/wp-content/uploads/2016/04/Pisicuta-mica-de-tot.jpg">
</div>
<div id="cat3"><img src="https://imaginicupisici.ro/wp-content/uploads/2016/04/Pisicuta-mica-de-tot.jpg">
</div>
</div>
<div class="text-center">
<div id="cat2"><img src="https://imaginicupisici.ro/wp-content/uploads/2016/04/Pisicuta-mica-de-tot.jpg">
</div>
</div>
</body>
</html>
Add justify-content:space-between; for the box-wrap class, to add space between the the children.
Also u named the class wrongly. Change "box wrap" to "box-wrap"
For getting the second image underneath, there are multiple answers depending on what type layout u want.
I have simply put the middle image on next line and centered it by wrapping it in a div
Another way is to make the position of center image absolute.
Using this method the dom structure will not change.
body {
background-color: white;
}
.box-wrap {
display: flex;
justify-content: space-between;
}
#cat1 {
border: 3px solid blue;
position: relative;
display: inline-block;
}
#cat2 {
border: 3px solid grey;
position: relative;
display: inline-block;
}
#cat3 {
border: 3px solid orange;
position: relative;
display: inline-block;
}
.text-center {
text-align: center;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title>Cats</title>
</head>
<body>
<div class="box-wrap">
<div id="cat1"><img src="http://via.placeholder.com/150x150">
</div>
<div id="cat3"><img src="http://via.placeholder.com/150x150">
</div>
</div>
<div class="text-center">
<div id="cat2"><img src="http://via.placeholder.com/150x150">
</div>
</div>
</body>
</html>
Using Grid
*{
box-sizing:border-box;
}
body {
background-color: white;
}
.box-wrap {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 150px 150px;
}
#cat1 {
border: 3px solid blue;
}
#cat2 {
border: 3px solid grey;
grid-column-start: 2;
grid-row-start: 2;
}
#cat3 {
border: 3px solid orange;
grid-column-start: 3;
}
.text-center {
text-align: center;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title>Cats</title>
</head>
<body>
<div class="box-wrap">
<div id="cat1" class="text-center"><img src="http://via.placeholder.com/150x150">
</div>
<div id="cat2" class="text-center"><img src="http://via.placeholder.com/150x150">
</div>
<div id="cat3" class="text-center"><img src="http://via.placeholder.com/150x150">
</div>
</div>
</body>
</html>
I have 3 boxes that i am trying to line up..
.box {
width: 50px;
height: 50px;
background: #8C8C8C;
margin:0 auto;
border: solid 4px grey;
text-align: center;
display:block;
}
Display inlineblock is not working also it kills centering
HTML
<div class="box"(click)="boxnumber('1')" >
<p class="count1">{{item1count}}<p>
</div>
<br>
<div class="box" (click)="boxnumber('2')" >
<p class="count2">{{item2count}}<p>
</div>
<br>
<div class="box" (click)="boxnumber('3')" >
<p class="count3">{{item3count}}<p>
</div>
Also i am trying to display item1count,item2count,item3count numbers on right down corner of each box.count1 count2 css classes are empty now because i am not sure what to write in them.
boxes
Try adding css margin: 0px auto; to your .box to center them.
try this:
.box{
width:50px;
height: 50px;
border: 2px solid red;
margin: 15px auto;
display: table;
}
To display the number in the right corner you need to add vertical alignment, like so:
.box p{
vertical-align:bottom;
display: table-cell;
}
You can take a look at my plunkr here
Just remove br tag and replace display:block to inline-block
.box {
width: 50px;
height: 50px;
background: #8C8C8C;
margin:0 auto;
border: solid 4px grey;
text-align: center;
display:inline-block;
}
.boxes {
text-align: center;
}
<div class="boxes">
<div class="box"(click)="boxnumber('1')" >
<p class="count1">{{item1count}}<p>
</div>
<div class="box" (click)="boxnumber('2')" >
<p class="count2">{{item2count}}<p>
</div>
<div class="box" (click)="boxnumber('3')" >
<p class="count3">{{item3count}}<p>
</div>
</div>
Try this:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.box {
width: 50px;
height: 50px;
background: #8C8C8C;
float: left;
margin-right:10px;
border: solid 4px grey;
text-align: center;
}
.box-container{
width:204px; /* 50*3+(4*2)*3+10*3 */
margin:0 auto;
}
</style>
</head>
<body>
<div class="box-container">
<div class="box"(click)="boxnumber('1')" >
<p class="count1">{{item1count}}<p>
</div>
<div class="box" (click)="boxnumber('2')" >
<p class="count2">{{item2count}}<p>
</div>
<div class="box" (click)="boxnumber('3')" >
<p class="count3">{{item3count}}<p>
</div>
</div>
</body>
</html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
.bluebox {
float: left;
width: 200px;
height: 200px;
margin: 1em;
border: solid black 1px;
background-color: blue;
}
.greenbox {
float: left;
width: 200px;
height: 200px;
margin: 1em;
border: solid black 1px;
background-color: green;
}
.yellowbox {
float: left;
width: 200px;
height: 200px;
margin: 1em;
border: solid black 1px;
background-color: yellow;
}
.orangebox {
float: left;
width: 200px;
height: 800px;
margin: 1em;
border: solid black 1px;
background-color: orange;
}
p {
display: inline-block;
text-align: center;
width: 600px;
border: solid 1px red;
margin-top: -50px;
padding-left: 20px;
padding-top: 5px;
padding-bottom: 5px;
padding-right: 20px;
}
</style>
<body>
<section>
<section>
<section>
<div class="bluebox"></div>
<div class="greenbox"></div>
</section>
<section>
</section>
</section>
<div class="yellowbox"></div>
</section>
<section>
<div class="orangebox"></div>
</section>
<p>Hello World! how r <strong>u?</strong></p>
</body>
</html>
enter code here
I have started working on creating this image and hit a bump on the middle portion. I can recreate in bootstrap but am trying to go at it the old fashion way. any help would be appreciated.
Try this code. Hope you want like this.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<style>
.outerdiv{
background-color:white;
height:450px;width:450px;
display:block;
border:1px solid black;
}
.outerdiv div{position:relative;margin:3px;padding:1px;}
.blue, .green, .yellow, .black{height:100px;width:100px;display:inline-block;}
.blue{background-color:blue;}
.green{background-color:green;}
.yellow{background-color:yellow;}
.orange{background-color:orange;height:430px;width:100px;display:inline-block;vertical-align:top;float:right;}
.cyan, .green1, .green2{width:100px;}
.cyan{background-color:cyan;height:50px;}
.green1{background-color:lightgreen;height:50px;}
.green2{background-color:green;height:100px;}
.black{background-color:black;border:54px solid red;}
.inner_container1{display:inline-block;padding:0;}
.white{border:1px solid brown;height:85px;width:320px;}
</style>
</head>
<body>
<div class="outerdiv">
<div class="blue"></div>
<div class="green"></div>
<div class="yellow"></div>
<div class="orange"></div>
<div class="black"></div>
<div class="inner_container1">
<div class="cyan"></div>
<div class="green1"></div>
<div class="green2"></div>
</div>
<div class="white"></div>
</div>
</body>
</html>
I learn 960 Grid CSS Framework, and I have a HTML code and CSS below:
- HTML code:
#import url( 'css/reset.css' );
#import url( 'css/text.css' );
#import url( 'css/960.css' );
#wrapper {
width: 100%;
}
#wp_head,
#wp_foot {
background-color: #e8e8e8;
}
#header,
#footer {
border:1px dotted #333;
min-height: 100px;
}
#content {
border: 1px dotted #333;
min-height: 500px;
}
#row-1 {
}
.row-1-left{
border: 1px dotted #333;
background-color: pink;
min-height: 50px;
}
.row-1-center {
border: 1px dotted #333;
background-color: yellow;
min-height: 50px;
}
.row-1-right{
border: 1px dotted #333;
background-color: lime;
min-height: 50px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Learn 960 grid</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="wrapper">
<div id="wp_head">
<div id="header" class="container_12">Header</div>
</div>
<div id="row-1" class="container_12 clearfix">
<div class="row-1-left grid_4">Left - 4</div>
<div class="row-1-center grid_4">Center - 4</div>
<div class="row-1-right grid_4">Right - 4</div>
</div>
<div id="wp_foot">
<div id="footer" class="container_12">Footer</div>
</div>
</div>
</body>
</html>
And then, show result below (See image attachment):
Question: I want remove margin-left and margin-right. Please help me!
You can do that with:
body {margin: 0;}
Here is a fiddle: https://jsfiddle.net/cpu5syg1/
I have been trying out display inline-block, everything worked out great if I didn't add anything into the divs but when I do the div collapsed and I don't know exactly why.
Any idea?
https://jsfiddle.net/giancorzo/ebqoptbd/
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>8 cajas</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="caja"></div>
<div class="caja-grande">
<div class="caja inline-block">
<span>Hola mundo</span>
</div>
<div class="caja inline-block">
</div>
<div class="caja inline-block">
CSS: </div>
</div>
<div class="caja inline-block"></div>
<div class="caja inline-block"></div>
<div class="caja"></div>
</body>
</html>
CSS:
.caja{
background-color: gray;
width: 100px;
height: 100px;
border: 1px solid black;
margin: 5px;
}
.inline-block{
display: inline-block;
}
.caja-grande{
background-color: gray;
border: 1px solid black;
padding: 5px;
width: 350px;
margin: 5px;
}
The issue is due to default vertical alignment of inline elements – baseline, the text inside element affects it and pushes div to the bottom. Use vertical-align: top, for example, to suppress this behavior.
JSFiddle
display:inline-block creates a small gap, so add font-size:0 to parent. plus add vertical-align:top since by default inline-block is baseline
with all of this you have fixed your issue.
here is the snippet:
.caja {
background-color: gray;
width: 100px;
height: 100px;
border: 1px solid black;
margin: 5px;
}
.caja-grande {
background-color: gray;
border: 1px solid black;
padding: 5px;
width: 350px;
margin: 5px;
font-size: 0
}
.inline-block {
display: inline-block;
vertical-align: top;
font-size: 16px;
}
<div class="caja"></div>
<div class="caja-grande">
<div class="caja inline-block">
<span>Hola mundo</span>
</div>
<div class="caja inline-block">
</div>
<div class="caja inline-block">
</div>
</div>
<div class="caja inline-block"></div>
<div class="caja inline-block"></div>
<div class="caja"></div>
you can find more info (and options on how to solve this in other ways) in this article Fighting the Space Between Inline Block Elements
Use overflow: hidden at .inline-block to make this work.
.inline-block{
display: inline-block;
overflow: hidden;
}