I have a div containing two label elements. Each label should be on a side of the div. As labels are inline elements, I have tried with display: block and also with display: inline-block for margins to take effect, but the result is not the expected one.
div {
color: #ffffff;
background-color: #3f3f3f;
}
label:nth-of-type(1) {
margin-left: 5px;
}
label:nth-of-type(2) {
display: block;
<!-- display: inline-block; -->
margin-right: 5px;
margin-left: auto;
}
<div>
<label>Left side label</label>
<label>right side label</label>
</div>
As you can see with the code execution, the second label is not respecting the margins and is being displayed underneath the first one.
The label must have a width and display:block to work with margin auto.
Today it's more flexibel to use flexbox for this.
div {
color: #ffffff;
background-color: #3f3f3f;
display:flex;
flex-flow: row nowrap;
justify-content: space-between;
}
label:nth-of-type(1) {
margin-left: 5px;
}
label:nth-of-type(2) {
margin-right: 5px;
}
<html>
<body>
<div>
<label>Left side label</label>
<label>right side label</label>
</div>
</body>
</html>
With more modern methods like CSS Grid or Flexbox, this can be accomplished. But my solution will be with raw CSS to keep at a similar level to OP's code.
Both labels will need to have display: inline-block applied to get both elements to be treated like block elements and remain on the same line. You'll also need to set a width to give them a container to work with when adjusting the text placement. For this example, we'll do width: 50%.
Note: inline-block elements that take up a full width: 100% will result in the labels being on separate lines unless you modify the html to remove the whitespace in between the elements. Read more why on this behavior here and a personal CodeSandbox of fixing this.
You'll notice I also removed margin-left and margin-right from the width calculation and instead used padding to result in the same spacing on the left and right.
HTML:
<body>
<div>
<!-- Remove whitespace between labels to not exceed width: 100% -->
<label>Left side label</label><label>right side label</label>
</div>
</body>
CSS:
div {
color: #ffffff;
background-color: #3f3f3f;
padding: 0 5px;
}
label {
display: inline-block;
width: 50%;
}
label:nth-of-type(1) {
text-align: left; /* Not necessary, but you can explicitly set the behavior you want. */
}
label:nth-of-type(2) {
text-align: right;
}
Codepen
you don't need to specify the display property, just let it be inline and play around with the float property to float them.
<style>
div {
color: #ffffff;
background-color: #3f3f3f;
display: block;
height: 20px;
width: 100%;
}
label:nth-of-type(1) {
margin-left: 5px;
float: left;
}
label:nth-of-type(2) {
float: right;
margin-right: 5px;
}
</style>
<html>
<body>
<div>
<label>Left side label</label>
<label>right side label</label>
</div>
</body>
</html>
Related
I'm trying to align a textbox inside a <div> - using the class .textbox
CSS Code
.sec1 {
padding-left: 20px;
padding-right: 20px;
display: relative;
}
.textbox {
display: absolute;
top: 10px;
background-color: white;
border-radius: 10px;
}
.subcars {
display: inline-flex;
}
.selectcar {
width: 80%;
}
HTML Code
<div class="subcars">
<div class="sec1">
<button class="bot"><img class="selectcar" src="Images/caradd2.png" alt="selectcar"></button>
<br><input name="cars1" class="textbox"></input>
</div>
</div>
The results so far is (I'm using pesticide to clarify the elements):
As it is possible to see, the text box is not centered inside the <div>, how can I fix it?
As #m4n0 mentioned in the comments, relative and absolute are not invalid values for display attribute. So, you don't need them in your code.
And to center the textbox, you can add margin-left property with a value accordingly under .textbox css.
I know both the left and right margins will work for display: inline and display-inline: block. But please clarify if top margin and text-align works for any of these. If yes, why?
Browsers treat inline elements differently when it comes to margins and padding. While you can add left and right margins/padding, you can not add them to the top or bottom of the element. This is because inline elements flow with the content on a page, the same way as a link or text. If you were able to set top/bottom margin/padding in inline elements, it would disrupt the flow of content.
As for text-align, this works on both inline-block, and inline elements. I have added a quick code example below showing text-align: center; on both display: inline; and display: inline-block; elements. This example also shows the top and bottom margins working for inline-block, and not working for inline.
.inline-block {
display: inline-block;
margin-top: 30px;
margin-bottom: 10px;
}
.inline {
display: inline;
margin-top: 30px;
margin-bottom: 10px;
}
/* Start demo styles (not required) */
* {
box-sizing: border-box;
}
html,body {
margin:0;
background: #95a5a6;
}
.container {
width:50%;
margin: 50px auto;
background: white;
padding: 10px 20px;
text-align: center;
font-family: arial;
font-size: 16px;
}
hr {
border: none;
height: 2px;
width: 100%;
background: black;
display: block;
}
/* End demo styles */
<div class="container">
<div class="inline-block">
Inline-Block Content
</div>
<hr>
<div class="inline">
Inline Content
</div>
</div>
This is my code but I want the text to only have background color behind it, and not stretch across the entire screen? Any ideas?
.section_title {
background-color: orange;
text-align: center;
margin: 0px auto;
}
HTML is
<div class="col-md-12">
<div class="section_title">
<h2>Choose a Pack to Print</h2>
</div>
</div>
An option is adding display: inline-block; to the CSS of the text element.
One problem I found with display: inline-block; is it clears floats incorrectly. Instead, I use width: fit-content;
.highlight {
background: yellow;
padding: 0.5em;
width: fit-content;
}
<h1 class="highlight">Highlight for text only!</h1>
<h1 class="highlight">Highlight me too!</h1>
There's a few ways to do this, but probably the best way is to make the h2 inline or inline-block.
Using inline-block will allow you to set width/height.
.section-title {
text-align: center;
}
.section-title h2 {
display: inline-block;
}
The other way to do this is to set a width on the h2 and set the margin to auto;
.section-title h2 {
margin-left: auto;
margin-right: auto;
width: 50%; /* for example */
}
If you want all your headings to be a set width, I'd choose the second one (allowing for text to wrap). If you want the box to be flexible and hug the contents, I'd use the first.
I have a "container" div to which I gave margin:auto;.
It worked fine as long as I gave it a specific width, but now I changed it to inline-block and margin:auto; stopped working
Old code (works)
#container {
border: 1px solid black;
height: 200px;
width: 200px;
}
.MtopBig {
margin-top: 75px;
}
.center {
margin-left: auto;
margin-right: auto;
text-align: center;
}
<div class="center MtopBig" id="container"></div>
New code (doesn't work)
#container {
border: 1px solid black;
display: inline-block;
padding: 50px;
}
.MtopBig {
margin: 75px auto;
position: relative;
}
.center {
text-align: center;
}
<div class="center MtopBig" id="container"></div>
DEMO fiddle.
It is no longer centered because it now flows on the page in the same way inline elements do (very similarly to img elements). You will have to text-align: center the containing element to center the inline-block div.
#container {
border: 1px solid black;
display: inline-block;
padding: 50px;
}
.MtopBig {
margin: 75px auto;
position: relative;
}
.center {
text-align: center;
}
<div class="center">
<div class="MtopBig" id="container"></div>
</div>
What 'auto' means:
Using auto for the horizontal margin will instruct the element to fill up the available space (source: http://www.hongkiat.com/blog/css-margin-auto/).
Why 'display: inline-block' does not center:
There is no available horizontal space in an inline setting. Before and after it are other inline elements (characters) that take up their own space. Therefore, the element will act as if the horizontal margin is set to zero.
Why 'display: block' centers:
When used as an element with display: block set to it, the available horizontal space will be the full width of the parent element minus the width of the element itself. This makes sense because display: block is reserving this horizontal space (thus making it 'available'). Note that elements with display: block cannot be placed next to each other. The only exception occurs when you use float, but in that case you also get the (expected) zero-margin-behaviour, as this disables the horizontal 'availability'.
Solution for 'inline-block' elements:
Elements with display: inline-block should be approached as characters. Centering characters/text can be done by adding text-align: center to their parent (but you probably knew that already...).
For elements with property display: inline-block;
A computed value of 'auto' for 'margin-left' or 'margin-right' becomes a used value of '0'. [reference: CSS2§10.3.9]
margin-left:50%;
transform: translateX(-50%);
.container{
border:solid 1px red;
}
.container img{
display:inline-block;
margin-left:50%;
transform: translateX(-50%);
}
<div class="container">
<img src="https://placekitten.com/100/300" />
</div>
<!DOCTYPE html>
<html>
<head>
<title>Width issue</title>
<style type="text/css">
body {
margin: 0;
}
#left {
width: 50%;
background: lightblue;
display: inline-block;
}
#right {
width: 50%;
background: orange;
display: inline-block;
}
</style>
</head>
<body>
<div id="left">Left</div>
<div id="right">Right</div>
</body>
</html>
JSFiddle: http://jsfiddle.net/5EcPK/
The above code is trying to place the #left div and the #right div, side by side, in a single row. But as you can see in the above JSFiddle URL, this is not the case.
I am able to resolve the issue reducing the width of one of the divs to 49%. See http://jsfiddle.net/mUKSC/ . But this is not an ideal solution because a small gap appears between the two divs.
Another way I am able to solve the problem is by floating both the divs. See http://jsfiddle.net/VptQm/ . This works fine.
But my original question remains. Why when both the divs are kept as inline-block elements, they do not fit side by side?
Update: as it's 2021, use flexbox or even better - CSS grid layout instead of inline-block.
When using inline-block elements, there will always be an whitespace issue between those elements (that space is about ~ 4px wide).
So, your two divs, which both have 50% width, plus that whitespace(~ 4px) is more than 100% in width, and so it breaks. Example of your problem:
body{
margin: 0; /* removing the default body margin */
}
div{
display: inline-block;
width: 50%;
}
.left{
background-color: aqua;
}
.right{
background-color: gold;
}
<div class="left">foo</div>
<div class="right">bar</div>
There is a few ways to fix that:
1. No space between those elements
body{
margin: 0; /* removing the default body margin */
}
div{
display: inline-block;
width: 50%;
}
.left{
background-color: aqua;
}
.right{
background-color: gold;
}
<div class="left">foo</div><div class="right">bar</div>
2. Using HTML comments
body{
margin: 0; /* removing the default body margin */
}
div{
display: inline-block;
width: 50%;
}
.left{
background-color: aqua;
}
.right{
background-color: gold;
}
<div class="left">foo</div><!--
--><div class="right">bar</div>
3. Set the parents font-size to 0, and then adding some value to inline-block elements
body{
margin: 0; /* removing the default body margin */
}
.parent{
font-size: 0; /* parent value */
}
.parent > div{
display: inline-block;
width: 50%;
font-size: 16px; /* some value */
}
.left{
background-color: aqua;
}
.right{
background-color: gold;
}
<div class="parent">
<div class="left">foo</div>
<div class="right">bar</div>
</div>
4. Using a negative margin between them (not preferable)
body{
margin: 0; /* removing the default body margin */
}
div{
display: inline-block;
width: 50%;
margin-right: -4px; /* negative margin */
}
.left{
background-color: aqua;
}
.right{
background-color: gold;
}
<div class="left">foo</div>
<div class="right">bar</div>
5. Dropping closing angle
body{
margin: 0; /* removing the default body margin */
}
div{
display: inline-block;
width: 50%;
}
.left{
background-color: aqua;
}
.right{
background-color: gold;
}
<div class="left">foo</div
><div class="right">bar</div>
<hr>
<div class="left">foo</div><div class="right">
bar</div>
6. Skipping certain HTML closing tags (thanks #thirtydot for the reference)
body{
margin: 0; /* removing the default body margin */
}
ul{
margin: 0; /* removing the default ul margin */
padding: 0; /* removing the default ul padding */
}
li{
display: inline-block;
width: 50%;
}
.left{
background-color: aqua;
}
.right{
background-color: gold;
}
<ul>
<li class="left">foo
<li class="right">bar
</ul>
References:
Fighting the Space Between Inline Block Elements on CSS Tricks
Remove Whitespace Between Inline-Block Elements by David Walsh
How to remove the space between inline-block elements?
As #MarcosPérezGude said, the best way is to use rem, and add some default value to font-size on the html tag (like in HTML5Boilerplate). Example:
html{
font-size: 1em;
}
.ib-parent{ /* ib -> inline-block */
font-size: 0;
}
.ib-child{
display: inline-block;
font-size: 1rem;
}
good answer in css3 is:
white-space: nowrap;
in parent node, and :
white-space: normal;
vertical-align: top;
in div (or other) at 50%
exemple : http://jsfiddle.net/YpTMh/19/
EDIT:
there is another way with :
font-size: 0;
for parent node and override it in child node
EDIT 2021 : personaly, I recommand use flexbox now : https://the-echoplex.net/flexyboxes/
It's because the whitespace between your two divs is being interpreted as a space. If you put your <div> tags in line as shown below the problem is corrected:
<div id="left"></div><div id="right"></div>
Because there is a space between the elements. If you remove all whitespace, they will fit.
<div id="left">Left</div><div id="right">Right</div>
Either make them block instead of inline-block. This will render divs ignoring spaces between them.
display:block;
or remove space between tags
<div id='left'></div><div id='right'></div>
or add
margin: -1en;
to one of the divs in order to mitigate space taken by single space rendered.
Please check below code:
body {
margin: 0;
}
#left {
width: 50%;
background: lightblue;
display: inline-block;
float:left;
}
#right {
width: 50%;
background: orange;
display: inline-block;
float:left;
}
<div id="left">Left</div>
<div id="right">Right</div>
It can be done by adding the css display:inline to the div that holds the inline elements.
While removing the white space using margin with a negative value it becomes necessary to add it to this particular element. As adding it to a class will affect places where this class has been used.
So it would be safer to use display:inline;
Flexbox example - this would be used for the parent class holding the two side by side elements.
.parentclass {
display: flex;
justify-content: center;
align-items: center;
}
Taken from Vertically centering a div inside another div
add float: left; to both div tags.
div {
float: left;
}