Floats are a pain as soon as you try to use proper positionning (relative /
absolute) along with proper overflow.
Floats should be used to place content alongside inline content to make said
content flow around the floating element, adapting to its shape. It's
perfect for, say, inserting a visual illustration within the paragraph it
illustrates, and can be used in various hacks to keep a text-free zone to
dress an element around some background-image decoration.
What it shouldn't be used for however is replacing inline-block, because
contrary to inline-blocks, floating elements aren't placed inside the inline
flow but in the twilight-zone-ish floating flow. This means floating
elements won't behave like real blocks nor real inline. For exemple they
won't be taken in account by their block parent when it comes to deciding
it's size, or for overflow (which causes various *nasty* "I scroll the div
but the flows don't move" or "why the fuzz aren't they wrapping" bugs in
various implementations of IE), and positioning elements inside can be a
pain (try it, you probably won't like it).
On the other hand, inline-block is exactly the way an <img/> behaves plus
the advantages of proper positionning and reserving space as one should, and
as far as IE is concerned it works great using a little initial and
non-intrusive hack to make it IE7 compliant (I'm not too sure about IE6, but
hey, it's already officially made obsolete by its maker...). Plus it's the
standard way to do things, so sooner or later IE will make a gre... a goo...
a job of it.
Hope it helps.
Michel Belleville
2009/11/12 Andrei Eftimie <k3liu...@gmail.com>
> Sorry for thread-hijacking, but why would you say that floats are
> complicated?
>
> Right now (as in current browser implementations) floats work really
> reliably.
> (with 1 small IE bug with an easy fix)
>
> inline-block needs to be hacked in multiple browsers
>
> 2009/11/12 Michel Belleville <michel.bellevi...@gmail.com>:
> > Also, you'd better not use floating positioning (easier on the very short
> > term, a lot more complicated in mid-long term).
> >
> > Michel Belleville
> >
> >
> > 2009/11/12 Andrei Eftimie <k3liu...@gmail.com>
> >>
> >> This is a CSS issue, not really related to jQuery.
> >>
> >> Do something like this in your CSS file:
> >>
> >> /* Forcing the ul to take not of its floated children. */
> >> #tabs ul { display: inline-block; overflow: hidden; }
> >> #tabs ul { display: block; }
> >>
> >> /* Floating the children */
> >> #tabs li { float: left; }
> >>
> >>
> >> 2009/11/12 AdyLim <lim...@gmail.com>:
> >> > Hi there,
> >> >
> >> > I'm just starting to learn jquery and trying to implement tabs onto my
> >> > aspx page...The problem is that the tabs are showing up one on top of
> >> > another....how do i get the tabs to line up in a row? I'm using
> >> > jquery 1.2.6...all the js's (ui.core.js, ui.tabs.js) are included in
> >> > my masterpage.
> >> >
> >> > any help is appreciated!
> >> > thanks!
> >> >
> >> > my code follows:
> >> >
> >> > ASPX:
> >> >
> >> > <%@ Page Title="" Language="C#" MasterPageFile="~/Master.Master"
> >> > AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs"
> >> > Inherits="ctc3.test.WebForm1" %>
> >> > <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
> >> > </asp:Content>
> >> > <asp:Content ID="Content2" ContentPlaceHolderID="phEmailGoalsheet"
> >> > runat="server">
> >> > </asp:Content>
> >> > <asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder1"
> >> > runat="server">
> >> >
> >> >
> >> > <script type="text/javascript">
> >> > $(function() {
> >> > $("#tabs").tabs();
> >> > });
> >> > </script>
> >> >
> >> >
> >> > <div id="tabs" class="ui-tabs-nav">
> >> >
> >> >
> >> > <ul>
> >> > <li><a href="#tabs-1">Nunc tincidunt</a></li>
> >> > <li><a href="#tabs-2">Proin dolor</a></li>
> >> > <li><a href="#tabs-3">Aenean lacinia</a></li>
> >> > </ul>
> >> > <div id="tabs-1">
> >> >
> >> > <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo
> >> > a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris.
> >> > Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem.
> >> > Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo.
> >> > Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam
> >> > sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat.
> >> > Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci
> >> > tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
> >> > </div>
> >> > <div id="tabs-2">
> >> > <p>Morbi tincidunt, dui sit amet facilisis feugiat,
> odio
> >> > metus
> >> > gravida ante, ut pharetra massa metus id nunc. Duis scelerisque
> >> > molestie turpis. Sed fringilla, massa eget luctus malesuada, metus
> >> > eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet
> >> > fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam.
> >> > Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis.
> >> > Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra
> >> > nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas
> >> > feugiat, tellus pellentesque pretium posuere, felis lorem euismod
> >> > felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et
> >> > purus.</p>
> >> > </div>
> >> > <div id="tabs-3">
> >> > <p>Mauris eleifend est et turpis. Duis id erat.
> >> > Suspendisse potenti.
> >> > Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat,
> >> > eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent
> >> > taciti sociosqu ad litora torquent per conubia nostra, per inceptos
> >> > himenaeos. Fusce sodales. Quisque eu urna vel enim commodo
> >> > pellentesque. Praesent eu risus hendrerit ligula tempus pretium.
> >> > Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
> >> > <p>Duis cursus. Maecenas ligula eros, blandit nec,
> >> > pharetra at,
> >> > semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra
> >> > justo vitae neque. Praesent blandit adipiscing velit. Suspendisse
> >> > potenti. Donec mattis, pede vel pharetra blandit, magna ligula
> >> > faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque.
> >> > Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi
> >> > lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean
> >> > vehicula velit eu tellus interdum rutrum. Maecenas commodo.
> >> > Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus
> >> > hendrerit hendrerit.</p>
> >> > </div>
> >> > </div>
> >> >
> >> > <!-- End demo -->
> >> >
> >> > </asp:Content>
> >> >
> >> >
> >>
> >>
> >>
> >> --
> >> Andrei Eftimie
> >> http://eftimie.com
> >> +40 758 833 281
> >>
> >> Punct
> >> http://designpunct.ro
> >
> >
>
>
>
> --
> Andrei Eftimie
> http://eftimie.com
> +40 758 833 281
>
> Punct
> http://designpunct.ro
>
