I just can't realize why first child has white space right after parent's "border". What is my mistake?
.content {
font-size: 22px;
}
.content__row {
height: 150px;
}
.content__column_half {
width: 49%;
height: 100%;
display: inline-block;
box-sizing: border-box;
padding-top: 30px;
padding-bottom: 30px;
border-bottom: 1px dotted #000000;
background-color: graytext;
}
https://jsfiddle.net/x8ant22n/
Add this to .content__column_half:
display: block;
float: left;
margin: 0 .5%;
And remove: display: inline-block.
Fiddle: https://jsfiddle.net/x8ant22n/2/
Flex Alternative:
Add display: flex to .content__row and add flex-grow: 1 to .content__column_half`.
Remove display: inline-block
Fiddle: https://jsfiddle.net/x8ant22n/3/
Related
I have some html content with following structure:
<div class="message-container">
<p class="message-value">someVal</p>
<div class="message-attribute">someUsername</div>
<div class="message-attribute">11-09-2017 12:30</div>
</div>
So, I want to scale my message-container up when it gets long values in message.value and scale it down as far as possible to min-width in the other way.
I also wan't to specify max-width for this props.
I've done this:
.message-container {
resize: both;
margin: 10px;
padding-left: 10px;
padding-right: 10px;
padding-top: 2px;
color: #ffffff;
border-radius: 20px;
min-width: 100px;
max-width: 400px;
width: auto;
height: auto;
background-color: #80CBC4;
}
.message-value {
resize: both;
float: left;
max-width: 380px;
word-wrap: break-word;
height: auto;
}
.message-attribute {
padding-left: 50px;
width: 150px;
display: block;
color: #607D8B;
}
and message-username and message-datetime has fixed width.
Finally, I'm alsways getting max-width in my message-container even when it has free space to cut it down
https://jsfiddle.net/Lwrpegqe/
As you can see in jsfiddle width is too long with following content it could be shorter
Main purpose to resize block automatically
See the solution.
.message-container {
resize: both;
margin: 10px;
padding-left: 10px;
padding-right: 10px;
padding-top: 2px;
color: #ffffff;
border-radius: 20px;
min-width: 100px;
max-width: 400px;
width: auto;
height: auto;
background-color: #80CBC4;
}
.message-value {
resize: both;
float: left;
max-width: 380px;
word-wrap: break-word;
height: auto;
display: inline;
}
.message-attribute {
padding-left: 50px;
width: 150px;
display: inline;
color: #607D8B;
}
https://jsfiddle.net/Lwrpegqe/2/
Add display: inline-block; to your .message-container
Inline elements only take up the space of the content. A div is always a block element unless specified.
Give width and height in percentage (%).
Hope it will work for you.
.your-class {
width:100%;
height:100%;
}
just use w-100 in bootstrap 4 to fit to 100% width of container element
I have the following HTML/CSS code:
p {
background: lightgray;
}
p#h {
height: 1em;
}
span {
display: inline-block;
margin-left: .5em;
height: 1em;
width: 1em;
background: red;
}
<p>Ay<span></span></p>
<p id="h">Ay<span></span></p>
image
https://jsfiddle.net/e82gzayt/2/
How to get the inline-block having the same height as its parent?
or
How to get the font to be centered vertically with the span block?
You should add that text inside span to be inline. Also, in second case you are restricting the height of p element to be 1 em.
p {
background: lightgray;
}
p#h {
height: 1em;
}
span {
display: inline-block;
margin-left: .5em;
height: 1em;
width: 1em;
}
<p><span>Ay</span></p>
<p id="h"><span>Ay</span></p>
Check the first element. It is aligned fine now.
Fiddle - https://jsfiddle.net/e82gzayt/3/
EDIT: Removing the height and width restriction of span the text fits well inside the p block.
Demo : https://jsfiddle.net/e82gzayt/4/
You could do this with display: table-cell; and vertical-align: middle; and then wrap the two <p> tags in a <div> like this:
p#h { height: 2em; }
span {
display: inline-block;
margin-left: .5em;
height: 1em;
width: 1em;
background: red;
}
.vertical-center {
text-align: center;
display: table-cell;
vertical-align: middle;
height: 2em;
background-color: #dddddd;
width: 400px;
}
<div class="vertical-center">
<p>Ay<span></span></p>
<p id="h">Ay<span></span></p>
</div>
You can use flex value to center vertically. Advanced css class.
Try this
p { display:flex;align-items:center;background: lightgray; height: 2em;}
p#h { display:flex;align-items:center;height: 1em; }
span { display: inline-block; margin-left: .5em; height: 1em; width: 1em; background: red; }
<p>Ay<span></span></p>
<p id="h">Ay<span></span></p>
Or you can try with flex box
p { background: lightgray;
display:flex;
align-items: center;
}
p#h { height: 1em; }
span { display: inline-block; margin-left: .5em; height: 1em; width: 1em; background: red; }
https://jsfiddle.net/e82gzayt/5/
I am having trouble creating line items with the following requirements:
Line items contain: top/left aligned icon, title, and optional subtitle
Text should be vertical align middle
Width of the container is dynamic
Here is a Fiddle:
http://jsfiddle.net/6ug3314b/
Problem:
I cannot figure out how to get this CSS to work without hard coding the width of something. See the JS Fiddle link above.
I can't figure out how to get the ".licontent" div from wrapping to the next line without knowing the width of the container.
Here is the CSS so far:
.lineItems {
list-style: none;
padding: 0;
}
.lineItems > li {
border: 1px solid #eaeaea;
}
.lineItems .title {
margin: 0;
}
.lineItems .licontent {
display: inline-block;
vertical-align: middle;
padding-left: 10px;
}
.lineItems .icon {
display: inline-block;
vertical-align: middle;
width: 50px;
height: 50px;
border: 1px solid red;
}
.lineItems .icon:after {
content: 'ICON';
}
Straight forward, if I understood correctly. You just need to add a % based width that works and a #media inquiry to reduce the % as needed since the image isn't also percentage based.
JSFIDDLE
.lineItems .licontent {
display: inline-block;
vertical-align: middle;
padding-left: 10px;
width:85%;
word-break: break-word;
}
#media screen and (max-width: 550px) {
.lineItems .licontent {width:73%}
}
Sounds like CSS table and table-cell could be a great solution. It supports both unknown width and vertical-align.
And use table-layout: fixed; + word-wrap: break-word; for wrapping long lines.
DEMO: http://jsfiddle.net/pn5pja7e/
.lineItems {
list-style: none;
padding: 0;
}
.lineItems > li {
display: table;
width: 100%;
table-layout: fixed; /*NEW*/
word-wrap: break-word; /*NEW*/
}
.lineItems .licontent {
display: table-cell;
vertical-align: middle;
padding-left: 10px;
/* word-break: break-all; */
border: 1px solid blue;
}
.lineItems .title {
margin: 0;
}
.lineItems .icon {
display: table-cell;
vertical-align: middle;
width: 50px;
height: 50px;
border: 1px solid red;
}
.lineItems .icon:after {
content: 'ICON';
}
My code # JSFiddle
code that is needed
for linking JSFiddle
links
I don't understand why I need
this.
An image of the two divs, their the gray boxes.
How can I make these two divs the same height? I don't want to do the padding-bottom: px; and margin-bottom: -px; It seems really like cheating and just rigged.
You can use display:table and display:table-cell:
#who-is {
width: auto;
display: table;
}
#left {
width: 40%;
padding: 5%;
text-align: center;
background: #CCC;
display: table-cell;
}
#left h1 {
font-size: 72px;
text-transform: uppercase;
}
#right {
width: 40%;
padding: 5%;
background: #eee;
display: table-cell;
}
#right p {
font-size: 16px;
}
fiddle
I need to center the text vertically in the block, there may be many. The size of each block fixed 111px/63px.
.producers {
width: 100%;
}
.producer {
width: 111px;
height: 63px;
margin: 20px 0 0 0;
display: inline-block;
vertical-align: middle;
border: 1px dashed #ccc;
text-align: center;
}
.producer img {
display: block;
margin-top: 8px;
}
The code can be seen by reference
jsfiddle demo
change add line-height property to the producers class
with height equal to your producer class height property
.producers{
width : 100%;
line-height:63px;
}