Below, how can I add vertical whitespace where it says "increase spacing". line-height would affect the entire right box, but I want addidional whitespace only when a line inside right runs over and breaks.
See http://jsfiddle.net/dhT8E/
<div class="box">
<div class="item">
<div class="left">Left Text 1</div>
<div class="right">Right Text 1</div>
</div>
<div class="item">
<div class="left">Left Text 2</div>
<div class="right">
<div class="horizontal">Stacked Box 1</div>
<div class="horizontal">Stacked Box 2</div>
<div class="horizontal">Stacked Box 3</div>
</div>
</div>
<div class="item">
<div class="left">Left Text 3</div>
<div class="right">Right Text 2</div>
</div>
</div>
.box {width:350px; height:150px; border:solid}
.item {padding-bottom:8px;}
.left {position:absolute;}
.right {padding-left:100px; padding-after:20px;}
.horizontal {display: inline-block; padding-right: 20px}
line-height is what you need.
.box {
line-height: 26px; /* adjust to your needs */
}
True,
line-height would affect the entire right box
... but to fix that up - just remove / change the bottom padding on your items.
FIDDLE
If I understand correctly, you're looking for some sort of conditional line-height? When a box contains more than two lines the line-height of those lines should be increased, but all single-line texts should remain unchanged?
I think you should approach the problem from another angle. A possible solution is to increase the default line height, affecting all text, and then correcting the single lines with a negative margin or reduced padding.
For example, if you want a line-height of 20px for single lines, and a line-height of 30px for multiple lines, set the line-height on 30px and a negative margin (or reduced padding) of 10px on the box itself.
<p>Single line</p>
<p>Multiple lines with<br />increased spacing</p>
<p>Single line</p>
<p>Single line</p>
p {
font-size: 16px;
line-height: 30px;
margin: -5px 0;
padding: 0;
}
Working example # http://jsfiddle.net/xw3af/
My proposed answer is to apply padding-bottom on .left, .right and .horizontal but UNDO the padding-bottom on those .right and .left that contain a .horizontal. I use .nodrop to do this. Empty .left and .right can be managed with a min-height.
http://jsfiddle.net/dhT8E/
HTML:
<div class="box">
<div class="item">
<div class="left">Left Text 1</div>
<div class="right">Right Text 1</div>
</div>
<div class="item">
<div class="left">Left Text 2</div>
<div class="right nodrop">
<div class="horizontal">Stacked Box 1</div>
<div class="horizontal">Stacked Box 2</div>
<div class="horizontal">Stacked Box 3</div>
</div>
</div>
<div class="item">
<div class="left">Left Text 3</div>
<div class="right">Right Text 2</div>
</div>
</div>
CSS:
.box {width:350px; height:150px; border:solid}
.left {position:absolute;}
.right{padding-left:100px; padding-after:20px;}
.left, .right { padding-bottom: 8px; }
.horizontal{display: inline-block; padding-right: 20px; padding-bottom: 8px; }
.item .nodrop { padding-bottom: 2px; }
Related
I'm using Angular Flex to align cards in a row. The cards should wrap into a new line if there are several of them. The relevant settings of the block are
fxLayout="row wrap" fxLayoutGap="40px grid"
fxLayoutGap uses paddings on the inner elements and a negative margin on the container so that the gap is also applied when the inner elements wrap to a new row. So I do not want to remove the grid setting (or the paddings or negative margins in the
In addition, the cards are grouped into blocks with a header and a line on the left. I've created a sample that mirrors the settings that Angular Flex applies. The image is taken from this sample:
As you can see, there is redundant space at the bottom of each group. I want the block and the line on the left to end where the last row of cards (of the block) ends:
You can find the sample on jsfiddle.
How can I adjust the CSS and/or the Angular Flex settings to remove the redundant space and make the line end at the last row of cards while preserving the space between the blocks?
remove the padding-bottom from the last two elements:
#outer {
border-left: 2px solid red;
padding-left: 0px;
padding-bottom: 40px;
}
#outer:not(:first-child) {
margin-top: 40px;
}
#header {
padding: 10px;
margin: 0px 0px 40px 0px;
background-color: red;
}
#container {
margin: 40px -40px -40px 40px;
display: flex;
flex-flow: row wrap;
box-sizing: border-box;
}
#inner {
padding: 0px 40px 40px 0px;
flex: 0 0 50%;
box-sizing: border-box;
max-width: 50%;
min-width: 50%;
}
/* added */
#inner:last-child,
#inner:nth-last-child(2):nth-child(odd){
padding-bottom:0;
}
/**/
#card {
background-color: green;
}
<div id="outer">
<div id="header">
HEADER
</div>
<div id="container">
<div id="inner">
<div id="card">
CARD
</div>
</div>
<div id="inner">
<div id="card">
CARD
</div>
</div>
<div id="inner">
<div id="card">
CARD
</div>
</div>
<div id="inner">
<div id="card">
CARD
</div>
</div>
</div>
</div>
<div id="outer">
<div id="header">
HEADER
</div>
<div id="container">
<div id="inner">
<div id="card">
CARD
</div>
</div>
<div id="inner">
<div id="card">
CARD
</div>
</div>
</div>
</div>
<div id="outer">
<div id="header">
HEADER
</div>
<div id="container">
<div id="inner">
<div id="card">
CARD
</div>
</div>
</div>
</div>
<div id="outer">
<div id="header">
HEADER
</div>
<div id="container">
<div id="inner">
<div id="card">
CARD
</div>
</div>
<div id="inner">
<div id="card">
CARD
</div>
</div>
<div id="inner">
<div id="card">
CARD
</div>
</div>
</div>
</div>
I want to generate a question paper on a quiz site. In this question paper an option can be a small text or large group of HTML elements. What I want is that if the content of the option DIV is larger than the remaining width of the container then it should display as block else it should display as inline-block.
Here is my code:
.parent{
width: 400px
}
.option {
display: inline-block;
width: 50%;
word-break: break-all;
}
.alphabet{
font-weight: bold;
}
<div class="parent">
<div><b>16. This is a sample question?</b></div>
<div>This is sample question description.</div>
<div class="option"><span class="alphabet">a</span>. Option 1</div>
<div class="option"><span class="alphabet">b</span>. VERY LONNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNG OPTION</div>
<div class="option"><span class="alphabet">c</span>. Option 3</div>
<div class="option"><span class="alphabet">d</span>. sdsds</div>
</div>
Expected Output:
Here is a flexbox solution:
.parent{
width: 400px;
display:flex;
flex-wrap:wrap;
}
.option {
min-width:50%;
word-break: break-all;
}
.alphabet{
font-weight: bold;
}
<div class="parent">
<div><b>16. This is a sample question?</b></div>
<div>This is sample question description.</div>
<div class="option"><span class="alphabet">a</span>. Option 1</div>
<div class="option"><span class="alphabet">b</span>. VERY LONNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNG OPTION</div>
<div class="option"><span class="alphabet">c</span>. Option 3</div>
<div class="option"><span class="alphabet">d</span>. sdsds</div>
<div class="option"><span class="alphabet">c</span>. Option 3</div>
<div class="option"><span class="alphabet">b</span>. VERY LONNNNNNNNNNNNNNNNNNG</div>
<div class="option"><span class="alphabet">d</span>. sdsds</div>
</div>
You could use JavaScript to get all the options:
var options = document.getElementsByClassName("option");
and then go through them with a for loop, option by option,
compare their option.innerHTML (content) length
to the width of the parent object.
If the content is longer than its container, you can use
option.style["display"] = "block";
to change the display attribute.
Forget how to code a div style table.
I haven't coded html in years and am pretty rusty. I'm trying to create a responsive div style table with the first div spans the entire column with 2 more divs next to it. A div with 2 cells on top and a div that spans the 2 cells on bottom.
I'm trying to create something that looks like this image.
<div class="table">
<div class="row">
<div class="cell">cell 1</div>
</div>
<div class="row">
<div class="cell">cell 1</div>
<div class="cell">cell 2</div>
</div>
<div class="row">
<div class="cell colspan">
<div><div>
cell 3
</div></div>
</div>
<div class="cell"></div>
</div>
Use flexbox. By assigning display: flex; to the .table, .row, and .column elements, child elements of each all become flexible and can easily be controlled to take up certain percentages of space within the table, and grow to fill all the available space like a table would.
The flex property takes a little getting used to. Here I used it to tell flex items to grow (the first value, flex-grow), and starting widths (the third value, flex-basis). This resource makes it pretty easy to understand: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
* { box-sizing: border-box; }
.table,
.row,
.column {
display: flex;
}
.column {
flex: 1 0 50%;
flex-direction: column;
}
.first-column {
flex-basis: 33%;
}
.cell {
flex: 1 0 100%;
padding: 20px;
border: 1px solid dodgerblue;
}
.first-row .cell {
border-left: none;
}
.second-row .cell {
border-top: none;
border-left: none;
}
<div class="table">
<div class="column first-column">
<!-- just the one cell in this column -->
<div class="cell">cell 1</div>
</div>
<div class="column">
<!-- need 2 rows here -->
<div class="row first-row">
<!-- first row will have 2 columns -->
<div class="column">
<div class="cell">cell 2</div>
</div>
<div class="column">
<div class="cell">cell 3</div>
</div>
</div>
<div class="row second-row">
<div class="cell">cell 4</div>
</div>
</div>
</div>
I am using HTML 5 and CSS 3.
Here is my html code:
<div style="float:left; width:100px; height:150px;">Column 1</div>
<div style="float:left; width:100px;">Column 2</div>
<div style="float:left; width:100px;">Column 3</div>
I am trying to position the second and third div at bottom irrespective of the height of first div. Whatever may be the height of first div but the second and third div should be at bottom like following.
Test
Test
Test Test Test
I tried position absolute inside divs but not working. I need to achieve this using div not table. Any help would be appreciated. Thanks.
You don't need to use tables to take advantage of table-layouts:
You'll probably need to wrap the divs in another div to act like a table-row. These columns will grow so they are each as tall as the tallest:
html
<div class='table-row'>
<div>Column 1<br>with<br>more<br>text</div>
<div>Column 2</div>
<div>Column 3</div>
</div>
css
.table-row{
display:table-row;
}
.table-row > div{
display:table-cell
;width:100px;
vertical-align:bottom;
}
demo here: http://jsfiddle.net/mhfaust/CV33q/
update
Acutally, you don't need the .table-row wrapper at all.
You could remove it in the above code, and change the selector from .table-row > div to jsust div and it will still work (though with other markup on the page that wouldn't be the best way to do it -- you'd want a classname on the div like .table-cell and use that selector instead.)
Working example http://jsfiddle.net/cYbW7/
<div style="background: yellow; float: left; display: block; position: relative;">
<div style="width:100px;display: inline-block; height:150px; background: red;">Column 1</div>
<div style="width:100px;display: inline-block; vertical-align: bottom;background: blue;">Column 2</div>
<div style="width:100px;display: inline-block; vertical-align: bottom; background: green;">Column 3</div>
</div>
try setting bottom:0 to both div:
<div style="float:left; width:100px; height:150px;">Column 1</div>
<div style=" bottom:0px; width:100px;">Column 2</div>
<div style=" bottom:0px; width:100px;">Column 3</div>
Here is demo
or if you just want to see in next line try this:
<div style="float:left; width:100px; height:100px;">Column 1</div>
<div style=" display:block; width:100px;">Column 2</div>
<div style=" display:block; width:100px;">Column 3</div>
I have a div with variable length lines of text in it. Right now I have something like
<div id="container" style="width: 500px">
<div>Text Line 1</div>
<div>Text Line 2 of different length</div>
<div>Text Line 3</div>
</div>
I can text-align: center the container, but I want each line to be left justified relative to the longest line which is truly centered, as opposed to each line being centered on its own.
Is there an easy CSS way to do this... or should I resort to using tables to lay this out?
Your html:
<div id="container">
<span>
<div>Text Line 1</div>
<div>Text Line 2 of different length</div>
<div>Text Line 3</div>
</span>
</div>
Your CSS:
#container {
width: 500px;
background: #eee;
text-align: center;
padding: 10px 0;
}
#container span {
display: inline-block;
background-color: #ccc;
}
#container span div {
text-align: left;
}
Demo: http://jsfiddle.net/G6ABA/
That should work:
<div id="container" style="width: 500px; text-align:center;">
<div style="text-align:left;">
<div>Text Line 1</div>
<div>Text Line 2 of different length</div>
<div>Text Line 3</div>
</div>
</div>
use
<span> </span>
and css
width:500px;
text-align:center;
position:absolute;
do you set pic or color to div background?
or better i said is it your div width important?
if not maybe this solution can solve your problem:
<div id="someID" style="width: auto; text-align:left;">
<div>line 1</div>
<div>line 2 is more longer</div>
<div>line 3</div>
</div>