Geek Answers Handbook

Is this a Firefox float error?

The designer requested a layout of the content area with two columns with images in the left column, text on the right with a full-width quote below the first image.

The client will enter content on this CMS-managed site, so columns should expand vertically as needed. There are no background colors on the real site, so the columns do not need to be the same height.

http://jsfiddle.net/juo0ubjw/

<div class="container"> <div class="top-left">Picture here</div> <div class="full-width"> <blockquote>Blockquote here</blockquote> </div> <div class="bottom-left">Picture here</div> <div class="top-right"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p> </div> </div> .container { width: 300px } .top-left { background:red; width:100px; height:100px; float:left; } .top-right { background:blue; margin-left:100px; width:200px; } .full-width { background:purple; float:left; width:100%; height:80px; } .bottom-left { background:green; float:left; width:100px; height:100px; } p { padding:10px; }

It works great in Safari, Chrome, and IE. But in Firefox there is a strange problem with the word hanging to the right of the div.

My fix: http://jsfiddle.net/rfoc71pe/

I have already mentioned FF float errors related to infinite width and space, but this does not seem to be the case since all my widths are defined and the words are wrapped.

Question: Does anyone know why this happened, and if this is actually a bug or just a problem with my CSS? I am also wondering if there is a way to fix a situation that seems less hacked? Thanks!

+5
source share
1 answer

I really think there is some kind of mistake. But I found a fix for yours :) Here it is: JSFiddle .

HTML

 <div class="container"> <div class="top-left">Picture here</div> <div class="full-width"> <blockquote>Blockquote here</blockquote> </div> <div class="bottom-left">Picture here</div> <div class="top-right"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p> </div>

CSS

 .container { width: 300px } .top-left { background:red; width:100px; height:100px; float:left; } .top-right { background:blue; margin-left:100px; width:200px; } .full-width { background:purple; float:left; width:100%; height:80px; padding: 10px 0 10px 0; } .bottom-left { background:green; float:left; width:100px; height:100px; } p { padding: 10px 10px 0 10px; }

If you are sad, you do not need color, and your purple block will be white. In my solution, you cannot see the boundaries of this block.

Try posting on the Mozilla forum and describe your problem.

-1
source

More articles:


All Articles