Streaming live at 10am (PST)

Div with auto width in columns making them break


#1

The boxes on my homepage (public link: https://webflow.com/design/stylem?preview=e8513cb364e9305b5c5d569c0c595bfb) are div-s inside columns.

They display correctly on Chrome, but break completely in Firefox and Internet Explorer: http://awesomescreenshot.com/03a3rgo995

Trying to rebuild them with floats now...


#2

Hi @uzzer, I was looking at your site, but having trouble finding those divs inside of columns that you mentioned. I can see tabs, and divs but not columns. Did you change this already to divs and using floats? If so, that is actually the recommended way to do it anyway, using divs and floats. Columns can be used, but then you do not have the precise control over how those will collapse on each other. Divs with auto width should not cause columns to collapse, it is more likely you had some content overflowing the div causing the content to collapse.

Let us know if you still need help. I think you are on the better track though, to use DIVs over columns. I usually never use columns unless I need to. A good rule of thumb is, that if you have many content items that have to go into each column, then columns are a good idea. If you are creating feature boxes, portfolio boxes etc, then using DIV structuring yields a cleaner, better result and gives you fine control, how those will break down at the different viewports.

Here is a tutorial on div structuring:

http://tutorials.webflow.com/using-divs-for-structuring

I hope that helps. Let us know if you are still trying to use columns and if so, where those are on your page with the auto width divs, and we can take a look. Cheers, Dave


#3

I did change from columns to floats, but it's not nice to see bugs anyway... things work one way in Chrome and not the same way in FF...

Also, even with floats, I had a problem with the bottom centred float. I tried to centre it with "auto"-s but that added additional space between the float and the red dividing line. Because of this bug I resorted to centring the float with fixed px left margin which of course does not show appropriately on mobile devices frowning


#4

Hi @uzzer, we can investigate this further, do you have an active design with these issues? When you mentioned Firefox, were you using Firefox in the Webflow Designer or the published site? Currently Firefox is not supported in the Webflow Designer, but your sites should work ok in Firefox.

Let us know if you have an active design with those issues and we will go take a look. Thank you very much for reporting your findings, we want to investigate all possibilities of there being a bug and squash it smile

Cheers, Dave


#5

do you have an active design with these issues?

You could try to set the bottom float box on my public link (https://webflow.com/design/stylem?preview=e8513cb364e9305b5c5d569c0c595bfb) centred with autos and on inspect element you should notice one additional coming out of nowhere smile

were you using Firefox in the Webflow Designer or the published site?

I do my editing in Chrome, and check in Chrome, FF and IE, that is I was using FF for the published site


#6

Btw this bug is bothering me most of all for the time being: http://forum.webflow.com/t/issue-with-editing-text-in-text-blocks-requiring-scrolling/7699/6


#7

Ok thanks @uzzer, we really appreciate your info. We'll check both these out as soon as possible and get back to you with some additional info. Thanks for the info on the browsers too, that helps to narrow down the issue smile

Cheers, Dave


#8

Hi @uzzer, I did have a chance to investigate your issue with this div block that you had to position manually using left margin, and the issue seems to be in the way you have these rows setup in your div structure. The last div block is sharing it's parent container with the rest of the div blocks, so the left and right auto margin has no effect. I advise you to setup a Row Block for each row, and have three divs in each row and use positioning on those rows to get your desired result. I have made a video:

Div Structuring for Rows

Could you please watch that, and if any questions, let me know ? Thanks a lot smile Dave


#9

Thanks cyberdave, not it worked like charm! smile And the video was great, it made reworking the whole thing very easy smile


How to make columns that size independently of each other
#10

Cool smile Glad to hear smile Feel free to ask any questions you might have. Usually dividing your site into manageable blocks is the best way to go smile
Cheers, Dave


#11

Well, I can't resist the invitation/ temptation, two more smile

http://forum.webflow.com/t/empty-line-eaten-up-when-at-the-end-of-a-text-block/7470 - maybe not a bug but strange anyway?


#12

Hi Thanks @uzzer, I will go check on that, and provide a response on that thread smile

Cheers, Dave


#14