I know there are tons of questions regarding floats, but I seem to be a bit stuck on how to overcome this problem.
See my example here: http://jsfiddle.net/eE9WT/1/
What I am trying to do (or infact, trying to avoid) is the third .float div starting once the second .float div has started.
I would prefer the third div to fall directly underneath the first, making use of all space on the page. I'm aware that I could separate this into two columns, but I was wondering if there is a better solution without having to do that.
Believe it or not, within my 5 years of developing for the web this seems to be the first time I've been faced with this problem!
Thanks guys
This article would help in creating a Floating Box Layout: http://matthewjamestaylor.com/blog/floating-boxes-css-layout.htm
Also check out his other layouts, just in case they seem a better fit for your design!
You can add a rule for the second float to be right
.float + .float {
float: right;
}
I think this is the solution you are looking for:
JSFiddle
I moved all the div's to the left with float.
Made some space in the right side of the screen with padding-right on the container.
And then used the position: relative; to moved the second column to that space.
Display:inline-block;
zoom:-1;
More than float it do something for you. Only some rare case am using float. I know this is not meet your goal, I just explore my side.
Related
I have 2 gaps in my unordered list that I cannot find the problem source or a proper solution to fix it.
An element.style {clear: left;} applied to the <li> tag immediately to the right of the space seems to clear the space to the left, but another randomly appears further down the page.
I am sure that the fix is simple, but all of the information that I can find seems to fit around multi-sized link images or a pattern of space. On the affected page all images should be the same size, 150x150, and the gaps seem to only affect 2 links out of 25+ listed. I nevertheless tinkered with their findings to see if it lead me to a solution, the closest I came was the above.
The affected page is here.
The page code and CSS are here.
I appreciate any advice that can be given, on how to properly resolve this issue. My solution seems to only mask the true nature of my problem.
Try adding this rule:
#list-1 >li:nth-child(3n+4) {
clear: left;
}
Try:
#list-1 #desc {
width: 150px;
min-height:44px;
}
I'm trying to create a grid layout at http://www.gablabelle.com/.
I have multiple divs (images) with float: left; property and I wonder why there is some empty spaces and why the floating divs are not filling the gaps.
Many thanks for your time and help.
UPDATE: I now use jQuery isotope but still have gaps... any idea?
That's just how floating works. Those gaps are there because elements float after another breaks to a new line. It doesn't fill the space above.
If you want an uneven grid effect then you'd need to use a javascript solution where you are setting absolute positions. I'd recommend the masonry plugin, I think the before/after example on the homepage shows the problem you are having and the solution you want.
It seems that you are looking for a way to fill all of the squares on the page. This isn't going to be possible simply through CSS. 'float: left;' is simply filling the space in the page, image by image, and not considering how it all fits together.
Fitting all of the pieces together so they sit cosily and like a jigsaw will not be easy. It is actually quite a complex problem, and it is connected to the knapsack problem (http://en.wikipedia.org/wiki/Knapsack_problem) and the packing problem (http://en.wikipedia.org/wiki/Packing_problem).
To solve this, I'm certain that there would be jQuery or JavaScript (or maybe even PHP) libraries available for use. Alternatively, you could manually order the photos such that they fit together in a tidy fashion.
Good luck!
This is causing the gaps:
article.post {
margin: 0 0 30px 30px;
}
So I'm pretty new to both css and html but this is not the first time that I have used floats to achieve 2 divs sitting next to each other. This time it is not working properly and I've been tinkering around for about 3 hours and I figure I should call on some help.
I have edited the portion of my website in jsFiddle to assist in describing my problem:
http://jsfiddle.net/9QRcP/10/
The problem isn't that you're not assigning your divs to float: right, but that your divs are small enough that you can fit multiple of them within the page width, so they're doing exactly what they should do.
To fix this, though, we would add clear:right to #about_side and #about_side_footer, but that won't force them to be level, so it doesn't quite fix the problem.
To fix that problem as well, instead of floating each individual piece of your #greeting_wrapper and #about_wrapper left and right, respectively, float the wrappers left and right instead.
#greeting_wrapper {
float: left;
}
#about_wrapper {
float: right;
}
#greeting_header, #greeting, #greeting_footer, #about_side_header, #about_side, #about_side_footer {
float: none;
}
I found that you need to float #greeting_wrapper and #about_wrapper. These wrappers are the important elements. As far as I can tell, the children of these divs shouldn't need to be floated as well.
Also currently those divs are taking on the width of the body which is 960px thus forcing both divs onto a new line.
I had a fiddle with your code: http://jsfiddle.net/9QRcP/15/
I haven't bothered to correct the alignment, but left is now on left and right is now on right.
By my own admission this isn't a very good approach to this. A few pointers:
you can use 'clear: left' to force an element on the left to move to a new line http://www.w3schools.com/cssref/pr_class_clear.asp
you should probably contain your left and right elements in 2 seperate containers (e.g. class="container left" and class="container-right" ). Clear left for any sub-element in the left container that you want to move to the next vertical level, and likewise for elements in the right container. This will allow you to easily break your page up into columns. Here 's one I prepared earlier http://jsfiddle.net/9QRcP/19/ from http://www.quirksmode.org/css/clearing.html
you could probably save yourself a lot of work by using a grid system, e.g. http://960.gs/
The issue is with the width of your wrapper. If you increase the width, the floated div will take its place on the right.
I'm having a problem with this page.
The .blog-footer div needs to clear on the right to correct for the height of the pictures introducing clear:right; causes the huge gap to appear on the page in FF and IE.
I'm at a loss, I've tried numerous ideas to get around the problem and at this point I've been staring at it too long to see the problem clearly. Can anyone help me out.
Thanks in advance.
Try using positioning. Add these to get you started:
#page-body {position: relative; width: 740px; margin-left: 20px;}
#sidebar {position: absolute; right:-190px;}
There are some subtleties, like getting the right behaviour when the content as a whole is not long enough to push the footer down, but I find those easier to work out than floating problems. With a fixed height footer like yours, that is easy to fix using a bottom margin on the page body and some more absolute positioning for the footer. You have gobs and gobs of extra divs to play with.
The clear attribute works relative to floating elements. So you can use it to make sure the footer closes the div below the picture, but the fact that your sidebar is floating as well actually pushes things down to the bottom of the sidebar.
So, as #Nicholas Wilson proposes, one solution is to position your sidebar using means other than float. And your layout doesn't appear to really require float for the sidebar.
In another direction, I noticed that you are currently hardcoding the heights of your pictures. Since you know these heights, another possibility is to forget about the clear:right for blog-footer , and add a min-height attribute to the asset-body, as in (this is for the beer festival)
<div class="asset-body" style="min-height:184px;">
Certainly not elegant or DRY, but if you had to you could do this or have javascript do it.
I have a page generated by a database. It creates a DIV for each entry (extremely simplified for sake a question). Each of these DIVs have a set width, and float left.
However, these DIVs don't have a set height, so occasionally the following as depicted in the image happens. Is there a good way to prevent this from happening, and the white space just 'collapsing?'
The link to the prototype site. Here
I think this article would help you:
http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/
Depending on what you have control over, you could always add clear: left; to every other element in your 2-column scenario.
Though, I beleive that the second "The Postal Shoppe" would actually be on the left, and the Brynwood Pak N Ship would be in the right column.
The problem isn't so much that "Brynwood Pak N Ship" isn't collapsing the white-space, it's that the second "The Postal Shoppe" is getting hung up trying to move all the way to the left column by the bottom right corner of the "Express Pack & Mail Center."
Setting clear: left will ensure those entries always move down far enough to "suck up" to the left edge of their parent container. But you will still see some un-evenness using that attribute; the "Brynwood Pak N Ship" will line it's top up with the newly-cleared "Postal Shoppe" showing a tiny gap at the top. Still probably preferable to what's going on currently.
You can add a clear: left attribute to every other div. Alternately, you could try using display: inline-block instead of floating left, but it's not as widely supported (I think it breaks in IE 6 or older), so you'd have to see what hacks are out there to make it work universally.
I suggest giving every box an equal height. This is visually better, and it solves your problem in one go!
I think this is difficult to solve in CSS. I like the suggestions other users have made with 'display:inline-block' and setting the height to be fixed. They both have minor drawbacks, but the situation will be better than it currently is.
If you are going to solve this "properly", we first need to agree what the proper solution is. I think it would be to have two columns, and for each element that has to be added, it is appended to the end of the currently least-full column. This won't necessarily result in elements alternately being placed in column 1 then column 2. Sometimes two (or more) small elements will be placed in column 2 to compensate for a large element in column 1, for example.
I doubt something as complicated as this is possible to define in CSS (but I've been surprised by what can be done before). It could be done using Javascript though. You could have a solution that does a fairly good job if Javascript is disabled using a purely CSS solution, and if Javascript is enabled you could arrange them more elegantly.
I'm not sure it is worth the effort of implementing this though. Some of the existing suggestions seem reasonable compromises, and if it were me, I'd probably go with the inline-block solution, but I thought I'd throw this idea out anyway.
This can be solved now using flex-direction and column-count:
.parent {
column-count: 2;
column-gap: 1.25rem;
}
.child-class {
flex-direction: column;
display: inline-block;
width: 100%;
}
I'm not sure if it's supported in all browsers but it's an easy css solution.