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 13 of 13
  1. #1
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    More Help Please

    I can't seem to see why my 2nd content appears below my first?
    How can I make it so they float side by side?

    Coding:



    <style>
    html {height:100%;}
    body {
    margin:0;
    padding:0;

    height:100%;
    background-color:#ffffff;
    }

    #wrap {
    background:url(http://i54.tinypic.com/309j1tw.png) repeat-y;
    min-height:100%;
    width:700px;
    margin:auto;
    position:relative;
    }
    * html #wrap {height:100%}


    #left {
    float:left;
    width:200px;
    text-align:center;
    }
    #main {
    position:relative;
    margin-left:200px;
    }



    p, td
    {font-family: Century Gothic;
    font-size: 11px;
    font-weight: 500;
    color: #FFFFCC;
    text-decoration: none;}



    b
    {font-size: 12px;
    text-decoration: bold;
    margin: 0px;
    font-weight: 650;
    color: #999966;
    text-align: left;}

    i
    {color: #333333;
    font-style: italic;}

    u
    {text-decoration: underlined;
    color: #000000;
    font-size: 11px;
    }


    s
    {text-decoration: strikethrough;
    colour: #333333;
    font-size: 12px;
    }

    h1
    {
    font-size:19px;
    line-height:18px;
    text-align:right;
    background-color: 999966;
    border-bottom: 1px dotted #330000;
    color:#333333;
    font-family:Century Gothic;
    text-decoration: none;}

    h2
    {
    font-size:12px;
    line-height:13px;
    text-align:right;
    background-color: CCCC99;
    border-bottom: 1px dashed #333333;
    border-top: 1px dashed #333333;
    color:#000000;
    font-family:Century Gothic;
    text-decoration: none;}

    h3
    {
    font-size:10px;
    line-height:11px;
    text-align:left;
    background-color: ;
    border-bottom: 1px dashed #999966;
    color:#000000;
    font-family:Arial;
    text-decoration: none;}


    a:link,
    {font-family: Century Gothic;
    font-size: 10px;
    color:#000000;
    text-decoration:none;
    letter-spacing: 1px;}

    a:hover,
    {font-family: Century Gothic;
    font-size: 10px;
    color: #333333;
    letter-spacing: 1px;}




    </style>




    <div id="wrap">
    <div style="position: relative; top:100px; left:0px; width:145px; height:600px; overflow:auto;">
    <h2>Home</h2>
    <a href=""><h3>Home Page</h3></a>
    <br>
    <h2>Club Layouts</h2>
    <h3>Example 1</h3>
    <h3>Example 2</h3>
    <h3>Information</h3><br>
    <h2>Site Layouts</h2>
    <h3>Example 1</h3>
    <h3>Example 2</h3>
    <h3>Information</h3><br>
    <h2>Siggys</h2>
    <h3>Example 1</h3>
    <h3>Example 2</h3>
    <h3>Information</h3>

    </div>
    </div>
    <div id="inner-wrap">
    <div id="wrap">
    <div style="position: relative; top:100px; left:165px; width:465px; height:600px; overflow:auto;">

    <center>
    <img src=http://i56.tinypic.com/258wfic.png
    >
    </center>

    <h1> Home </h1>
    <b>Hello<br>
    </b>



    </div>
    </div>
    </div>

  • #2
    New to the CF scene
    Join Date
    Apr 2011
    Location
    Flamstead
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I think it is because <h2> is a block element and by default includes a CR before and after - see http://www.webdesignfromscratch.com/...ck-and-inline/

    Paul

  • #3
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I don't think this is it, even removing the h2 or making it inline the second content remains below the first, futher down the page
    any other thoughts?

  • #4
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by Louu View Post
    I don't think this is it, even removing the h2 or making it inline the second content remains below the first, futher down the page
    any other thoughts?
    use [ code] and [ /code] tags, without spaces, when you post code, please. You can edit your previous post to fix this.

    the (x)html markup is invalid, at first look there are two elements with same id.
    i don't know what doctype you use but probably center is depreciated, css is probably invalid too, i seen a typo 'underlined' instead of underline.
    probably is better to validate both first.

    best regards

  • #5
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks Will Change That, And Be Sure To Use [code] tags in future.
    can anyone tell me why the content is appearing below, and not side by side.

  • #6
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    I have corrected several things. My eyesight is too poor to do more.
    I have put the result here.

    Frank

    Much useful stuff HERE.
    Use the Search facility. Single words often work best.
    Last edited by effpeetee; 04-16-2011 at 07:05 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #7
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    This is the code so far. Still needs attention.

    Frank

    Code:
    !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html>
    
    <head>
    <title></title>
    <style type ="text/css">
    html {height:100%;}
    body {
    margin:0;
    padding:0;
    height:100%;
    background-color:#ffffff;
    }
    
    #wrap {
    background:url(http://i54.tinypic.com/309j1tw.png) repeat-y;
    min-height:100%;
    width:700px;
    margin:auto;
    position:relative;
    }
    * html #wrap {height:100%}
    
    
    #left {
    float:left;
    width:200px;
    text-align:center;
    }
    #main {
    position:relative;
    margin-left:200px;
    }
    
    
    
    p, td
    {font-family: Century Gothic;
    font-size: 11px;
    font-weight: 500;
    color: #FFFFCC;text-decoration: none;}
    
    
    
    b
    {font-size: 12px;
    text-decoration: bold;
    margin: 0px;
    font-weight: 600;
    color: #999966;
    text-align: left;}
    
    i
    {color: #333333;
    font-style: italic;}
    
    u
    {text-decoration: underline;
    color: #000000;
    font-size: 11px;
    }
    
    
    s
    {text-decoration:line-through;
    colour: #333333;
    font-size: 12px;
    }
    
    h1
    {
    font-size:19px;
    line-height:18px;
    text-align:right;
    background-color: #999966;
    border-bottom: 1px dotted #330000;
    color:#333333;
    font-family:Century Gothic;
    text-decoration: none;}
    
    h2
    {
    font-size:12px;
    line-height:13px;
    text-align:right;
    background-color: #CCCC99;
    border-bottom: 1px dashed #333333;
    border-top: 1px dashed #333333;
    color:#000000;
    font-family:Century Gothic;
    text-decoration: none;}
    
    h3
    {
    font-size:10px;
    line-height:11px;
    text-align:left;
    background-color:#cccc99 ;
    border-bottom: 1px dashed #999966;
    color:#000000;
    font-family:Arial;
    text-decoration: none;}
    
    
    a:link,
    {font-family: Century Gothic;
    font-size: 10px;
    color:#000000;
    text-decoration:none;
    letter-spacing: 1px;}
    
    a:hover,
    {font-family: Century Gothic;
    font-size: 10px;
    color: #333333;
    letter-spacing: 1px;}
    
    
    
    
    </style>
    
    </head>
    
    <body>
    
    <!-- page content goes here -->
    
    <div id="wrap">
    <div style="position: relative; top:100px; left:0px; width:145px; height:600px; overflow:auto;">
    <h2>Home</h2>
    <a href=""><h3>Home Page</h3></a>
    <br>
    <h2>Club Layouts</h2>
    <h3>Example 1</h3>
    <h3>Example 2</h3>
    <h3>Information</h3><br>
    <h2>Site Layouts</h2>
    <h3>Example 1</h3>
    <h3>Example 2</h3>
    <h3>Information</h3><br>
    <h2>Siggys</h2>
    <h3>Example 1</h3>
    <h3>Example 2</h3>
    <h3>Information</h3>
    
    </div>
    </div>
    <div id="inner-wrap">
    <div id="wrap">
    <div style="position: relative; top:100px; left:165px; width:465px; height:600px; overflow:auto;">
    
    <center>
    <img src=http://i56.tinypic.com/258wfic.png
    >
    </center>
    
    <h1> Home </h1>
    <b>Hello<br>
    </b>
    
    
    
    </div>
    </div>
    </div>
    </body>
    </html>
    Last edited by effpeetee; 04-16-2011 at 06:51 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #8
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks, But Its still below not side by side...:/

  • #9
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Quote Originally Posted by Louu View Post
    Thanks, But Its still below not side by side...:/
    They are side by side on my PC.
    What screen resolution are you using.

    Frank
    Last edited by effpeetee; 04-17-2011 at 10:55 AM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #10
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here is a print screen of what I am seeing
    http://i54.tinypic.com/260v5ex.jpg

    screen resolution 1280 by 800

  • #11
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,862
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    If you are trying to make column based layout, I'd recommend you to learn it from tutorials like http://bonrouge.com/2c-hf-fixed.php
    Last edited by abduraooft; 04-18-2011 at 09:21 AM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #12
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    I obviously mis-understood you Louu.
    abduraooft is right though. Better to use the resource he gives you.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #13
    New to the CF scene
    Join Date
    Apr 2011
    Location
    texas
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well great job done dude


  •  

    Tags for this Thread

    Posting Permissions

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