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 2 of 2
  1. #1
    New Coder
    Join Date
    Oct 2006
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Css Layout 3x2 not working

    Hi everyone (I'm new),
    I am trying to do a css layout, but all the tutorials I've seen are only 1 row. How do I align it so I can have 2 rows and three columns? I had two ways:
    1. Aligning everything left. That worked but when I zoomed out enough it became 6x1.
    2. This:
    Code:
    a{border: 0;}
    a:link {color: #808080;
    text-decoration: underline}
    a:visited {color: #FFFFFF;
    text-decoration: underline}
    a:hover {color: #BBBBBB;
    text-decoration:none}
    a:focus {color: #FFFFFF;
    text-decoration: underline}
    a:active {color: #FFFFFF;
    text-decoration: underline}
    #topright {
    	height:25%;
    	width:20%;
    	float:top-right;
    	border: solid 1px #FFFFFF;
    	padding-bottom:10px;
    	}
    #topcenter {
    	height:25%;
    	width:60%;
    	float:top-center;
    	border: solid 1px #FFFFFF;
    	padding-bottom:10px;
    	}
    #topleft {
    	height:25%;
    	width:20%;
    	float:top-left;
    	border: solid 1px #FFFFFF;
    	padding-bottom:10px;
    	}
    #mainright {
    	width:20%;
    	height: 75%;
    	float:bottom-right;
    	border: solid 1px #FFFFFF;
    	padding-bottom:10px;
    	}
    #maincenter {
    	width:60%;
    	height: 75%;
    	float:bottom-center;
    	border: solid 1px #FFFFFF;
    	padding-bottom:10px;
    	}
    #mainleft {
    	width:20%;
    	height: 75%;
    	float: bottom-left;
    	border: solid 1px #FFFFFF;
    	padding-bottom:10px;
    	}
    body {
    	background-color: black;
    }
    h1 {/*heading*/
    	text-align: center;
    	font-family: arial;
    	font-style: italic;
    	color: #969696;
    	font-size: 26px;
    }
    h2 {/*subheading*/
    	font-family: arial;
    	font-style: italic;
    	color: #969696;
    	font-size: 18px;
    }
    p {/*body text*/
    	font-family: arial;
    	color: #969696;
    	font-size: 16px;
    }
    .center {text-align: center;}
    .left {text-align: left;}
    h4 {/*smalltext (for news)*/
    	font-family: arial;
    	color: #969696;
    	font-size: 12px;
    }
    h5 {/*tinytext (for flash game instructions)*/
    	font-family: arial;
    	color: #969696;
    	font-size: 10px;
    }
    This made the layout a 6x1 (6 rows 1 column).
    Thanks for the help!

  • #2
    Regular Coder
    Join Date
    Oct 2006
    Posts
    181
    Thanks
    1
    Thanked 6 Times in 6 Posts
    MAYBE THIS CAN HELP YOU...

    Code:
    <html>
    <head>
    	<title>css tables</title>
    
    <style>
    #parentbox1 {
    position: relative;
    left: 150;
    top: 300;
    }
    #parentbox2 {
    position: relative;
    left: 150;
    top: 402;
    }
    #nestedbox1 {
    position: absolute;
    width: 190px;
    height: 100;
    border: solid #000000 1px;
    }
    #nestedbox2 {
    position: absolute;
    width: 190px;
    height: 100;
    left: 192px;
    border: solid #000000 1px;
    }
    #nestedbox3 {
    position: absolute;
    width: 190px;
    Height: 100;
    left: 384px;
    border: solid #000000 1px;
    }
    </style>
    </head>
    
    <body>
    
    <div id="parentbox1">
    <div id="nestedbox1">1<br></div>
    <div id="nestedbox2">2<br></div>
    <div id="nestedbox3">3<br></div>
    </div>
    <div id="parentbox2">
    <div id="nestedbox1">4<br></div>
    <div id="nestedbox2">5<br></div>
    <div id="nestedbox3">6<br></div>
    </div>
    
    </body>
    </html>


  •  

    Posting Permissions

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