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.
Page 1 of 3 123 LastLast
Results 1 to 15 of 34
  1. #1
    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

    Exclamation Why is this simple piece of code not working?

    I am playing around with this to try to get an understanding of floats.
    I know that I have many references in my Sources program, but obviously, I am missing something.

    Code:
    <!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <title>Enter_Title_Here</title>
    <style type="text/css">
    
    #left{
    width:20&#37;;
    height:30%;
    margin:5px;
    color:white;
    background:red;
    float:left;
    }
    
    #mid{
    width:20%;
    height:30%;
    margin:5px;
    color:white;
    background:blue;
    margin-left:0;
    margin-right:0;
    
    }
    
    #right{
    width:20%;
    height:30%;
    margin:5px;
    color:white;
    background:green;
    floatright;
    }
    
    </style>
    </head>
    <body>
    <DIV id="left">left</div>
    <DIV id="mid">mid</DIV>
    <div id="right">right</DIV>
    
    </BODY>
    </HTML>
    The purpose is obvious.

    I have played around with the css and the html. I am completely flummoxed. I just cannot see what does which. Enlightenment desperately needed.

    Not just a code correction, but an explanation is what I need.
    I am fed-up with just copying other peoples layouts. Please.

    Frank
    Last edited by effpeetee; 07-08-2008 at 02:09 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #2
    New Coder
    Join Date
    Jun 2008
    Posts
    67
    Thanks
    3
    Thanked 13 Times in 13 Posts
    Code:
    floatright;
    should be

    Code:
    float: right;
    so im presuming that your problem is the right hand float

    also your div order should be

    Code:
    <DIV id="left">left</div>
    <div id="right">right</DIV>
    <DIV id="mid">mid</DIV>
    Your right div coming after the mid div will put the right div on a new line. Floated items should be placed before any non floats to achieve the layout your after

    [EDIT] Sorry for the poor explanation! I know what i mean but putting it into words.... well thats another story

  • Users who have thanked WyrmFyre for this post:

    effpeetee (07-08-2008)

  • #3
    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
    Sorry for the poor explanation! I know what i mean but putting it into words.... well thats another story
    WyrmFyre,

    Thanks a lot. Your explanation is fine. It has given me information that I needed.
    The missing colon is due to my poor eyesight.

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

  • #4
    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
    Your doctype also isn't complete. This would put IE into quirksmode causing some CSS not to work properly.
    Last edited by _Aerospace_Eng_; 07-08-2008 at 02:55 PM.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    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 _Aerospace_Eng_ View Post
    Your doctype also isn't complete. This would put IE into quirksmode causing some CSS not to work properly.
    Thanks Aero. It was the default supplied by my editor. I didn't think to check it.
    I am still having trouble centring the mid div. Do you have any suggestions for understanding this very simple piece of code and how to play with it.

    I begin to think I understand it all and then realise that I still have a way to go.

    Perhaps I'd better fold my tent and ---

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

  • #6
    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
    Just use auto on the mid div.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Enter_Title_Here</title>
    <style type="text/css">
    html, body {
    margin:0;
    padding:0;
    background:#FFF;
    }
    
    #left {
    width:20&#37;;
    height:30%;
    margin:5px;
    color:white;
    background:red;
    float:left;
    }
    
    #mid {
    width:20%;
    height:30%;
    margin:5px auto;
    color:white;
    background:blue;
    }
    
    #right {
    width:20%;
    height:30%;
    margin:5px;
    color:white;
    background:green;
    float:right;
    }
    </style>
    </head>
    <body>
    <div id="container">
    	<div id="left">left</div>
    	<div id="right">right</div>
    	<div id="mid">mid</div>
    </div>
    </body>
    </html>
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #7
    Regular Coder Donkey's Avatar
    Join Date
    Sep 2003
    Location
    Blackfield UK
    Posts
    312
    Thanks
    1
    Thanked 36 Times in 36 Posts
    I noticed that this code positions the left and right divs slightly below the mid div. I think that this is because you are giving each a top margin of 5px and the left and right divs are also inheriting the 5% from the mid div.

    My solution would be to add a spacer div above the 3 with a 5px top margin on the spacer div. Then set the top margin on the other three divs to zero.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    
    <html>
    <head>
    <title>Enter_Title_Here</title>
    <style type="text/css">
    
    *
    {
    padding: 0;
    margin: 0;
    border: none;
    }
    .spacer{
    margin-top: 5px;
    clear: both !important;
    }
    
    #left{
    width:30%;
    height:30%;
    margin:0 5px;
    color:white;
    background:red;
    float:left;
    }
    
    #mid{
    width:30%;
    height:30%;
    margin: 0 auto;
    color:white;
    background:blue;
    }
    
    #right{
    width:30%;
    height:30%;
    margin:0 5px;
    color:white;
    background:green;
    float: right;
    }
    
    </style>
    </head>
    <body>
    <div class="spacer">&nbsp;</div>
    
    <div id="left">left</div>
    <div id="right">right</div>
    <div id="mid">mid</div>
    </body>
    </html>
    " 90% of everything is crud" - Theodore Sturgeon
    Filthy Beast - a 60's Rock Band

  • #8
    Senior Coder jerry62704's Avatar
    Join Date
    Oct 2007
    Location
    Springfield, IL
    Posts
    1,100
    Thanks
    13
    Thanked 87 Times in 87 Posts
    Shouldn't the middle div have a float on it?
    .
    .
    ...and gladly would he learn and gladly teach

    Visit www.LiberalsWin.com for humor and the unique Bush/Obama Approval Polls

  • #9
    New Coder
    Join Date
    Jun 2008
    Posts
    67
    Thanks
    3
    Thanked 13 Times in 13 Posts
    Quote Originally Posted by jerry62704 View Post
    Shouldn't the middle div have a float on it?
    No because you want the middle div to appear @in sequence@ which would be in between the other floats

  • #10
    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
    Thank you all for your input.
    Edited: 9th July 2008
    This is what I landed up with. I added the height:100&#37; ;and width:100%; to get the height on the divs.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Enter_Title_Here</title>
    <style type="text/css">
    * {
    margin:0;
    padding:0;
    }
    
    html, body{
    background:#FFF;
    Height:100%;
    width:100%;
    }
    
    #left {
    width:20%;
    min-height:30%;
    height:auto !important;
    height:30%;
    margin:5px;
    color:white;
    background:red;
    float:left;
    }
    
    #mid {
    width:20%;
    min-height:30%;
    height:auto !important;
    height:30%;
    margin:5px auto;
    color:white;
    background:blue;
    }
    
    #right {
    width:20%;
    min-height:30%;
    height:auto !important;
    height:30%;
    margin:5px;
    color:white;
    background:green;
    float:right;
    }
    </style>
    </head>
    <body>
    <div id="container">
    	<div id="left"></div>
    	<div id="right"></div>
    	<div id="mid"></div>
    </div>
    </body>
    </html>
    Frank
    Last edited by effpeetee; 07-09-2008 at 03:14 PM. Reason: Updated the code.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #11
    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
    You need to a height on the container as well for the heights to work though setting a height probably isn't the best thing as content can always be larger than the set height. It would be better to use min-height and find a hack for IE6 if you care about it.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #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
    My thanks to everyone. I am now much better informed.

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

  • #13
    Regular Coder FWDrew's Avatar
    Join Date
    Apr 2008
    Location
    Missouri
    Posts
    380
    Thanks
    38
    Thanked 45 Times in 43 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    It would be better to use min-height and find a hack for IE6 if you care about it.
    Hi Frank

    Just in case you were looking for a min-height hack as _Aero suggested:
    Code:
    #Box {
         min-height:300px;
         height:auto !important;
         height:300px; /*Be sure this matches the min-height pixels above*/
    }
    Best Regards,

    Drew
    Dev-Tips.com || Employee at the Envato Network || My Portfolio

  • #14
    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
    Thanks Drew.

    All knowledge is good knowledge when mixed with wisdom.

    The result is here.

    Frank
    Last edited by effpeetee; 07-09-2008 at 03:21 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #15
    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 adityaj123 View Post
    For further reference visit http://www.*************
    Why? There's nothing there of any use.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.


  •  
    Page 1 of 3 123 LastLast

    Posting Permissions

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