In the bellow code the blue block has a green overline that should be the same width as the text and not overflow. Similar to the pink blocks notice how the green border is the same width as the text.
I've tried using display: inline as well with no luck. Is there maybe some hack to get this to work properly?
Fiddle: https://jsfiddle.net/xq10dnb9/
CSS:
html {
font-size: 50px;
}
.blue {
background-color: #a9f4f4;
}
.blocks {
background-color: pink;
width: 700px;
display:flex;
justify-content: space-between;
}
.block {
padding: 5px;
white-space: normal;
}
.block span {
position: relative;
display:inline-block;
/* display:inline; */
}
.block span:before {
content: '';
height: 4px;
background-color: green;
width: 100%;
position: absolute;
left: 0;
top: 0;
}
HTML:
<div class="blocks">
<div class="block"><span>1 Test</span></div>
<div class="block blue"><span>Test123 Test</span></div>
<div class="block"><span>Testi</span></div>
<div class="block"><span>T asd</span></div>
<div class="block"><span>Testing 5</span></div>
</div>
Add width: min-content in:
.block span{
position: relative;
display: inline-block;
border: 1px solid black;
width: min-content;
}
.block {
padding: 5px;
white-space: normal;
}
When you are using padding,you might want to specify where you want to add padding to like padding-top, padding-bottom, padding-right or padding-left. If you just type padding it will just add space to all side.
So, change it to
.block {
padding-top: 5px;
white-space: normal;
}
Is should solve the issue.
And you add this to your code
*{
padding: 0;
margin: 0;
}
Related
This question already has answers here:
Setting a <button>'s display as table-cell
(6 answers)
Closed 4 years ago.
I'm trying to group an input and a button. Basically the button need to be on the same row as input with no space between them
Because I need to support IE9, I'm using display: table.
.container{
border: 1px red solid;
width: 35rem;
}
.input-group {
border-collapse: separate;
display: table;
position: relative;
}
.input {
position: relative;
z-index: 2;
float: left;
width: 100%;
font-size: .875rem;
line-height: 1.5;
margin: 0 ;
display: table-cell;
}
.button {
color: #fff;
background-color: #0b0b0b;
border: 0;
padding: .375rem .75rem;
text-align: center;
}
<div class="container">
<div class="input-group">
<input class="input">
<button class="button">Get Data</button>
</div>
</div>
I don't know why width:100% is there on the input. It will take whole width of parent space. I have removed it and its working.!
See the Snippet below:
.container{
border: 1px red solid;
width: 35rem;
}
.input-group {
border-collapse: separate;
display: table;
position: relative;
width:100%;
}
.input-group>div {
display: table-cell;
}
.input-group>div:first-child {
width: 100%;
}
.input {
position: relative;
z-index: 2;
width: 100%;
font-size: .875rem;
line-height: 1.5;
}
.button {
color: #fff;
background-color: #0b0b0b;
border: 0;
padding: .375rem .75rem;
text-align: center;
white-space: nowrap;
}
<div class="container">
<div class="input-group">
<div><input class="input"></div>
<div><button class="button">Get Data Dummy Text</button></div>
</div>
</div>
Update 1:
You can use calc to calculate the width of input text. Can I use?
Update 2:
To make it possible without button width, you might want to wrap both input and button in the div. And apply display:table-cell to both div.
You can test it here (as per the #LGSon's answer)
Try this, I added a position: absolute to button, let me know if that help!
.button {
color: #fff;
background-color: #0b0b0b;
border: 0;
padding: .375rem .75rem;
text-align: center;
position: absolute; /*Added*/
width: 100px; /*Added*/
height: 27px; /*Added*/
}
You can check it here
I got a problem with h1 and p element inside a couple of inline-blocked divs.
Here's the code:
#map-canvas {
width: 69%;
height: 1000px;
display: inline-block;
}
#filter-manager{
display: inline-block;
width: 30%;
height: 1000px;
background-color: #000000;
margin: 0;
padding: 0;
}
#filter-manager h1{
font-size: 20px;
text-transform: uppercase;
color: #fff;
margin: 0;
padding: 0;
display: block;
}
<div id="filter-manager">
<h1>Filtri</h1>
</div><!-- #filter-manager -->
<div id="map-canvas"></div><!-- #map-canvas -->
The divs keep their inline status but #filter-manager goes on the bottom when I put a h1 or p element. If I don't put anything inside the divs are aligned perfectly.
Why h1 and p elements do behave like that?
In this case you have 2 solutions. First is to add this:
#filter-manager {
float: left;
}
Second is to make h1 table :
#filter-manager h1 {
display: table;
}
You should add vertical-align:top in the div with display:inline-block; Also , you dont need display:block in h1 because is by default in h1,h2,h3 etc..
#map-canvas {
width: 69%;
height: 100px;
display: inline-block;
background-color:red;
vertical-align:top
}
#filter-manager{
display: inline-block;
width: 30%;
height: 100px;
background-color: #000000;
margin: 0;
padding: 0;
vertical-align:top
}
#filter-manager h1{
font-size: 20px;
text-transform: uppercase;
color: #fff;
margin: 0;
padding: 0;
display:block
}
<div id="filter-manager">
<h1>Filtri</h1>
</div><!-- #filter-manager -->
<div id="map-canvas"></div><!-- #map-canvas -->
Try changing the display of the h1 in the css file.
If that does not work try and check the width:30% and margin:0 parameters your problem is definitely in there.
I am using display: table-cell so that I can easily do height:100% the child elements inside to get 100% height.
The problem is that when I have multiple elements inside or padding or margins, the parent does not stretch and instead the contents poke through. Putting a overflow: hidden will not work as I need the children to fit inside the parent properly.
Mark up:
<div class="container">
<div class="subcontainer">
<h4>title</h4>
<div class="menu">
<p>test</p>
<p>test</p>
</div>
<div class="content">
<p>content</p>
<p>content</p>
</div>
</div>
</div>
CSS:
p{
padding:0;
margin:0;
}
html{
height: 100%;
overflow-y: scroll;
background: white;
}
body{
height: 100%;
margin: 0;
padding: 0;
background: red;
}
.container{
height: 100%;
display: table;
margin: 0;
padding: 0;
}
.subcontainer{
display: table-cell !important;
height: 100%;
}
h4{
padding: 0;
padding-bottom: 5px;
background: blue;
margin: 0;
border-bottom: 1px solid black;
margin-bottom: 5px;
}
.menu, .content{
background: green;
height: 100%;
display: inline-block;
float:left;
width: 200px;
padding: 20px;
}
.content{
background: purple;
width: 400px;
}
Fiddle: http://jsfiddle.net/ZQFrM/
The poking through is due to increased height inside caused by the following:
The existence of the h4 on top of the other elements.
Padding and margin on h4.
Padding on menu and content.
What can be done to resolve this problem? I definitely want to use the display: table-cell as I need the children to be able to stretch vertically to fill the parent.
you have to remove the float:left and display:inline-block from '.menu, .content' also you have to apply a display:table-cell. So both div can be align horizontally.
Here is the Code http://jsfiddle.net/kheema/ZBLY7/7/
Here is the CSS..
p{
padding:0;
padding:0;
}
body{
margin: 0;
padding: 0;
background: red;
}
.container{
height: 100%;
display: table;
margin: 0;
padding: 0;
}
.subcontainer{
display: table-cell !important;
height: 100%;
}
h4{
padding: 0;
padding-bottom: 5px;
}
.menu, .content{
background: green;
height: 100%;
/*display: inline-block;
float:left;*/
display: table-cell;
width: 200px;
}
.content{
background: purple;
width: 400px;
}
In my HTML I'm trying to align a Title next to the title's Bullet, so that the first line of the title always is next to the bullet, and the second line (if any) doesn't change the title's position - it just trails to the next line.
JSFiddle:
http://jsfiddle.net/Ebqq8/
HML:
<div class="bullet-container">
<div class="bullet-title-container">
<div class="circle-container">
<div class="circle"></div>
</div>
<p class="bullet-title">Short Title</p>
</div>
<div class="bullet-details-container">
<p>Body Text</p>
</div>
</div>
CSS:
.circle-container {
height: 34px;
display: inline-block;
position: relative;
width: 14px;
border: 1px solid blue;
}
.circle {
border-radius: 50% !important;
width: 12px;
height: 12px;
background-color: red;
display: inline-block;
position: absolute;
top: 0px;
/* width and height can be anything, as long as they're equal */
}
.bullet-title {
display: inline-block;
font-size: 16px;
font-weight: bold;
margin-left: 10px;
min-height: 34px;
width: 200px;
margin: 0px;
}
.bullet-title-container {
color: black;
display: inline-block;
position: relative;
width: 250px;
}
.bullet-details-container {
color: black;
}
.bullet-container {
max-width: 600px;
float: left;
text-align: left;
}
What's happening now is that the first line is always too low, and if there are multiple lines, the whole title gets pushed up too high. I thought that aligning two inline-block elements would do the trick, but it doesn't seem to be working. What am I doing wrong?
You could try adding:
position: absolute;
top: 0;
to .bullet-title { }
http://jsfiddle.net/Ebqq8/2/
I have been trying to make a line join two words.
Sentence 1 would be on the left and no 2 on the right.everything should be on the same line.
I want the line to be flexible and adjust its width when the browser is re sized, and have so far failed miserably to do this.
It would be similar to this :
see jsFiddle
<h1>Heading</h1>
<h1>This is a longer heading</h1>
CSS
h1 {
overflow: hidden;
text-align: center;
}
h1:before,
h1:after {
background-color: #000;
content: "";
display: inline-block;
height: 1px;
position: relative;
vertical-align: middle;
width: 50%;
}
h1:before {
right: 0.5em;
margin-left: -50%;
}
h1:after {
left: 0.5em;
margin-right: -50%;
}
but with only one line joining the words.
Is this what you're after?
Live demo
HTML:
<div class="header">
<div class="headerPart1">Heading</div>
<div class="headerPart2">This is a longer heading</div>
</div>
CSS:
.header {
overflow: hidden;
text-align: center;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
vertical-align: middle;
}
.headerPart1, .headerPart2 {
display: inline-block;
clear: none;
}
I guess this is what you are looking for: Is this http://jsfiddle.net/gSsGy/1/
I've added a width: 50% to the h1 element and then floated it to left.
Demo : LINK
just add:
.header {
overflow: hidden;
text-align: center;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
vertical-align: middle;
}
h1{
display: inline-block;
clear: none;
}
and this div before h1:
<div class="headercontent">