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 6 of 6
  1. #1
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts

    Why Won't My Divs Float and why Can't I add a Border?

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
    
    <html>
    <head>
    <title>Welcome Blinding Horror's Client Area!</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link href="../css/style_master.css" rel="stylesheet" type="text/css">
    </head>
    <body>
    <div id="index">
    <div id="masthead">
    </div>
    
    <div id="Menuside">
    <a href="something">link 1</a>
    </div>
    
    <div id="thumbplate">
    
    <a href="display.htm"><img src="../images/001.jpg"></a>
    
    </div>
    
    <div id="footer">
    <h5>Footer</h5>
    </div>
    
    
    </div>
    </body>
    </html>
    Code:
    *{margin:0;padding:0;}
    body{margin:0;padding:0;min-width:450px;background-color:#444;font-size:85%;font-family:Arial, Helvetica, Sans serif;color:#000;}
    /*structure---------------*/
    #index, #display{text-align:center;width:85%;margin-left:auto;margin-right:auto;padding:0, 100px, 100px, 100px;border:1px solid gray}
    #masthead{width:100%;height:85px;margin:0 0 0 0;border:1px solid green}
    #thumbplate{float:left;text-align:left;border:1px dashed black}
    #thumbplate img{width:65px;height:65px;border:10px solid gray;margin:10px 25px 10px 25px}
    #menuside{float:left;border:1px dashed #fff;width:200px;padding:22px;background-color:#000}
    #display img{border:10px solid gray;margin-left:auto;margin-right:auto;margin-bottom:25px}
    .double_emphasis{font-weight:bolder;text-decoration:underline}
    .single_emphasis{font-weight:bolder}
    #footer{clear:both;border:1px solid blue;width:100%;height:44px}
    #footer h1{margin-top:2em;margin-bottom:2em;border:2px solid #000;width:52%;margin-left:23%;font-size:0.9em;text-align:center}
    This won't work in either browser (Moz. or IE).

    God, I HATE CSS!!!

    Please can anyone help? Thanks.

  • #2
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by Doctor_Varney View Post
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
    
    <html>
    <head>
    <title>Welcome Blinding Horror's Client Area!</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link href="../css/style_master.css" rel="stylesheet" type="text/css">
    </head>
    <body>
    <div id="index">
    <div id="masthead">
    </div>
    
    <div id="Menuside">
    <a href="something">link 1</a>
    </div>
    
    <div id="thumbplate">
    
    <a href="display.htm"><img src="../images/001.jpg"></a>
    
    </div>
    
    <div id="footer">
    <h5>Footer</h5>
    </div>
    
    
    </div>
    </body>
    </html>
    Code:
    *{margin:0;padding:0;}
    body{margin:0;padding:0;min-width:450px;background-color:#444;font-size:85%;font-family:Arial, Helvetica, Sans serif;color:#000;}
    /*structure---------------*/
    #index, #display{text-align:center;width:85%;margin-left:auto;margin-right:auto;padding:0, 100px, 100px, 100px;border:1px solid gray}
    #masthead{width:100%;height:85px;margin:0 0 0 0;border:1px solid green}
    #thumbplate{float:left;text-align:left;border:1px dashed black}
    #thumbplate img{width:65px;height:65px;border:10px solid gray;margin:10px 25px 10px 25px}
    #menuside{float:left;border:1px dashed #fff;width:200px;padding:22px;background-color:#000}
    #display img{border:10px solid gray;margin-left:auto;margin-right:auto;margin-bottom:25px}
    .double_emphasis{font-weight:bolder;text-decoration:underline}
    .single_emphasis{font-weight:bolder}
    #footer{clear:both;border:1px solid blue;width:100%;height:44px}
    #footer h1{margin-top:2em;margin-bottom:2em;border:2px solid #000;width:52%;margin-left:23%;font-size:0.9em;text-align:center}
    This won't work in either browser (Moz. or IE).

    God, I HATE CSS!!!

    Please can anyone help? Thanks.
    It looks like a simple mismatch on caps vs. non-caps for your ID. Make the highlighted parts the same case and you should be fine.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • Users who have thanked Rowsdower! for this post:

    Doctor_Varney (01-08-2010)

  • #3
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    Arrrgghhh!!!

    Bloody hell! Well spotted, that man!

    Thanks... (now I feel stupid)...

  • #4
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    One other thing...

    I was taught initially by someone who insisted that when floating left, you should put the leftmost div below the one intended for the right. Apart from this making no sense, it just doesn't work. The mystery is: I used to actually do it as instructed and it did, but now it doesn't...?!

    So how DO you float correctly?

  • #5
    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
    It would work if you had a fixed width layout and you had a width given to your #thumbplate however because you are using a fluid layout you need to remove float:left from your thumbplate and give it a left margin that is larger than your menuside which in this case is 200px + 44px (22px on each side plus the width).
    Code:
    #thumbplate{text-align:left;border:1px dashed black;margin-left:244px;}
    This will allow the #thumbplate div to resize according to the width of the browser. The menu will be a fixed width.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • Users who have thanked _Aerospace_Eng_ for this post:

    Doctor_Varney (01-08-2010)

  • #6
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    Beautiful, thanks!

    Will it be okay to leave as is, because I think the fluid layout will be useful in this design...?

    Dr. V


  •  

    Posting Permissions

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