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
    New Coder
    Join Date
    Mar 2004
    Location
    New Jersey
    Posts
    70
    Thanks
    2
    Thanked 1 Time in 1 Post

    This layout shouldn't be this hard...

    Can anybody tell me why trying to create this layout with CSS is be giving me so much trouble?



    I've been floating and clearing and padding and margining for hours and I just can't make it work...
    Last edited by jakerbug; 02-23-2008 at 08:10 PM.

  • #2
    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
    Give us what code you are using please.

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

  • #3
    New Coder
    Join Date
    Mar 2004
    Location
    New Jersey
    Posts
    70
    Thanks
    2
    Thanked 1 Time in 1 Post
    Works fine in IE, but not in FF...

    Code:
    <div style="width: 600px;">
    
    	<div style="width: 600px; height: 10px; background-color: red;">
    	</div>
    
    	<div style="float: left; width: 250px; background-color: blue;">
    
    		<div style="float: left; width: 125px; height: 80px; background-color: orange;">
    		</div>
    		<div style="float: left; width: 125px; height: 80px; background-color: yellow;">
    		</div>
    		
    		<div style="width: 250px; height: 220px; background-color: purple;">
    		</div>
    
    	</div>
    
    	<div style="float: right; width: 350px; height: 300px; background-color: green;">
    	</div>
    
    	<div style="width: 600px; height: 100px; background-color: violet;">
    	</div>
    
    </div>

  • #4
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,695
    Thanks
    0
    Thanked 232 Times in 227 Posts
    Hi there jakerbug,

    have a look at this example...
    Code:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <style type="text/css">
    #container {
        width:588px;
        margin:auto;
     }
    #one {
        height:16px;
        background-color:#dab95a;
     }
    #two {
        width:294px;
        height:290px;
        float:left;
     }
    #two_one {
        width:147px;
        height:145px;
        background-color:#ff01bb;
        float:left;
     }
    #two_two {
        width:147px;
        height:145px;
        background-color:#2f8ac3;
        float:left;
     }
    #two_three {
        height:145px;
        background-color:#e16434;
        clear:both;
     }
    #three {
        width:294px;
        height:290px;
        background-color:#0bff01;
        float:left;
     }
    #four {
        height:230px;
        background-color:#c9e727;
        clear:both;
     }
    </style>
    
    </head>
    <body>
    
    <div id="container">
    
    <div id="one"></div>
    
    <div id="two">
    <div id="two_one"></div>
    <div id="two_two"></div>
    <div id="two_three"></div>
    </div>
    
    <div id="three"></div>
    
    <div id="four"></div>
    
    </div>
    
    </body>
    </html>
    
    ...it should get you going again.

    coothead

  • #5
    New Coder
    Join Date
    Mar 2004
    Location
    New Jersey
    Posts
    70
    Thanks
    2
    Thanked 1 Time in 1 Post
    beautiful. i'm not too good with the whole concept of "clear" - I think that's why I couldn't get it. i knew it wasn't THAT hard.

    thanks so much!

  • #6
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,695
    Thanks
    0
    Thanked 232 Times in 227 Posts
    No problem, you're welcome.


  •  

    Posting Permissions

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