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>
Related
How to make the box size to be evenly as perfect square and make the words inside of it to shrink. I want to make it square and the inside word to shrink to small size based on the square, but they just flexing because of the contents.
This is my code, what should I change/remove/add?
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.mainbox {
background: grey;
display: flex;
margin: 5px;
}
.mainbox div {
flex: 1;
border: 2px solid black;
}
#row {
display: flex;
flex-direction: row;
}
#column {
display: flex;
}
<!DOCTYPE html>
<html>
<head>
<title>FlexSpiral</title>
</head>
<body>
<div class="mainbox">
<div>box 1</div>
<div>
box 2
<div id="row">
<div id="column">
<div id="row">
<div>box 5</div>
<div>
<div>box 6</div>
<div id="row">
<div>
<div id="row">
<div>box 9</div>
<div>box 10</div>
</div>
<div>box 8</div>
</div>
<div>box 7</div>
</div>
</div>
</div>
<div>box 4</div>
</div>
<div>box 3</div>
</div>
</div>
</div>
</body>
</html>
I didn't quite understand the question, but here goes
You can take the margin from the ".mainbox" that it is giving margin on all sides of the mainbox class.
To leave the div box occupying its own content you can use in the styling: display:inline-block
Note: a good practice is to use class instead of id to identify the styling, and id more for future interaction when using script and interactions.
This question already has answers here:
What does the ">" (greater-than sign) CSS selector mean?
(8 answers)
Closed 7 months ago.
I want to override all the child css with parent css
Below is the code which I am trying to use
.wrapper > * {
font-family: arial !important;
font-size: 13px !important;
}
<div class="wrapper">
<div>Text 00
<div>Text 1</div>
<span>Text 2</span>
<div>
<div style="font-family: Helvetica; font-size: 18px;">Text 3</div>
<div>Text 4</div>
</div>
<div>Text 5</div>
</div>
<div>Text 6</div>
</div>
Actual result:
Expected result:
Your selector was slightly wrong, remove the > so it just reads .wrapper * this will get all children of the wrapper. Where as .wrapper > * will only get elements one layer deep
/* ALL CHILDREN */
.wrapper * {
color: green;
font-family: arial !important;
font-size: 13px !important;
}
/* FIRST LAYER OF CHILDREN */
.wrapper > * { color: red }
<div class="wrapper">
<div>Text 00
<div>Text 1</div>
<span>Text 2</span>
<div>
<div style="font-family: Helvetica; font-size: 18px;">Text 3</div>
<div>Text 4</div>
</div>
<div>Text 5</div>
</div>
<div>Text 6</div>
</div>
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; }
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>
now I have such code, use bootstrap 2
<div class="row-fluid">
<div class="span4">Some text 1</div>
<div class="span4">Some text 2</div>
<div class="span4">Some text 3</div>
</div>
<div class="row-fluid">
<div class="span4">Some text 4</div>
<div class="span4">Some text 5</div>
<div class="span4">Some text 6</div>
</div>
Can I get 3 rows in 2 columns each without code change?
3 columns and 2 rows I use for desktop, and need 2 columns and 3 rows in mobile devices
I have found it
http://jsfiddle.net/gkZKq/
You could do:
.row-fluid { display: inline-block; width: 50%; float: left; }
.row-fluid [class*="span"] { float: none; margin-left: 0; }
http://jsfiddle.net/thespacebean/mDVfd/