Not signed in (Sign In)

SkillShare - A place to discuss Web Standards and Web Design topics

Categories

Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.

    • CommentAuthorrobalan
    • CommentTimeApr 18th 2006
     permalink
    I'm redesigning one of my sites and I'm having some wrapping issues with two divs I am floating in the head area. You can view the *rough* area I'm working on at http://www.mygreenroom.com/new

    I want to % size the light yellow box and the right-hand sign-in form, but right now the form jumps below the box when the browser is below a certain width.

    Any ideas?

    Rob
    • CommentAuthorrobalan
    • CommentTimeApr 18th 2006
     permalink
    Anyone? :o\
    • CommentAuthoradmin
    • CommentTimeApr 18th 2006 edited
     permalink
    the problem is here

    min-width: 550px;

    At a certain point the 550 plus the 35% on the sign in box equals more than 100%... therefore the box falls bellow it.

    If you want to keep that min-width in place, you are going to have to absolute position that sign in box top right.

    like so:

    #signin {
    float: right;
    margin: 0;
    text-align: left;
    width: 35%;
    position: absolute;
    top:0;
    right:0;
    }


    This has its drawbacks, elements might overlap if the window size is set too small.
    • CommentAuthorrobalan
    • CommentTimeApr 18th 2006
     permalink
    Thanks -- that did the trick... the overlap does suck though.

    How would you go about doing this kind of layout? I seem to be designing a lot of these and they would appear to be two-column all the way down, but I haven't coded them as such -- I'm still doing

    [head left | right]
    [col left][sidebar]
    [footer]


    when maybe

    [col left][sidebar]
    [footer]


    would do the trick... perhaps I'll give that a try tomorrow.

    :o\

    Thanks for your help Alex!
Add your comments
    Username Password
  • Format comments as (Help)