Advanced Search

Results 1 to 5 of 5

Thread: how to do boxes in the same line with some space?

  1. #1
    Join Date
    Jan 2006
    Posts
    126
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question how to do boxes in the same line with some space?

    I have tested in Mozilla and IE my code:
    PHP Code:
    #left{
        
    floatleft;
        
    width256px;
        
    margin7px;
        
    text-aligncenter;
        
    border-width1px;
        
    border-stylesolid;
    }

    #right{
        
    position:absolute;
        
    left:295px;
        
    padding-left:7x;
        
    width256px;
        
    border-width1px;
        
    border-stylesolid;
        
    margin-left280px;

    it is fine in IE but in Mozilla is not good. Can you advise what to change?

  2. #2
    Join Date
    May 2007
    Location
    Viet Nam
    Posts
    62
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Try this:

    Code:
    #left{
        float: left;
        width: 256px;
        margin: 7px 10px 7px 7px;
        text-align: center;
        border-width: 1px;
        border-style: solid;
    }
    
    #right{
        float: left;    
        padding-left:7x;
        width: 256px;
        border-width: 1px;
        border-style: solid;
        margin-left: 20px;
    }

  3. #3
    Join Date
    Dec 2004
    Location
    UK
    Posts
    2,358
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Specifying dimensions using pixels is not usually a good thing. Font-relative units such as ems are better, at least when used in relation to text.

    An alternative to Spiritvn's twice-floated solution is to float one element (usually the left-most) and add a margin to the right. Whether that's better depends on why you want to render two elements adjacent to one another.

    It's best not to use class names like "left" and "right". Use semantic names that convey what the class represents (navigation, notes, content, etc.) not how it is rendered.
    Mike

  4. #4
    Join Date
    Jan 2006
    Posts
    126
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Code does not work.
    It will be not in the same line.

  5. #5
    Join Date
    May 2007
    Location
    Viet Nam
    Posts
    62
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by toplisek View Post
    Code does not work.
    It will be not in the same line.
    It's becoz of ur container id or class.

    If ur container id or class fixed a width smaller than the sum of two box included padding & margin sizes, it will drop down.

    2 mwinter: yep, i know px is not good than em or %, but it's just an example

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •