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?
Related
How to set which div is over another by position fixed?
If I have 3 divs and page is separated with those 3 divs I want to make them all fixed but I one left and right be over the center one I have photo example with two but it same question.
Example one
Example two
With example one when I put img from behind as fixed img over message div...
Try giving them z-indexes.
Just add z-index: (some number).
The element with a bigger index will be in front.
Documentation.
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;}
I would like to know if I can float the div like this using CSS. What I would like to do is to move the DIV which is CSS DIV 2 under the CSS DIV 1 to the right when reducing the windows size. See the screenshot below:
This is how three DIV would display on bigger windows size. First DIV is at the top left corner, the second DIV is under the first DIV. Then the third DIV is on the top right.
When I resize the browser windows, the third DIV which has wider width will drop to the botton under the first DIV, and the second DIV will automatcially move to the top right corner to fill in the space.
Anyone think that this is possible to do it by using CSS, and might not need to use JS or others?
Thanks
I'd say that change is achieved either by changing from a columnar layout to a row layout, or else by swapping the order of the two elements. Either way, it requires JavaScript.
Well I have 3 div's floating next to eachother. And the 3 divs are in a bigger div with background image.
Now are the left and right div 600px in height and that is set and the middle (container) is auto height. But I want the background of the 3 divs always to be the same height as the left and right div dut it only scrolls with the middle div.
Maby I can't explaine this correct so if you could take a real quick look at the website.
This is when its correct with lots of content:
Good
This is the incorrect page...
Bad
I'm guessing its not something big and I dont know what coding to post here so to overcome lots and lots of coding here maby this is better if you could take a quick peek.
Thanks!
Add overflow: hidden to the #mainbg div
#mainbg { overflow: hidden; }
try add:
<div style="clear:both;line-height:0"></div>
after the last div.
edit: i don't watch to the source code first so a little bit change...
create a new div into mainbg and add all 3 middle part divs in it
then you can use clearing div after this one.
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.