Just trying to do something like left and right floating, but independent of the height...
Here is my example the problem in this example 2 and 4 aren't near seems like have a space. Not sure how the best way to implement and without having issues in different browser (only was testing in chrome)
Thanks
Put the "float left" elements in one container, and the "float right" elements in another. Then float the containers instead of the elements.
Related
Look at this image: http://i.stack.imgur.com/KZCXn.png
I'm using 'float:left' to align contents of my website grid-wise.
On the left side, the space between the two objects is 24px, whereas on the right side it's 10px. It is happening automatically because of using float. I don't want the spaces to be different on both sides if the boxes are of different heights. I want the alignment to be like facebook timeline.
You will need to use something like Masonry: http://masonry.desandro.com/. HTML/CSS can't do it by itself.
I am working on the interface for a small web module and am having some problems with the CSS. Right now I have the container DIV and then tables to layout the sub-sections. I am floating 3 of the tables left and 3 tables right, which until now has worked great.
I recently added a feature that allows for additional fields to be added by the user as needed and as the height of a table in the right column grows, it breaks the layout. Is there a better way to do this so that the layout won't break?
After adding "clear:left" and "clear:right" to each table, it appears as follows...
After moving the 3 left floated tables to the top of the code and removing the "float:right/clear:right" from the other 3, it works well except for this.
For each float left, add clear:left, for each float right, add clear: right.
It'd depend on the order of each floated container though. Another option would be to try keeping one set of floats from one column (i.e. the float lefts or float rights) and remove the float property from the others in the other column so they wrap to the side of the floated boxes.
EDIT: a working example: http://cssdesk.com/Xan5j
It would be better to show a live example of this, but the easiest way to handle this—if this is an option—is to wrap each column in its own div.
I think I need some more assistance with the concept of floating. This time my question revolves around floating two or more elements to the left. How does this work exactly? I know that a float lifts the children of the element off the page and moves them all the way to the left. All other elements respond by wrapping around... but how does the concept of floating two elements apply to this?
Here is what I understand: Say I have two DIVs, a and b. Float a to left, b's content will wrap around it... but if I float b to the left... How does the content respond to a?
EDIT: Here is something I was messing around with to see if I could understand this concept.
The first DIV has an inline style that floats it to the left... But see how the second DIV with no inline style margin is all wacky?... It doesn't show this wacky margin when the DIV is floated to the left also.
Edit: I know inline styles are bad... I was just using them to showcase an example here.
Here's a series of very comprehensive tutorials: Floatutorial. By following the tutorials it becomes very clear how floating works.
To answer your specific question: When you have two elements with float:left, then the surrounding content will wrap the second element, then the first if there's room left.
Example: http://jsfiddle.net/ak736
I need to create following page layout using Divs.
http://jsfiddle.net/6Lanq/ (please use horizontal and vertical scrollbar to see the exact picture. we have four zones)
I accomplished it using nested divs and float but nested divs are not what is required. Other way of doing, that I know, is declaring "position:absolute" and setting z-index but this required exact top / right / bottom / left locations which are not desired.
It is possible to do the same without using nested divs and exact coordinates? Some find of float or dynamic solution?
You'll have to use Position:Absolute, then, if you use Top and Left to set the position it will take the entire page, but if you use Margin-Top and Margin-Left, it will take as a reference the parent DIV.
I have a bunch of float: left elements and some are SLIGHTLY bigger than others. I want the newline to break and have the images float all the way to the left instead of getting stuck on a bigger element.
Here is the page I'm talking about : link
If they are all the same size if works beautifully : link
Thanks! (I'd rather not get into javascript or server side scripting if I don't have to)
Well, if you really need to use float declarations, you have two options:
Use clear: left on the leftmost items - the con is that you'll have a fixed number of columns
Make the items equal in height - either by script or by hard-coding the height in the CSS
Both of these are limiting, because they work around how floats work. However, you may consider using display: inline-block instead of float, which will achieve the similar layout. You can then adjust their alignment using vertical-align.
I fixed it by removing float:left, and adding display:inline-block instead. Haven't used it for images, but should work fine, there, too.
Use display:inline-block
You may also find vertical-align: top or vertical-align:middle useful.
This is what I did. Seems to work in forcing a new line, but I'm not an html/css guru by any measure.
<p> </p>
You can wrap them in a div and give the div a set width (the width of the widest image + margin maybe?) and then float the divs. Then, set the images to the center of their containing divs. Your margins between images won't be consistent for the differently sized images but it'll lay out much more nicely on the page.
This is an old post and the links are no longer valid but because it came up early in a search I was doing I thought I should comment to help others understand the problem better.
By using float you are asking the browser to arrange your controls automatically. It responds by wrapping when the controls don't fit the width for their specified float arrangement. float:left, float:right or clear:left,clear:right,clear:both.
So if you want to force a bunch of float:left items to float uniformly into one left column then you need to make the browser decide to wrap/unwrap them at the same width. Because you don't want to do any scripting you can wrap all of the controls you want to float together in a single div. You would want to add a new wrapping div with a class like:
.LeftImages{
float:left;
}
html
<div class="LeftImages">
<img...>
<img...>
</div>
This div will automatically adjust to the width of the largest image and all the images will be floated left with the div all the time (no wrapping).
If you still want them to wrap you can give the div a width like width:30% and each of the images the float:left; style. Rather than adjust to the largest image it will vary in size and allow the contained images to wrap.
Add to .icons div {width:160px; height:130px;} will work out very nicely
Hope it will help