I have a script which generates a DIV for each message written on a donation wall on my site. You can see the donation wall here.
This is the section of the script that generates the DIVs:
foreach( $donors as $donor ):
$output = '<div class="donorbox"><p><strong>'.$donor->name.'</strong> donated '.$donation.'<small class="date time">on '.$datetime.'</small><blockquote class="comment">'.nl2br($donor->comment).'</blockquote></p></div>';
endforeach;
I have set the width of each donorbox DIV to 43.5%, and added float:left, so that 2 always fit on each line.
Because the DIVs are going to have different heights, depending on how long the message the user writes, the display of the divs is rather uneven (see page linked to above). So I would like to find a way of centering the DIVs vertically so that there are always two per line, but so that they display more evenly, i.e. so that the vertical center point of the 2 DIVs is aligned.
Another problem with the current implementation is that when the height of a DIV on the left is greater than the height of the div on the right, the next div stays on the right side of the page, rather than being forced to the left side, and this is not what I want. You can see this now if you look at the page and reduce the width of your browser window. The third donorbox DIV stays on the right.
To hopefully make what I am on about clearer I include two images below:
CURRENT
REQUIRED
If you are unsure about the height of the element always use display: inline-block instead of float. If you change it now - they will always be positioned correctly. In order for them to be vertically centered - simply add vertical-align: middle to them as well :)
P.s. If you need IE7 support for display: inline-block; add *display: inline; *zoom:1; ;)
You can let the second one float right by using something like:
.yourclass:nth-of-type(2n) {float:right !important;}
Related
I have a layout with two divs on the same line. I need one div floated left and the other floated right so that the divs will stay on their respective sides no matter the browser size and the div on the right won't fall below the left floated div when the browser size is smaller than the two divs.
I need the browser to cut off the 2nd div after the 2 divs touch each other when the browser shrinks.
I had a picture to illustrate my question but I don't have enough reputation points to post it.
Do you really need to float the divs? If not you can always create a wrapper for the divs with a minimum width set to allow the divs and a position of relative or absolute to stay next to each other,
#wrapper {
min-width: 250px;
position: relative
}
then set the inner divs display property to "inline-block".
.blocks {
display: inline-block;
position: absolute;
}
All together, this will create a "safety bubble" in which your divs can rest side by side without jumping to the next line, even after window resizing.
Check it out here.
EDIT
After a couple of trial and errors I believe we have an answer.
Javascript.
So in interest of time, I will post the code on jsFiddle here. Breifly, what I added to the previous code was a script that ( on window.onload) you get the id's of both inner divs. You then create two objects to hold the position of their facing borders which are then compared to see if the second div ( one on the right ) has crossed into the first. The numbers in the div are there as a place marker to show that the div does not slide onto/under the other.
*PS the 200px is just a demo number, they can be changed)
I'm assuming that what you mean by "cut off" is that you want the left div to appear "in front of" the right div. To do this, you want to give the left div the css
{
position:absolute;
left:0px;
z-index:2;
display:inline-block;
width:[number]px;
height:[number]px;
}
and the right div
{
position:absolute;
right:0px;
z-index:1;
display:inline-block;
width:[number]px;
height:[number]px;
}
and to their shared parent div add the css "position:relative;".
Alternately, giving both divs "position:fixed;" might work, that makes them relative to the browser winder instead of the parent div, though that will give you very different outcomes when people try to scroll. You'll also need to give the left div a background that isn't transparent, or they'll just overlap. Also note that "position:absolute;" puts the divs 'outside the flow' as it were, in the sense that they will also overlap anything else you put in, and your design has to account for this.
Working example http://jsfiddle.net/RdX5P/
If by "the browser needs to cut off the second div" you mean you want the second div to just disappear when the window gets too small, just float the two divs and put them in a container div with set height and with "overflow:hidden;"
I'm trying to do a mobile first responsive layout. So on my HTML I have
First - Middle Content
Then - Left Content
Then - Right Content
and below all the content, I have a separate section of information that goes full width from left to right.
I'm using position:absolute for Middle,Left and Right divs to position them. My problem is, because the main 3 divs are absolutely positioned, the separate section goes below the main content and overlaps. How can I fix this?
I have a working fiddle here.
Basic floats example: http://jsfiddle.net/UKKcq/11
Basic display: inline-block example: http://jsfiddle.net/UKKcq/19/
There's a fair few things to consider here:
First, you'll notice in the second example, the text from the main section starts below all 3 divs. This is because they are still part of the flow of the document whereas when using floats they are not so the text wraps around them.
Also, with the second example, I had to delete all spacing/line breaks between the divs to stop a space appearing in-between them. This happens all the time with inline-blocks and I use the following jQuery function to fix it to avoid ruining the neatness of my markup:
jQuery.fn.cleanWhitespace = function() {
textNodes = this.contents().filter(
function() { return (this.nodeType == 3 && !/\S/.test(this.nodeValue)); })
.remove();
return this;
}
})();
$('INSERTPARENTDIVHERE').cleanWhitespace();
Furthermore, I had to use vertical-align:top as by default the shortest div (in this case the center), was aligning with the bottom of the other two divs.
One final consideration is that inline-block layouts such as this have a tendency to break when the user zooms using their browser or if the width, padding, border or margin were to change for any reason. You have relative control over the latter factors but to ensure things aren't dropping to the next line (which can look really bad) when the user zooms I recommend applying white-space: nowrap; to the parent div to try and prevent this.
I have 6 floating divs (align to left) on a page. These divs has 2 different widths (depending the image () ). One div has 295px and the another has 216px. The height is calculated automatically by HTML. The container has 1050px, so in one "line" of the container I can insert 3 divs, and the another 3 on the second "line".
The CSS rule is working, all divs are floating to the left, each div has 20px margin, but the problem is the alignment of them. I want to align these divs proportional. At the moment if some pictures has different heights, on the second "line" are some blank spaces (because the height of the pictures above).
I want something to float these divs on the Y coordinate (proportional).
Look at this pictures:
Make a jsfiddle for people to play with.
But, you will probably want to make a container div for each row. This encapsulates the 3 inner divs, being as high as them and allowing the next container to fit nicely underneath
See my fiddle: http://jsfiddle.net/TJxmT/
Wouldn't a min-height at the floating divs solve the problem?
Try to use jQuery plugin called Masonry to fix that layout... You will be surprised!
EDIT:
You can always clear the 1st item in the row and every third item using css :
li:nth-child(3n+4) { clear:left; }
Have you tried putting a clear: both; on every first div of a new line?
I have an issue (code is dynamic so difficult to print - I hope this is simple) whereby when a parent container div contains 3 div elements floated left, yet the if the 3rd div goes beyond the body of the page (i.e. the browser's width) it line breaks to go underneath.
I want it to float: left whatever, whether it goes past the 'end of the browser' or not. Is this possible?
Example code:-
<div id="container"><div id="divLeft"></div><div id="divCenter"></div><div id="divRight"></div></div>
Where all the divs left, center and right are float: left;
Yet #divLeft will break to go under divCenter if it's width goes outside the browser width.
Any help much appreciated!
The best way to be sure is to set a fixed width to your div here.
An example here
#container{width:306px;display:block;border:1px solid black;overflow:auto;}
#divLeft, #divCenter,#divRight{float:left;border:1px solid red;width:100px;}
Don't forget the overflow:auto on your container if you want to apply a background or a border, else it won't be under your divs.
it seems the divs don't fit in container div, and the last one floats under them. this is how float works. you must arrange the widths of them.
I have a collection of floating divs within another div. The child divs are of variable width and height - that is they're populated using dynamic data which I have no control of. Now sometimes what happens if that the last child div has a massive height with a wall of text because it is forced into a small width by the other divs. This only happens in IE 6, 7, 8 - FF3.6 handles it correctly - it makes sure the huge div starts after a line break with a big width.
Is there anyway I can force IE into the same behaviour?
Actually, if you specify a width for that floated div, then it will use that width, or else the floated div will "shrink wrap" to the content. So you can try that, or you can use this style for that float:
#the-last-div { clear: both; float: left }
you may or may not want it floated if you want it to be across the page all by itself.
The only solution to this is one of three: specify clear: both;, specify a default width, or do either or both of these dynamically with jquery/javascript. As long as you are letting the content decide the height and width you are going to run into problems.
Using clear:both; on all divs will put each float onto its own row. This doesn't sound like what you want.
Specifying a width will be the most predictable. The browser will respect the width and will clear to the next line if there is not enough space.
If you are loading content dynamically that requires a specific width then it should be trivial to dynamically adjust the containing div width appropriately. You can perhaps check the length of the content and assign a width to the div receiving the content if the content is too long. Since we don't have your code you'd have to experiment with the length and width to get it right.
Is the content that you're loading simple text or does it contain divs and other block level elements?
How is it floated? is it a mix of float: left; and float: right; ? or is it all to one side?