Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

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

Posted on 2008-10-06
13
Medium Priority
?
2,654 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 7
  • 5
13 Comments
 
LVL 14

Assisted Solution

by:Ali Kayahan
Ali Kayahan earned 400 total points
ID: 22649430
    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
ID: 22655698
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
ID: 22656037
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 1

Author Comment

by:drunken_elf
ID: 22656815
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 400 total points
ID: 22661425
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
ID: 22664855
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
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 22665009
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
ID: 22665169
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
ID: 22665291
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
ID: 22665296
the blank is meant to be a "DIV tag with display:inline-block"
0
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 22665599
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
ID: 22666731
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

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Find out what you should include to make the best professional email signature for your organization.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

618 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