Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Jul 2005
    Location
    Northfield, MA
    Posts
    37
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS aligning problem.

    I feel like a noob asking this (I guess I am), but I have a problem aligning these two div's on my site. The site is here. Basically, I need the two boxes that say "THIS IS TEXT" and "More text." on the right of the main div, and the navigation on the left. I already tried using floats, but that made them float out of the main part and the footer would come up, and it would all look ugly. So anyway, here is the css:

    Code:
    * {
    margin:0;
    padding:0;
    }
    
    html, body {
    height:100%;
    background-image:url(bg.jpg);
    background-repeat:repeat-x;
    font-family:Verdana, "Copperplate Gothic Light", Rockwell, Georgia, sans-serif;
    }
    
    a {
    border:0;
    color:#;
    text-decoration:none;
    font-size:12px;
    font-family:Verdana, "Copperplate Gothic Light", Rockwell, Georgia, sans-serif;
    }
    
    a:hover {
    color:#;
    cursor:default;
    }
    
    #container {
    background-color:#FFFFFF;
    border-bottom:0px;
    border-top:0px;
    border-right:1px solid #000;
    border-left:1px solid #000;
    width:650px;
    margin: 0 auto 0 auto;
    }
    
    #header {
    text-align:center;
    color: #FFFFFF;
    font-weight:bolder;
    font-size:36px;
    line-height:100px;
    border:0px;
    width:650px;
    height:100px;
    margin: auto auto auto auto;
    background-image:url(header.jpg);
    background-repeat:repeat-x;
    border-bottom:1px solid #000;
    }
    
    #nav {
    padding:10px;
    border:1px solid #000;
    width:150px;
    }
    
    #content_container {
    width:630px;
    border:1px solid #000;
    padding:10px;
    }
    
    #content {
    border:1px solid #000;
    width:450px;
    }
    
    #footer {
    text-align:center;
    border:1px solid #000;
    width:640px;
    height:25px;
    margin: auto auto auto auto;
    line-height:25px;
    }

    Thank you!
    Last edited by lobsterninja; 11-25-2005 at 07:55 AM.

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Use this for your CSS
    Code:
    * {
    margin:0;
    padding:0;
    }
    
    html, body {
    height:100%;
    background-image:url(bg.jpg);
    background-repeat:repeat-x;
    font-family:Verdana, "Copperplate Gothic Light", Rockwell, Georgia, sans-serif;
    }
    
    a {
    border:0;
    color:#;
    text-decoration:none;
    font-size:12px;
    font-family:Verdana, "Copperplate Gothic Light", Rockwell, Georgia, sans-serif;
    }
    
    a:hover {
    color:#;
    cursor:default;
    }
    
    #container {
    background-color:#FFFFFF;
    border-bottom:0px;
    border-top:0px;
    border-right:1px solid #000;
    border-left:1px solid #000;
    width:650px;
    margin: 0 auto 0 auto;
    }
    
    #header {
    text-align:center;
    color: #FFFFFF;
    font-weight:bolder;
    font-size:36px;
    line-height:100px;
    border:0px;
    height:100px;
    margin: auto auto auto auto;
    background-image:url(header.jpg);
    background-repeat:repeat-x;
    border-bottom:1px solid #000;
    }
    
    #nav {
    padding:10px;
    border:1px solid #000;
    width:150px;
    float:left;
    }
    
    #content_container {
    width:628px;
    border:1px solid #000;
    padding:10px;
    }
    
    #content {
    border:1px solid #000;
    margin-left:175px;
    }
    
    * html #content {
    margin-left:172px;
    }
    
    #footer {
    text-align:center;
    border:1px solid #000;
    height:25px;
    margin: auto;
    line-height:25px;
    clear:both;
    }
    Compare it to your old CSS, ask any questions you may have. Also you can only use an ID one time, you have used it twice. If you must use the same styles use a class instead.


  •  

    Posting Permissions

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