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 4 of 4

Thread: Css layout help

  1. #1
    New to the CF scene
    Join Date
    Jan 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Css layout help

    I'm creating a css layout which I want to look like this:


    Column 3: Here I want an iframe.

    I can't make this code I haven't enoguh experience. All I can get is this

    <div id="centrering">
    <div id="sidhuvud">pageheader</div>
    <div id="kolumn1"> column1:<br>
    </div>
    <div id="kolumn2"> column2:<br>
    </div>
    <div id="kolumn3">
    <p>column 3 <br>
    hmpf</p>
    </div>
    </div>

    css
    body {margin: 0; padding: 0;}
    #centrering {width: 450px; margin-right: auto; margin-left: auto;}
    #sidhuvud {background: #CC99CC; padding: 10px; border-bottom: 0px solid #000000;}
    #kolumn1 {float: left; width: 200px; padding: 10px;}
    #kolumn2 {float: left; width: 200px; padding: 10px; border-left: 0px solid #000000;}
    #kolumn3 {clear: right; justify; width: 200px; padding: 10 px; background: #cc99cc;}

    please help me, I don't understand how column three can be below column 1, and not under it.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello fluffdry,
    Have a look at this:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Revolution-Creations</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
    body {
    	margin: 0;
    	padding: 0;
    }
    #centrering {
    	width: 450px; 
    	margin: 0 auto;
    	overflow: hidden;
    	background-color: #66FF00;
    }
    #sidhuvud {
    	padding: 10px;
    	border-bottom: 0px solid #000000;
    	background-color: #6666FF;
    }
    #kolumn1 {
    	float: left;
    	width: 200px;
    	padding: 10px;
    	background-color: #000000;
    }
    #kolumn2 {
    	margin: 0 0 0 200px;
    	padding: 10px;
    }
    #kolumn3 {
    	float: left;
    	width: 200px;
    	padding: 10px;
    	background-color: #CCCCCC;
    }
    </style>
    </head>
    <body>
    <div id="centrering">
    <div id="sidhuvud">pageheader</div>
    <div id="kolumn1"> column1:<br />
    </div>
    <div id="kolumn2"> column2:<br />
    </div>
    <div id="kolumn3"> 
    <p>column 3 <br />
    hmpf</p>
    </div>
    </div>
    </body>
    </html>
    Maybe now you can get your iframe working.
    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
    Jan 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thank you it works in the size you gave me but not if I make it bigger
    If I make the centrering width 688px
    the column1 width 505 px
    column 3 width 505 px
    and the frame in column3 505px too.

    but when the width is changed to this, the third column just won't put the frame next to column 2, but below it. What's the problem?

    I don't know how to solve this!

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    This will help figure out widths: http://www.w3.org/TR/REC-CSS2/box.html
    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


  •  

    Posting Permissions

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