How to seamlessly align block divs of different sizes?
The simplest way I can think of using pure CSS would be to designate columns.
I surrounded each "column" with a div, and floated those divs left.
Here's an updated fiddle: http://jsfiddle.net/Renson/P4S8z/4/
This should keep the margins equal like you wanted
New HTML
<div class="container">
<div class="subcontainer">
<div class="box" style="height:225px;">
<h3>Blah blah</h3>
</div>
<div class="box" style="height:180px;">
<h3>Blah blah</h3>
</div>
</div>
<div class="subcontainer">
<div class="box" style="height:160px;">
<h3>Blah blah</h3>
</div>
<div class="box" style="height:200px;">
<h3>Blah blah</h3>
</div>
<div class="box" style="height:150px;">
<h3>Blah blah</h3>
</div>
<div class="box" style="height:170px;">
<h3>Blah blah</h3>
</div>
</div>
Added to CSS
.subcontainer{
float: left;
}
Vertically align divs with equal space between them
You can use Flexbox
for this. You just need to set flex-direction: column
and justify-content: space-between
.
body,html { margin: 0; padding: 0;}.content { display: flex; height: 250px; border: 1px solid black; justify-content: space-between; flex-direction: column; width: 200px;}.box { background: #0479D9; height: 50px;}
<div class="content"> <div class="box"></div> <div class="box"></div> <div class="box"></div></div>
Stacking DIVs on top of each other?
Position the outer div however you want, then position the inner divs using absolute. They'll all stack up.
.inner { position: absolute;}
<div class="outer"> <div class="inner">1</div> <div class="inner">2</div> <div class="inner">3</div> <div class="inner">4</div></div>
Two divs side by side - Fluid display
Using this CSS for my current site. It works perfect!
#sides{
margin:0;
}
#left{
float:left;
width:75%;
overflow:hidden;
}
#right{
float:left;
width:25%;
overflow:hidden;
}
Divs not horizontally aligned
Please see below CSS, I have only change the margin-right into %, as you are giving the width in % but the margin in pixels.
.info {
margin-top: 50px;
padding-left: 1%;
font-size: 12px;
position: absolute;
}
.info_label {
margin-right: 5%;
margin-bottom: 10px;
width: 40%;
padding: 0;
float: left;
background-color: yellow;
position: relative;
}
.info_data_label {
margin-right: 5%;
margin-bottom: 10px;
width: 50%;
padding: 0;
background-color: yellow;
float: right;
position: relative;
}
.j {
float: left;
}
text-align: justify; inline-block elements properly?
Updated the "Future" solution info below; still not yet fully supported.
Present Workaround (IE8+, FF, Chrome Tested)
See this fiddle.
Relevant CSS
.prevNext {
text-align: justify;
}
.prevNext a {
display: inline-block;
position: relative;
top: 1.2em; /* your line-height */
}
.prevNext:before{
content: '';
display: block;
width: 100%;
margin-bottom: -1.2em; /* your line-height */
}
.prevNext:after {
content: '';
display: inline-block;
width: 100%;
}
Explanation
The display: block
on the :before
element with the negative bottom margin pulls the lines of text up one line height which eliminates the extra line, but displaces the text. Then with the position: relative
on the inline-block
elements the displacement is counteracted, but without adding the additional line back.
Though css cannot directly access a line-height
"unit" per se, the use of em
in the margin-bottom
and top
settings easily accommodates any line-height
given as one of the multiplier values. So 1.2
, 120%
, or 1.2em
are all equal in calculation with respect to line-height
, which makes the use of em
a good choice here, as even if line-height: 1.2
is set, then 1.2em
for margin-bottom
and top
will match. Good coding to normalize the look of a site means at some point line-height
should be defined explicitly, so if any of the multiplier methods are used, then the equivalent em
unit will give the same value as the line-height
. And if line-height
is set to a non-em
length, such as px
, that instead could be set.
Definitely having a variable or mixin using a css preprocessor such as LESS or SCSS could help keep these values matching the appropriate line-height
, or javascript could be used to dynamically read such, but really, the line-height
should be known in the context of where this is being used, and the appropriate settings here made.
UPDATE for minified text (no spaces) issue
Kubi's comment noted that a minification of the html that removes the spaces between the <a>
elements causes the justification to fail. A pseudo-space within the <a>
tag does not help (but that is expected, as the space is happening inside the inline-block
element), a <wbr>
added between the <a>
tags does not help (probably because a break is not necessary to the next line), so if minification is desired, then the solution is a hard coded non-breaking space character
--other space characters like thin space and en space did not work (surprisingly).
Nearing a Future Clean Solution
A solution in which webkit
was behind the times (as of first writing this) was:
.prevNext {
text-align: justify;
-moz-text-align-last: justify;
-webkit-text-align-last: justify; /* not implemented yet, and will not be */
text-align-last: justify; /* IE */
}
It works in FF 12.0+ and IE8+ (buggy in IE7).
For Webkit, as of version 39 (at least, might have crept in earlier) it does support it without the -webkit-
extension but only if the user has enabled the experimental features (which can be done at chrome://flags/#enable-experimental-web-platform-features
). Rumor is that version 41 or 42 should see full support. Since it is not seamlessly supported by webkit
yet, it is still only a partial solution. However, I thought I should post it as it can be useful for some.
How do I center align a div's content with content elements floated towards the left?
text-align: center; will not work when use floating. use inline block.
Please see code below
.panel-body {
text-align: center;
}
.image-box {
display: inline-block;
margin-left: -4px;
}
.image-box img {
width: 128px;
height: 128px;
}
<div class="panel panel-default">
<div class="panel-heading text-center">
<h3 class="panel-title">GALLERY</h3>
</div>
<div class="panel-body">
<div class="image-box">
<img src="http://placehold.it/300x300">
<P class="caption">Image Description</P>
</div>
<div class="image-box">
<img src="http://placehold.it/300x300">
<P class="caption">Image Description</P>
</div>
<div class="image-box">
<img src="http://placehold.it/300x300">
<P class="caption">Image Description</P>
</div>
</div>
</div>
Alignment 2 html elements, centering them, on top of each other
The html
<div class="col-sm-4 text-center">
<h4>this is text</h4>
<img style="
width: 200px;
height: 200px;
";
class="img-responsive imageCentered"; src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png">
</div>
the css
.imageCentered{
margin:0 auto;
}
here is jsfiddle
CSS Re-Centering elements on wrap
This is the best solution I can think of with CSS only, the magic part is the @media queries. Obviously you'll have to do the math to fit your case.
JsFiddle Demo
body { margin: 0;}.parent-wrapper { margin: auto; width: 500px; padding: 5px 0; font-size: 0;}.child-wrapper { display: inline-block; width: 100px; font-size: 16px;}.child-wrapper img { max-width: 100%; height: auto; padding: 5px; vertical-align: top; box-sizing: border-box;}@media screen and (max-width: 499px) { .parent-wrapper { width: 400px; }}@media screen and (max-width: 399px) { .parent-wrapper { width: 300px; }}@media screen and (max-width: 299px) { .parent-wrapper { width: 200px; }}@media screen and (max-width: 199px) { .parent-wrapper { width: 100px; }}
<div class="parent-wrapper"> <div class="child-wrapper"> <img src="//dummyimage.com/100" /> </div> <div class="child-wrapper"> <img src="//dummyimage.com/100" /> </div> <div class="child-wrapper"> <img src="//dummyimage.com/100" /> </div> <div class="child-wrapper"> <img src="//dummyimage.com/100" /> </div> <div class="child-wrapper"> <img src="//dummyimage.com/100" /> </div> <div class="child-wrapper"> <img src="//dummyimage.com/100" /> </div></div>
Related Topics
How to Vertically Align Label and Input in Bootstrap 3
Two Divs; Left Should Be Fixed Width, Right Should Fill Rest of Space
Simulating Position: Fixed in Ie6 with a Div of 100% Height
Beginner's Stuff: How to Stop CSS' Divs from Overlapping
How to Make Vertically Rotated Links in HTML
Make an Image to Fit Its Parent Dimensions
How to Customize Only with CSS for HTML5 Input Range Slider-Vertical
How to Make a Div with a Rails Link Clickable
Nested Rows in Bootstrap 3 Fail to Respect The Grid
Position Fixed Not Working in Safari Version 8.0.2
Styling The Calendar for HTML5 Native Datepicker
Left Align Text and Right Align Image in CSS
Why Are These Two Inline-Blocks Not Aligned
Div Background Color Not Showing with Body Color
How to Make a Div Grow in Height While Having Floats Inside