Solved

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

Posted on 2008-10-06
13
2,626 Views
Last Modified: 2012-05-05
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
Comment
Question by:drunken_elf
  • 7
  • 5
13 Comments
 
LVL 14

Assisted Solution

by:ali_kayahan
ali_kayahan earned 100 total points
Comment Utility
    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
 
LVL 1

Author Comment

by:drunken_elf
Comment Utility
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
 
LVL 44

Expert Comment

by:scrathcyboy
Comment Utility
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
 
LVL 1

Author Comment

by:drunken_elf
Comment Utility
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
 
LVL 44

Assisted Solution

by:scrathcyboy
scrathcyboy earned 100 total points
Comment Utility
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
 
LVL 1

Author Comment

by:drunken_elf
Comment Utility
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
What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
LVL 44

Expert Comment

by:scrathcyboy
Comment Utility
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
 
LVL 1

Author Comment

by:drunken_elf
Comment Utility
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
 
LVL 1

Author Comment

by:drunken_elf
Comment Utility
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
 
LVL 1

Author Comment

by:drunken_elf
Comment Utility
the blank is meant to be a "DIV tag with display:inline-block"
0
 
LVL 44

Expert Comment

by:scrathcyboy
Comment Utility
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
 
LVL 1

Accepted Solution

by:
drunken_elf earned 0 total points
Comment Utility
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
 
LVL 44

Expert Comment

by:scrathcyboy
Comment Utility
0

Featured Post

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…

772 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now