Float Drop Problem

For our Orders, Jobs and Documents pages we switched from using tables to using lists (ul/li) with left floating div’s. This is nice in terms of modern CSS driven HTML and is easier to adopt to the iPhone. But it does bring a few issues with it. For example that the div’s tend to drop below the one on their left if the content is too large and they have no size attribute.

I’ve built a page where I tried out different ways to prevent this with example code.

Float Drop Examples

What we used at Supertext is to have the 2nd column with a fixed position. But this is only possible if you have only 2 columns and if the width of the first column is fixed too.

 

<div>        
    <div>Test</div>
    <div style="position: absolute; left: 40px;">
        <b>Long Text and very long Text. Long Text and very long Text. Long Text and very long Text.</b><br />
    </div>
</div>

Let me know if you have a better solution!




Ähnliche Beiträge


Leave a Reply

Your email address will not be published. Required fields are marked *



*