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;
}
Related
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;
}
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>
I know it is dumb question, but i am struggling with following problem
It is one of my menu buttons. I want div the represents icon (marked red with circle) be on the left side of the button and the text on the right (name (blue) above description (purple)). By the way, i am going to have plenty of those buttons and i want them appear in column (block).
My current problem is that icon div (red) and text div (green dashed) wont place inline.
My HTML is:
<style>
.HomeMenuNavbarButton {
text-decoration: none;
color : black;
border-style:outset;
border-width:4px;
border-radius:15px;
display:block;
padding:4px;
}
.circle {
width: 50px;
height: 50px;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
border-color: black;
border-style: dashed;
display: inline-block;
vertical-align: top;
}
</style>
<div class="container">
<div class="row">
#foreach (var node in Model.Nodes)
{
if (!(node.IsRootNode) && node.Children.Any())
{
<div class="col-md-4">
<button type="button" style="display:inline;" class="btn btn-info" data-toggle="collapse" data-target="#("#relatedNavList" + node.Title) ">#node.Title</button>
<div id="#("relatedNavList" + node.Title)" class="collapse">
#foreach (var child in node.Children)
{
<div class="HomeMenuNavbarButton" style="display:block;">
<div style="background-color:red;display:inline">
<div class="circle">
</div>
</div>
<div style="border-color: green; border-style: dashed; display:inline-block">
<div style="background-color:blue">#(child.Title)</div>
<div style="background-color:purple">#(child.Description)</div>
</div>
</div>
}
</div>
</div>
}
}
</div>
</div>
When you want to display stuff side by side in CSS, the easiest way is to use flexbox. Try to add display : flex; to your HomeMenuNavBar class.
Here is a complete document about flexbox from the Mozilla team.
Using a wrapper defined as a flexbox
.wrapper {
display: flex;
align-items: center;
justify-content: space-between;
width: 150px;
}
.circle {
height: 25px;
width: 25px;
border: medium dashed darkgray;
border-radius: 50%;
}
button {
background: dodgerblue;
color: white;
border-radius: 3px;
border: thin solid lightblue;
padding: 0.5em;
}
<div class="wrapper">
<button>Button</button>
<div class="circle"></div>
<span>Text</span>
</div>
You can do that just with display:inline-block on your button's elements
.elementButton
{
display:inline-block;
}
.circle {
width: 50px;
height: 50px;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
border-color: black;
border-style: dashed;
display: inline-block;
vertical-align: top;
}
.HomeMenuNavbarButton
{
display:block;
margin:5px;
}
<div class="HomeMenuNavbarButton">
<div class="circle elementButton">
</div>
<div class="elementButton">
<div>Title one</div>
<div>Content</div>
</div>
</div>
<div class="HomeMenuNavbarButton">
<div class="circle elementButton">
</div>
<div class="elementButton">
<div >Title two</div>
<div>Content</div>
</div>
</div>
Problem 1: I'm trying to get my div boxes to have the same width regardless from text length I use (I will use max 2 digits), but I can't get it to work.
Problem 2: The target platform is mobile and when the linewraping occurs the "boxes" positions right under the text from the text on the line above (the borders crosses each other).
The reson for using div "groups" is that a javascript is going to change the value of 4 boxes at a time.
<!DOCTYPE html>
<html>
<head>
<style>
.wrap {
white-space: normal !important;
}
.online {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 2px solid #00CC00;
width: 20px;
text-align: center;
padding: 2px;
display: inline;
}
.test {
display: inline;
}
</style>
</head>
<body>
<div id="A1-result" class="test">
<div class="online">0</div>
<div class="online">1</div>
<div class="online">2</div>
<div class="online">3</div>
</div>
<div id="A2-result" class="test">
<div class="online">4</div>
<div class="online">5</div>
<div class="online">6</div>
<div class="online">7</div>
</div>
<div id="A3-result" class="test">
<div class="online">8</div>
<div class="online">9</div>
<div class="online">10</div>
<div class="online">11</div>
</div>
<div id="A4-result" class="test">
<div class="online">12</div>
<div class="online">13</div>
<div class="online">14</div>
<div class="online">15</div>
</div>
</body>
</html>
Change display:inline property to display:inline-block. Read more about the difference between inline and inline-block.
.online {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 2px solid #00CC00;
width: 20px;
text-align: center;
padding: 2px;
display: inline-block;
}
.test {
display: inline-block;
}
DEMO
I have a layouting problem while using this html/css coding.
Actually I want the symbols to be vertically aligned to the center of the div.
The second layout is displaying fine with float value set to left on child divs.
Whats wrong with the first layout. Any ideas?
Here is the code
<html>
<head>
<style type="text/css">
div, p {
margin:0;
padding:0;
}
div.wrapper {
background: #FFFFFF;
border-radius: 3px;
padding: 20px;
}
/* LAYOUT 1 STYLE */
div.list1 div {
display: inline-block;
}
div.thumb1 {
border:#3C6BBC 2px solid;
border-radius: 2px;
width: 120px;
height: 120px;
}
div.symbol1 {
font-size: 25px;
width: 20px;
height: 70px;
margin: 2px;
text-align: center;
padding-top:50px;
}
/* LAYOUT 2 STYLE */
div.list2 {
overflow: hidden;
}
div.list2 div {
float: left;
}
div.thumb2 {
border:#3C6BBC 2px solid;
border-radius: 2px;
width: 120px;
height: 120px;
}
div.symbol2 {
font-size: 25px;
width: 20px;
height: 70px;
margin: 2px;
text-align: center;
padding-top:50px;
}
</style>
</head>
<body>
<div class="wrapper" id="layout1">
<h1>MAIN HEADING</h1>
<h2>Sub Heading</h2>
<div class="list1">
<div class="thumb1"></div>
<div class="symbol1"><p>+</p></div>
<div class="thumb1"></div>
<div class="symbol1"><p>+</p></div>
<div class="thumb1"></div>
<div class="symbol1"><p>=</p></div>
<div class="thumb1"></div>
</div>
</div>
<div class="wrapper" id="layout2">
<h1>MAIN HEADING</h1>
<h2>Sub Heading</h2>
<div class="list2">
<div class="thumb2"></div>
<div class="symbol2"><p>+</p></div>
<div class="thumb2"></div>
<div class="symbol2"><p>+</p></div>
<div class="thumb2"></div>
<div class="symbol2"><p>=</p></div>
<div class="thumb2"></div>
</div>
</div>
</body>
</html>
Just give vertical-align:middle to your to mentioned below class
div.list1 div {
display: inline-block;
vertical-align: middle;
}
Demo