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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Feb 2009
    Location
    Ocala, FL (USA)
    Posts
    6
    Thanks
    0
    Thanked 1 Time in 1 Post

    Can't get section to float next to item, keeps moving under

    Hey Coding Community,

    I can't seem to get this section to float correctly on my website. I have three items:
    - A vertical Navigation box.
    - A content section with text
    - A vertical picture about 500 px tall.

    I want the navigation box on the left with the picture floating to the left and beneath it, and then I want the content to run alongside both of those with the content's top flush with the top of the navigation box.

    link

    All I'm trying to do is get the top of the content in-line with the top of the navigation.

    Thanks,
    Tim

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello tharden3,
    Have a look at this for a start
    Code:
    html, body {
    background: #dedede url() repeat;
    font : 100%/1.4 Helvetica, Arial, sans-serif;
    color : #000;
    }
    * {
    margin : 0;
    padding : 0; 
    }
    p{ margin : 0 25px 10px 25px;}
    .slideshow{ float: right; text-align: right; border: solid 2px #556B2F; margin-right: 4px; margin-left: 20px;}
    #all {font: 1em; width: 920px; background-color: #6E8B3D; margin: 0 auto; overflow : hidden;text-align: left; border-left: solid 8px; border-right: solid 8px; border-color: #a3a3a3;}
    #all:after {content : '.';display : block;height : 0;clear : both;visibility : hidden;}
    #all {display : inline-block;}
    #all {display : block;}
    #titlebox{ background-color: white; width: 877px; height: 185px; border: #556B2F solid 3px; float: left; margin-top: 20px; margin-left: 10px; margin-bottom: 3px; background-image: url(HeaderHybrid.png);}
    
    #titletxt{color: black; font : 170%/1.4 arial;margin-left: 45%; margin-top: 65px; font: 130%;}
    
    
    #navcontainer { 
    width: 180px; 
    float: left; 
    margin: 20px 0 0 40px;
    display:inline; /*fixes IE6 double margin bug*/
    }
    .clearleft { 
    float: left; 
    clear: left;
    margin-left: 40px;
    display: inline;
    }
    .content{ 
    background: #fffaf0 url(sectionhead1_no_background.png) no-repeat; 
    width: 600px; 
    border: #556B2F solid 3px; 
    margin: 310px 0 0 290px;
    } 
    
    
    #sectiontxt{font: 120%/1.4 BankGothic Md BT; padding-bottom: 50px; padding-top: 15px; padding-left: 20px;}
    .horizontalNavText{/*font : 100%/1.4 Arial bold*/; float: left;margin-bottom: 5px; margin-top: 5px; margin-left: 10px; margin-right: 450px; color: white; text-decoration: none;}
    .links2{ font: bold 1em/1.3 arial white; color: white; text-decoration: none;}
    .navlinksText{text-decoration: none; color: #f9ffff; margin-top: 0px; margin-left: 0px; }
    .navlinks a{ float: left; border: none; text-decoration: none; width: 150px; height: 25px; background-color: #499aee; padding: 1px;}
    .navlinks a:hover{background-color: #0066cd;}
    .navlinks{float: left; margin-top: 3px; list-style: none; font:  1em/2 "arial rounded mt bold"; margin-left: 0px;}
    .validate{ float: right; border: none;}
    .htmldog{ float: right; border: none; margin-right: 0px;}
    .all{margin-top: /*-25px*/25px; text-align:left; background-color:;} 
    
    #logo1{float: left;}
    #moveup{text-align: center;}
    #info{font : 100%/.6 Helvetica, Arial, sans-serif; color: black;}
    #city{float: right;}
    img{ border-style: none;}
    
    
    
    
    
    
    * html .all {overflow-y: hidden;}
    * html #titlebox, 
    * html .navigation, 
    * html .horizontalNavText, 
    * html .navlinks  {                                 
     display: inline;
    }
    
    
    
    dl, dt, dd, ul, li {
    margin: 0;
    padding: 0;
    list-style-type: none;
    }
    
    
    #menu dt {
    cursor: pointer;
    background: #fffaf0;
    height: 20px;
    line-height: 20px;
    margin: 2px 0;
    border: 3px solid #556B2F;
    text-align: center;
    font-weight: bold;
    }
    
    #menu dd {
    position: absolute;
    z-index: 100;
    left: 8em;
    margin-top: -1.4em;
    width: 10em;
    background: #fffaf0;
    border: 3px solid #556B2F ;
    }
    
    #menu ul {
    padding: 2px;
    }
    #menu li {
    text-align: center;
    font-size: 85%;
    height: 18px;
    line-height: 18px;
    }
    #menu li a, #menu dt a {
    color: #000;
    text-decoration: none;
    display: block;
    }
    
    #menu li a:hover {
    text-decoration: underline;
    }
    
    
    #mentions {
    font-family: verdana, arial, sans-serif;
    position: absolute;
    bottom : 200px;
    left : 10px;
    color: #000;
    background-color: #ddd;
    }
    #mentions a {text-decoration: none;
    color: #222;
    }
    #mentions a:hover{text-decoration: underline;
    }

    I think I highlighted the major changes in red. I did delete and consolidate a lot so you should compare this to the original pretty closely.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New to the CF scene
    Join Date
    Feb 2009
    Location
    Ocala, FL (USA)
    Posts
    6
    Thanks
    0
    Thanked 1 Time in 1 Post
    Thanks for the help, I'll get right on changing this and fixing my other bugs too.


  •  

    Posting Permissions

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