SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot Fiska's Avatar
    Join Date
    Jul 2004
    Location
    Dardania - Ancient Illyria
    Posts
    180
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question need help with this

    I'm currently working on a project, but I got stucked a little bit in the bottom section of the web page that Im currently doing it without tables . but a problem showed up, I don't beleive its a big deal for the experts here, so if you guys may help me with this, so here is the code i worte
    HTML:
    ==========
    <!-- bottom--><div id="bottom">
    <div class="bott_left"> 2004 The Forum</div><div class="bott_right"></div>
    </div><!-- end bottom-->
    CSS:
    ==========
    #bottom {
    width: 650px;
    border-color: #ffffff;
    border-width: 5px;
    border-style: solid;}

    .bott_left {
    height : 18px;
    width : 120px;
    background-color : #C0C0C0;
    color : #000000;
    padding-left : 17px;}

    .bott_right {
    display : block;
    height : 18px;
    width : 515px;
    background-color : #FF0000;
    padding-left : 17px;
    position: inherit;
    width: 515px;}
    ==================================
    Here i've attachted two gif snap shots the correct one (right.gif) and the wrong one (wrong.gif). In urgent need for help,
    thank you

    ~~fiska ~~
    Attached Images Attached Images

  2. #2
    SitePoint Zealot
    Join Date
    Jul 2003
    Location
    Maryland
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    check the padding and such. Just an idea.
    Michael D'Angelo
    mdangelo@mdangelo.com
    Free Link Popularity, www.expirednic.com
    Macintosh Webmaster Information, www.webmastermac.com

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,374
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You need to float the elements or absolutley place them otherwise they will just follow on another line.

    Code:
    #bottom {
    width: 650px;
    border-color: #ffffff;
    border-width: 5px;
    border-style: solid;
    }
    * html #bottom {width:660px;w\idth:650px}/* box model hack assuming standards mode (e.g. full doctype with uri)*/
    .bott_left {
    height : 18px;
    width : 120px;
    background-color : #C0C0C0;
    color : #000000;
    padding-left : 17px;
    float:left;
    }
    * html .bott_left {width:137px;w\idth:120px}/* box model hack assuming standards mode (e.g. full doctype with uri)*/
    .bott_right {
    height : 18px;
    width : 496px;
    background-color : #FF0000;
    padding-left : 17px;
    float:right;
    }
    * html .bott_right {width:513px;w\idth:496px}/* box model hack assuming standards mode (e.g. full doctype with uri)*/
    The box model hack is for ie5 and ie5.5. and assumes you are using a full doctype with uri. If you are not using a full doctype then delete the last bit of the hack with the backslash.

    Paul

  4. #4
    SitePoint Zealot Fiska's Avatar
    Join Date
    Jul 2004
    Location
    Dardania - Ancient Illyria
    Posts
    180
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks Paul, you're great!!!!


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
  •