Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2656
  • Last Modified:

How do I force a line break when two CSS floating elements collide?

I have two three floating elements on a page, and sometimes one of the elements collides with another. This is okay, except that when it happens I want the collided element to force a line break instead of just moving down.

If this makes no sense at all, check out the example:

http://www.scottswebdesign.com.au/example.html

That's pretty much my problem, without the actual site. Resize your browser and see what the red square does to the green rectangle. I want to green rectangle to line break below the blue one, when the red and green collide, but I don't know how to do this in CSS?

Not looking for some javascript solution, just clean CSS and HTML.

Thanks,

Scott
0
drunken_elf
Asked:
drunken_elf
  • 7
  • 5
3 Solutions
 
Ali KayahanFull Stack DeveloperCommented:
    You may try to add ;
        display:inline;

   To all related divisions or you may try to group divisions with span like ;
 
    <span>my divisions </span>
0
 
drunken_elfAuthor Commented:
Thanks for you comment, but I can't seem to get it working with either of those solutions. The example page is entirely self contained in that document, so if you could modify the code so it works with your solution then paste it here that'd be a huge help, because I can't seem to getting working using "display: inline" or <span> tags.
0
 
scrathcyboyCommented:
The green eventually does break below the blue when the red gets close enough to the blue -- i.e. same width as green.  Hence it is just the narrow width of the red that is causing this behaviour.  Make the red wider, or embed it in a wider DIV that is as long as the green, and simply align the red to the right of the wider div.  SPAN will not do this, as they are in-line tags, they will definitely not force a line break like DIV
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
drunken_elfAuthor Commented:
Thanks for your comment scrathcyboy.

However, this is not the solution I am after, because I cannot simply change the width of the red box (which will be a photo).

Here is a more comprehensive example, which will explain more what I am after and why I cannot simply change the width of the red box:

http://www.scottswebdesign.com.au/example2.html

The problem, you'll see, is that "Product Three" is not breaking under "Product Two", but just moving down (because they are both floated) and leaving an ugly white space in the list. Changing the width of the photo is not the solution I am after, because that will make the photos on this page too large.

I am after some way to cause the break when the left float (a list item) collides with the right float (image), instead of just moving it down the amount they collide.

Thanks.
0
 
scrathcyboyCommented:
Actually I suggested encasing the photo in a wider DIV, not changing the width of the photo.  But nevertheless, the problem is likely the floating of each product line.  Why float them at all?  Why not put all product listings into a single main DIV and style it with DIV { display:inline; }

Then each product can exist in its own DIV -- or I would use a SPAN tag for them, so two could fit on a line, or wrap, depending on what happens.   The display of the products is therefore a integrated unit.

The only thing you may want to float out of the display is the picture, because you don't want it to wrap inline.  Keep in mind, you will have to use some "master" DIV containers for this layout to keep everything where you want it.
0
 
drunken_elfAuthor Commented:
The reason I am using a float for the products is that each product is a self-contained table that looks like this:

             | Product name
Image   | Brand
             | Category

And so the default for tables is the break to a new line for each table, unless I float them. The products are actually in a series of categories. Product One and Two are one category, three and four another, and so on. What may work is if I contain each category is a separate div, and the div resizes when colliding with the image. However, I don't know how to do this either. All my attempts have resulted in the DIV continuing under the floated image (see red box example):

http://www.scottswebdesign.com.au/example4.html

Any ideas how to made the div width relative to what float it collides with?

Thanks for staying on this with me mate. I look forward to giving you the points when this is all sorted, I think we're almost there.

Scott
0
 
scrathcyboyCommented:
Well, I think the solution to this is easier than you thought.  If your server code is outputting a table, you should use a TABLE structure to lay it out -- not DIVs.  There is a lot of conflict with DIVs in tables, and DIVs trying to limit what tables do -- these surface as real gotchas because browsers do it different.

Why can't you just output a table structure for the parts of the page where you are outputting product lists and photos?  If you want help in a whole page table layout, that I can do for you.  Just ask.

I think with colliding DIVs you are fighting a battle on this page you probably don't need to be fighting.
0
 
drunken_elfAuthor Commented:
I'm not a huge fan of table structures, they were all I knew for so many years until I was "enlightened" by the possibilities of CSS. My experience with tables seems to show that they are even less favourable with floating objects than DIV's were. I originally had the products displayed in a table, using TD cells to divide each product, but when that collided with a float it would just write over the image, the table would act as though no float was there at all, or as if it were absolutley positioned.

Thanks for the design offer, but I already have the whole site layout sorted (using DIV's), its just this one issue I am having with colliding floats.

Any ideas on how to make a div tag change its width when it collides with a float (see example4.htm above), I'm pretty sure this is the solution I am after, and I can use this to get my desired result.
0
 
drunken_elfAuthor Commented:
I've been experimenting, and I seem to have gotten it to work.

What I have used is a  to wrap each tabled product, and somehow it seems to be working. I can only test it on Firefox and Safari on my computer, so not sure if IE likes it, but it works on those two.

Why would this do what I am after? I have never heard of inline-block before, is it widely supported across browsers. I just found it through google, and experimented.

Here's the working page:

http://www.scottswebdesign.com.au/example.html
0
 
drunken_elfAuthor Commented:
the blank is meant to be a "DIV tag with display:inline-block"
0
 
scrathcyboyCommented:
The latest link works fine in IE6 -- which is the only IE I have for testing.

Sorry if I did not mention display:inline here -- I certainly meant to.  It forces all DIVs to basically keep in a wrap framework rather than an individual separate framework, as tables do by default.  I have been telling so many other threads about it, I could have sworn I also mentioned it here, but it slipped by.  Anyway it is the obvious fix for this, and I should have said it earlier.  Comes from trying to help too many people at once.

Cheers
0
 
drunken_elfAuthor Commented:
Actually, I didn't use display:inline. When I tried this, it would not give me what I was after. This is why I didn't accept ali_kayahan's answer. What did work was setting the DIV to "display:inline-block".

Notice the difference between these two pages:

This example uses inline (and doesn't work, at least in Safari it doesnt)
http://www.scottswebdesign.com.au/example5.html

This example uses inline-block (and works)
http://www.scottswebdesign.com.au/example.html

What's the difference between inline, and inline-block.

Scott
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 7
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now