Grow your CSS skills. Land your dream job.

Splitting text left and right on the same line.

  • # August 7, 2008 at 2:00 pm

    Website: http://studentseatfree.com/search.php

    So I’m wanting to put the sort part at the top of the page in the green box at the left side and then the search part on the right side, but whenever I put them in seperate div’s or spans and try to align it a certain way it does not work. Any tips?

    Thanks.

    HTML:

    Code:
    < !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">



    Sort by:



    Showing all coupons

    < 1 >
     All Listings
    Restaurant Name Description Discount Type Restaurant Type Map
    View map
    Caliente Grille 2 for $10 on Tuesdays Flat Tex-Mex View map
    Grand China Buffett 10% Discount Percentage Chinese View map
    Little Tokyo 10% Discount Percentage Japanese View map
    My House Just to see if the maps link works. None Home Cooking View map
    Spicy Pickle 10% Discount Percentage Deli View map




    CSS:

    Code:
    * { margin: 0; padding: 0; }

    body
    {
    font-family: Helvetica, Arial, Verdana, sans-serif;
    font-size:12px;
    }

    .everything
    {
    background:url(images/bg.jpg);
    background-position: center top;
    background-repeat:repeat-y;
    margin:0px auto;
    width:999px;
    display:block;
    }

    .searchbox
    {
    background:url(images/topgreen.jpg);
    background-repeat:no-repeat;
    height:30px;
    width:999px;
    }

    .searchformbox
    {
    margin-top:-27px;
    margin-left:30px;
    }

    .logobox
    {
    background:url(images/newlogo.jpg);
    width:175px;
    min-height:135px;
    height:135px;
    float:left;
    display:inline;
    margin-left:20px;
    margin-top:10px;
    }

    .adtopbox
    {
    background:url(images/adtopholder.jpg);
    width:730px;
    min-height:90px;
    height:90px;
    margin-left:200px;
    margin-top:20px;
    }

    .adbox
    {
    background:url(images/adboxholder.jpg);
    width:300px;
    min-height:250px;
    height:250px;
    float:right;
    margin-right:70px;
    margin-top:15px;
    }

    .skyscraper
    {
    background:url(images/skyscraperad.jpg);
    width:160px;
    min-height:600px;
    height:600px;
    float:right;
    margin-right:-223px;
    margin-top:294px;
    }

    .contentbox
    {
    width:560px;
    min-height:100px;
    padding: 5px;
    background-position: left top;
    margin-left:30px;
    }

    .results
    {
    margin-left:30px;
    }

    .resultspadding
    {
    padding:5px;
    }

    .floatleft {
    float: left;
    margin: 0px 10px 10px 0px;
    }

    .refine
    {
    background-color:#eeeeee;
    min-height:25px;
    width:890px;
    padding:5px;
    margin-left:30px;
    margin-top:40px;
    background-position: center top;

    }

    /*Footer*/

    #footer {
    padding:10px 0px 70px 10px;
    color:#0c0c0c;
    width:951px;
    background-color:#daf2c8;
    font-size:9px;
    text-align: left;
    line-height:12px;
    margin:35px auto 0px;
    }

    #footer img {
    float:left;
    margin-right:10px;
    }

    #footer span {
    display:block;
    float:left;
    width:300px;
    }

    #footer a {
    color:#9e8292;
    text-decoration:none;
    }

    img {border:none}

    div.clear { clear: both; }

    # August 7, 2008 at 9:17 pm

    Since both the select element and the input elements are both within the same form, you’ll need to put some div’s inside that form to get it done. Shouldn’t be a big problem.

    <form>
    <div id="sort-area">
    …sorting stuff…
    </div>
    <div id="search-area">
    ….search stuff….
    </div>
    </form>

    Then in the CSS you can delcare a width and a float value for both those ID’s and that should get it done for ya.

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".