I have a total of 8 boxes with images inside. I have 4 boxes across (4 columns) in each row (2 rows total). They are set to float: left and display: inline. The columns and rows all align perfectly when the height is fixed.
Like so:
(http://4.bp.blogspot.com/-o_rRBylW7Gk/UbOnL-IHSTI/AAAAAAAAFFw/udM5_Bhhz7k/s640/post-sized.PNG)
But when I add height:auto... the 2nd row stacks at the 3rd column.
Like so:
(http://3.bp.blogspot.com/-J3dkWTM2OCw/UbOnQutKSBI/AAAAAAAAFF4/qTsBLn84ukE/s1600/post-auto.PNG)
The desired result is for all rows and columns to align without the images being skewed and stretched. As long as the desire result is achieved, I don't have a preference on how this is done (jQuery or otherwise).
I tired clear both, vertical align to top, the clearfix after, display table-cell instead of display inline, etc.. I tried everything I could find online.
Here is the CSS:
.post{
float:left;
display:inline-block;
list-style: none;
width: 200px;
height: auto;
overflow:hidden;
margin-right: 12px;
margin-bottom: 12px;
padding: 10px;
background-color: white !important;
}
.post-body {
width: 100% !important;
height: auto;
overflow: hidden;
padding: 0px !important;
margin: 0px !important;
}
.post img {
width: 100% !important;
height:auto;
padding: 0px;
margin: 0px;
}
It's in the Blogger.com (blogspot) platform.
It's difficult to add the whole HTML, you would have to understand the Blogger format or at least XML codes but here are the main sections:
<b:section class='main' id='main' maxwidgets='3' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
<b:includable id='main' var='top'>
<b:includable id='post' var='post'>
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='description articleBody'>
<data:post.body/>
<div style='clear: both;'/>
</div>
</div>
</b:includable>
</b:includable>
</b:widget>
</<b:section>
The accepted answer in this page: div float or display inline-block to left AND top might be a solution. JQ-Masonry: http://masonry.desandro.com/
I presume you have two main divs. One for the first line and one for the second and potentially more divs inside holding the images? If so try placing this:
<div style="clear:both;">
</div>
inbetween the end of the first line div and the start of the second line div
Related
So I'm attempting to create this effect where when the window is pulled big enough two divs align side by side but when made smaller the divs stack above each other and centred neatly.
So far I have this view.
The CSS for the DIV wrapping the image is:
div.pararight {
width:451px;
height:272px;
margin:0px auto;
position:relative;}
Titled 'Pararight' because when the screen is this wide the divs should sit by side with the image on right.
The CSS for the DIV wrapping the text is:
div.paraleft {
width:480px;
margin:0px auto;
position:relative;}
Named 'paraleft' as the text will align to the left.
It's also important to mention. I think, these 2 DIVs are wrapped in another DIV which is:
div.hitterbox {
width:100%;
margin: 0px auto;
font-family: sans-serif;
font-size: 13pt;
line-height:18pt}
Mainly because there will be multiple of these hitterbox div's down the page and it was easier to copy paste and change the HTML content, don't need to explain that though I'm asking for your help!
Finally another piece of information is that the container holding the hitterbox is another DIV which has the CSS:
div.pagecontent {
padding:10px;
font-family: sans-serif;
font-size:12pt;
position:static;
text-align:center;}
Finally the HTML for it all:
<div class="pagecontent">
<div class="hitterbox">
<div class="pararight"><img src="images/Macbook.png" width="451" height="272" alt="Mac Book"/></div>
<div class="paraleft">The Onscreen Text</div>
</div>
</div>
</div>
I put pararight above paraleft so it aligns up and down that way as you can see. The white page container of all the DIVs mentioned below is 1200px wide at the moment so enough room to sit both of these guys side by side.
What would I need to to make the text DIV move to the side of the image and the image to the right. I have used float:left, float:right in the respective DIVs but then when its shrunk down to create the stack effect they are shifted right and left respectively until the user shrinks the page down to 480px when the text will be centred but the image will still float slightly right.
What have I done wrong here? :o
I would use display: inline-block, then add text-align: center in the parent element.
JSFiddle: http://jsfiddle.net/gW8r2/1
.parent {
width: 100%;
height: 100%;
border: 1px solid green;
text-align: center;
}
.parent > div {
display: inline-block;
}
.a {
width: 100px;
height: 100px;
background: red;
}
.b {
width: 200px;
height: 100px;
background: blue;
}
This is a generalized solution. In your case, .parent would be .hitterbox, .a would be .paraleft, and .b would be .pararight.
I am trying to create something like a gallery that shows different number of images per row based on the width of the browser. This has already been achieved using overflow: hidden in the outer div and float: left in the inner div.
However, what happens with this is that my images are always aligned to the left, leaving alot of whitespace on the right. How do I make it such that the gallery is always centered in the screen no matter how many images there are per row.
My code is on http://codepen.io/anon/pen/KzqAs
Thank you very much. :)
How about this: http://codepen.io/anon/full/mtBbF
HTML
<div class="container">
<div class="red box">red</div>
<div class="blue box">blue</div>
<div class="black box">black</div>
</div>
CSS
body{
text-align:center; /*You would need to define this in a parent of .container*/
}
.container{
display: inline-block;
margin: 0 auto;
text-align: left;
}
.box {
width: 300px;
height: 300px;
float: left;
}
Demonstration
You need to use an id(or class) on the main div. Set width: 300+px and margin: auto
Also your boxes should be with display: inline-block to allow them to begave "inline"
I have changed colors of the boxes a bit for better visibility.
<div id="foo">
<div class="bar">
there are very many divs like this
</div>
</div>
CSS
#foo{
margin: 10px auto;
min-height: 400px;
min-width: 800px;
}
.bar{
float: left;
text-align: left;
width: 450px;
min-height: 280px;
}
The div #foo can have a variable width from 800px to 100% of containing media and that the div .bar can have a variable height. On wide displays I want three columns of .bar divs but since they are variable height it's like they slide to the left of the div above hence those on the left have spaces above them. How do I make them float upwards. I hope I made sense.
I suggest you look at this post: Does anyone know how Pinterest.com's layout works? and possibly these jQuery plugins: http://masonry.desandro.com/ and http://www.wookmark.com/jquery-plugin.
A CSS3 solution: http://cssdeck.com/labs/css-only-pinterest-style-columns-layout
I've been trying to figure out how to make a row with 4 colums using div-elements.
The first and the third column should be 46px wide. The second and fourth column should be 50% of the left place (like 100% window width - 46*2) wide. I realized that already as you can see here in the first grey box.
Well, the text of the second and fourth column can be longer and I want it to break in the div .
The second grey box shows you how it looks like when the text is longer.
The third grey box shows you another try with 'display:table-cell'. The only problem is that the width of 50% of the second column just decreases while the width of the fourth column increases.
I need both columns to have the same width. Have you got an idea how I to achieve it?
Thank you in advance.
I decided to adapt your display: table-cell version.
The most important change was adding table-layout: fixed. What that does is equally distribute the remaining available width between the columns without a specified width.
See: http://jsfiddle.net/thirtydot/5p5V9/2/
CSS:
.outer {
color: #ffffff;
background-color: #373737;
}
.inner {
display: table;
table-layout: fixed;
width: 100%;
}
.inner > div {
display: table-cell;
}
.alignC {
text-align: center;
font-weight: bold;
color: #949494;
background-color: #2e2e2e;
}
.first, .alignC {
width: 46px;
font-weight: bold;
}
.alignR, .alignL {
background: #666;
}
HTML:
<div class="outer">
<div class="inner">
<div class="first">1</div>
<div class="alignR">r</div>
<div class="alignC">m</div>
<div class="alignL">This long text shall break in the div</div>
</div>
</div>
Browser support for display: table-cell.
I have 2 divs inside a container, Each of the inside divs are floated to the left and right, I want to make 2 columns for data inside the main content div.
Currently, text leaks out the bottom of content-left and content-right, even though they are contained within content.
Here is a jsfiddle
<div id="content">
<div id="content-left">I want to put content in here<br/><br/><br/>This is outside? why? </div>
<div id="content-right">and more in here</div>
Maybe other content here, inside the content
</div>
And the CSS
#content-left{
width: 50%;
border: 1px dotted #aaa;
float: left;
}
#content-right{
width: 49%;
float: right;
border: 1px dotted #aaa;
}
#content{
background-color: #eee;
width: 95%; /* Width of Main Content Div, % for Fluid*/
height: auto;
max-width: 1350px; /*Max width, To wide on big monitor*/
margin: 0 auto;
padding: 10px;
padding-left: 20px;
padding-right: 20px;
}
Also, any tips about floating items would be great and might earn reps if I find them useful, I thought I had it mastered but obviously not! :P
You just need to add a clearing br inside the last div
Maybe other content here, but this should be below the 2 above divs in the rendered view.
<br style="clear:both;" />
</div>
http://jsfiddle.net/jasongennaro/sahbz/9/
This is happening because the floated elements are taken out of the document flow.
Currently, text leaks out the bottom of content-left and
content-right, even though they are contained within content.
You need to "clear/contain your floats", more information here: http://www.ejeliot.com/blog/59
One simple way to do that is to add overflow: hidden to #content.
See: http://jsfiddle.net/sahbz/8/
Pure CSS
.content:after {
clear: both;
content: '';
display: block;
}