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
  1. #1
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Need a code for Div

    Actually I suck with divs never had a good luck today also was doing a project of my friend and stuck in div I need 3 divs :


    1st with 100% height left floating 20% width
    2nd with 20% height aligned center with 80% width
    3rd with 20% height aligned below the 2nd div with 80% height



    I will be thankful

  • #2
    Mr.
    Mr. is offline
    Regular Coder
    Join Date
    Feb 2011
    Posts
    112
    Thanks
    8
    Thanked 4 Times in 4 Posts
    but will you thank the user for their post if you get the answer?

  • #3
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    Code:
    <!DOCTYPE html>
    <html>
    	<head>
    		<title>Homepage</title>
    		<meta charset="UTF-8"/>
    		<style type="text/css">
    			* { margin: 0; padding: 0; }
    			body {
    				font: 100%/1.28 Arial, Helvetica, sans-serif;
    				color: #444;
    			}
    			html, body {
    				height: 100%;
    			}
    			#page {
    				height: 100%;
    			}
    			#main {
    				min-height: 100%;
    			}
    			#left-panel {
    				float: left;
    				width: 20%;
    				height: 100%;
    				background-color: #AAA;
    			}
    			#main {
    				width: 80%;
    				height: 100%;
    				float: left;
    				background-color: #DDD;
    			}
    			#main #c {
    				height: 20%;
    				background-color: #CCC;
    			}
    			#main #d {
    				height: 80%;
    				background-color: #EEE;
    			}
    			.clear {
    				clear: both;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="page">
    			<div id="left-panel">
    				
    			</div>
    			<div id="main">
    				<div id="c">
    					
    				</div>
    				<div id="d">
    					
    				</div>
    			</div>
    			<div class="clear"></div>
    		</div>
    	</body>
    </html>
    if you want a more expert level fluid layout, you can download an example free!:
    http://css-tricks.com/138-the-perfec...-width-layout/
    Last edited by Sammy12; 11-14-2011 at 12:05 AM.

  • Users who have thanked Sammy12 for this post:

    AsinNetworks (11-14-2011)

  • #4
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I figured out this last night only but anyways thank you for taking out time and coding this


  •  

    Posting Permissions

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