This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Why my inline-block divs are not aligned when only one of them has text? [duplicate]
(4 answers)
Closed 1 year ago.
I am trying to keep these two divs on the same line. But whenever I add a P element inside the first Div, it moves to the new line. I have tried assigning display property to "inline-block" to each element, but it doesn't work. Can you please help, I have the following code:
.tile {
height: 100px;
width: 100px;
background-color: rgb(250, 250, 156);
border: 5px solid red;
display: inline-block;
vertical-align:top
}
p {
display: inline;
margin:0;
}
<div class="tile">
<p>Hello</p>
</div>
<div class="tile"></div>
you can use display flex
<html>
<head>
<title>Experiment</title>
</head>
<style>
.container {
display: flex
}
.tile{
height:100px;
width:100px;
background-color: rgb(250, 250, 156);
border:5px solid red;
}
</style>
<body>
<div class="container">
<div class="tile"><p>Hello</p></div>
<div class="tile"></div>
</div>
</body>
</html>
Related
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Why is this inline-block element pushed downward?
(8 answers)
Closed 1 year ago.
<style>
#main {
width: 110px;
height: 110px;
}
#main div {
width:50px;
height: 50px;
border: 1px solid black;
display: inline-block;
}
</style>
<div id='main'>
<div>x</div>
<div>x</div>
<div>x</div>
<div></div>
</div>
I have a grid of divs set up just a like a checker board. The divs are either empty, or have a single unicode character inside of them.
When a character is removed from or added to the div, the spacing around the div is affected. (see snippet)
How can I stop this behavior? I would like for the content inside of the div to not affect the positioning or spacing around the div.
you can fix your code by adding vertical-align:top to your inner 4 divs
Don't use the display:inline-block, try with display:flex on the outer div.
Basic concepts of flexbox
This issue occurs because of the way that vertical-align is calculated. When no vertical-align is set, the default is baseline. However, when there is no text, baseline is calculated differently. See this answer.
Using FlexBox, as suggested by most of the other answers would obviously avoid this issue.
If you want to avoid FlexBox, probably the best option is to just set vertical-align explicitly, as suggested in DCR's answer.
Another method would be to wrap the inner text in a <span> and add position: absolute. This way, all the boxes effectively have the same size content, and the discrepancy is resolved. Here's an example:
<style>
#main {
width: 110px;
height: 110px;
}
#main div {
position:relative;
width:50px;
height: 50px;
border: 1px solid black;
display: inline-block;
}
#main div span {
position: absolute
}
</style>
<div id='main'>
<div><span>x</span></div>
<div><span>x</span></div>
<div><span>x</span></div>
<div><span></span></div>
</div>
Like Nicola Revelant said in their answer, you can use something like flexbox to make this work. Here's an example:
<style>
#main {
width: 110px;
height: 110px;
display: flex;
}
#main div {
display: flex;
flex-direction: column;
}
#main div div {
width: 50px;
height: 50px;
border: solid 1px black;
}
</style>
<div id='main'>
<div class="row1">
<div>x</div>
<div>x</div>
</div>
<div class="row2">
<div></div>
<div></div>
</div>
</div>
This question already has answers here:
Can I combine :nth-child() or :nth-of-type() with an arbitrary selector?
(8 answers)
Closed 2 years ago.
I want to add background color to odd elements which has .row class in the wrapper element. But another div comes after each .row element so when I add nth-child(odd) selector, background color of all .row elements changes. How can I add with only css?
.wrapper {
border: 1px solid #ccc;
padding: 20px;
}
.row {
padding: 10px;
border-radius: 3px;
}
.description {
margin-bottom: 20px;
padding: 10px;
}
.row:nth-child(odd) {
background: red;
}
<div class="wrapper">
<div class="row">Row-1</div>
<div class="description">Description-1</div>
<div class="row">Row-2</div>
<div class="description">Description-2</div>
<div class="row">Row-3</div>
<div class="description">Description-3</div>
<div class="row">Row-4</div>
<div class="description">Description-4</div>
<div class="row">Row-5</div>
<div class="description">Description-5</div>
</div>
JsBin Example
In this case, if you know perfectly there will be another coming in, out of the even elements, you need to find the even ones. You need to use :nth-child() in a different way:
.row:nth-child(4n + 1) {}
This will select the even items of the even elements.
.wrapper {
border: 1px solid #ccc;
padding: 20px;
}
.row {
padding: 10px;
border-radius: 3px;
}
.description {
margin-bottom: 20px;
padding: 10px;
}
.row:nth-child(4n + 1) {
background: red;
}
<div class="wrapper">
<div class="row">Row-1</div>
<div class="description">Description-1</div>
<div class="row">Row-2</div>
<div class="description">Description-2</div>
<div class="row">Row-3</div>
<div class="description">Description-3</div>
<div class="row">Row-4</div>
<div class="description">Description-4</div>
<div class="row">Row-5</div>
<div class="description">Description-5</div>
</div>
Preview
The way you have your markup setup, you would need to target every 4th div element within .wrapper:
.row:nth-child(4n+1) {
background: red;
}
Keep in mind that this is not flexible, so if you add divs it will disrupt your desired effect of odd numbered .row divs.
This question already has answers here:
What are the default margins for the html heading tags (<h1>, <h2>, <h3>, etc.)?
(4 answers)
What is the default padding and/or margin for a p element (reset css)?
(5 answers)
Closed 2 years ago.
I'm currently trying to figure out how to align the top of text for two div boxes. The wrapper div is one box and within that I have two other div boxes inside that are beside one another. I want the top of the header text to align with the top of the paragraph text (photo attached). The code below is what I have right now, and the image attached is what I'm wanting. I've tried 'vertical-align:top' but it's not working. Any ideas?
What I want
.wrapper {
display: inline-flex;
width: 100%;
}
#box1, #box2 {
vertical-align: top;
}
#box1 {
background: #00FFFF;
width: 35%;
text-align: right;
}
#box2 {
background: #FF00FF;
width: 65%;
}
<div class="wrapper">
<div id="box1">
<h1>Header</h1>
</div>
<div id="box2">
<p>Paragraph goes here</p>
</div>
</div>
just remove the margin on h1
.wrapper {
display: inline-flex;
width: 100%;
}
#box1, #box2 {
vertical-align: top;
border:solid 1px black;
}
#box1 {
background: #00FFFF;
width: 35%;
text-align: right;
}
#box2 {
background: #FF00FF;
width: 65%;
}
h1{margin:0;}
<div class="wrapper">
<div id="box1">
<h1>Header</h1>
</div>
<div id="box2">
<p>Paragraph goes here</p>
</div>
</div>
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 4 years ago.
I have a parent element (div) with a fixed width of 1200px. There are no borders or padding on this element.
I have three inline child elements (divs) with fixed widths of 400px. Again, no borders, padding or margins.
I want my three child elements to sit on the same line but instead the third one gets pushed down. If I reduce their widths to 397px they all sit on the same line.
Why can't I divide the width of a parent container exactly by the number of children I want to sit abreast within that container? Much the same way that I can't define those child elements as percentage widths that add up to 100% (ie four children of all 25% width)?
This happens due to the extra spacing cause by the white space in the code itself. You can fix it by either writing the markup in a way that makes sure there are no white space or you can set the parent div's font-size to 0 so no white space is visible (make sure you then set the children div font's size back to normal)
In this example I've used the first method as it is cleaner
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
<div class="parent">
<div class="child"></div><div class="child"></div><div class="child"></div>
</div>
style
.parent {
width: 1200px;
background-color: #333;
margin: 20px 0; /* outer margin doesn't matter */
}
.parent .child {
width: 400px;
height: 300px;
display: inline-block;
background-color: #ccc;
}
The first box doesn't work, the second does as I've left no space between the closing and opening tags of the child elements
http://jsbin.com/cifedis/edit?output
You need to use float:left to your children in order to achieve this
.parent {
width: 1200px;
height: 200px;
background: pink;
}
.child {
float: left;
width: 400px;
display: inline-block;
background: red;
}
<div class="parent">
<div class="child">Child1</div>
<div class="child">Child2</div>
<div class="child">Child3</div>
</div>
You can add css like this=>
.parent_container{
width:1200px;
float:left;
}
.child1,
.child2,
.child3{
float:left;
width:400px;
display: inline-block;
}
inline-block elements (which I'm guessing you are using), by default, have a white space after them, which might cause the issue you are seeing.
There are a number of ways to remove this in the html itself, one of them being adding a comment between the two inline-block elements. I prefer this approach, as its more readable.
.parent {
width: 600px;
height: 50px;
background: grey;
}
.child {
display: inline-block;
width: 200px;
height: 50px;
background: pink;
}
<div class="parent">
<div class="child">1</div><!--
--><div class="child">2</div><!--
--><div class="child">3</div>
</div>
You can also start the divs in the same line, like below, forgoing the comment
<div>content</div><div>
content</div
There is lots of solution I prefer flexbox
.parent {
display: flex;
}
.child {
flex:1 1 400px;
background-color:red;
max-width: 400px;
height: 400px;
}
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>
If you really want to use with inline-block either make font-size:0; to the parent or do not change the line while creating children element
.parent{
width:1200px;
}
.child {
background-color:red;
width: 400px;
height: 400px;
display: inline-block;
}
<div class="parent">
<!-- Do Not change line of children-->
<div class="child">1</div><div class="child">2</div><div class="child">3</div>
</div>
please read details https://css-tricks.com/fighting-the-space-between-inline-block-elements/
Just Give Parent Div Font Size 0px Below is the Code,
You Can Also do the same by float Left But This is the Best Way :)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pratice</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>
.contaniner {
width:1200px;
font-size: 0px;
}
.threelock {
background: #000;
width: 400px;
height: 400px;
display: inline-block;
}
.yllow {
background: yellow;
}
.red {
background: red;
}
</style>
<body>
<div class="contaniner">
<div class="threelock"></div>
<div class="threelock red"></div>
<div class="threelock yllow"></div>
</div>
</body>
</html>
This question already has answers here:
Align two inline-block div with content
(2 answers)
Closed 7 years ago.
Desired result: The two divs with class inline should be on the same horizontal level (the second one contains two other divs with some content).
However, as can be seen below, the two divs are not aligned vertically. If I remove the content (the word "text") from both the .inside divs, they line up as expected.
How can I make them line up? What is causing this?
.inline,
.inside {
margin: 0;
padding: 0;
width: 100px;
height: 100px;
}
.inline {
display: inline-block;
background-color: chartreuse;
}
.inside {
height: 48px;
background-color: salmon;
border: solid 1px black;
}
<div class="inline">
</div>
<div class="inline">
<div class="inside">text</div>
<div class="inside">text</div>
</div>
<hr>
<div>Without content (i.e. the word "text"):<div>
<div class="inline">
</div>
<div class="inline">
<div class="inside"></div>
<div class="inside"></div>
</div>
.inline {
vertical-align: top;
}
Thanks everybody.