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
    SMC
    SMC is offline
    New Coder
    Join Date
    Jun 2007
    Location
    Orlando, FL
    Posts
    60
    Thanks
    5
    Thanked 2 Times in 2 Posts

    Exclamation Creating Two column webpage with CSS

    Hello everyone.

    Now I can probably make this layout with Tables much easier but it would take forever to load and be unclean code, so, here we go.

    I'm having difficulty making a very simple layout. The problem is I need it to be kind of like a frame, but it is going to be a wrapper style. Here is an example image:


    http://img526.imageshack.us/img526/4102/examplelk1.jpg

    Now when I try this all sorts of funky things happen. Anywhere from a gap opening above the header, to the left menu not stretching down. I could use any tips you guys (and girls) can offer on how to make this, I really think I'm just making it much harder than it has to be.

    Thanks!!!


    PS: I've posted the CSS so you can see where my head is at:

    Code:
    body {
    
    	background-color: #000000;
    	Color: #FFFFFF;
    	Font-family: Arial, Helvetica, sans-serif;
    	Font-size: 14px;
    	margin-top: 0px;
    	margin-left: 0px;
    	margin-right: 0px;
    	
    }
    
    .header-left {
    
    	background-image: url( '../images/header_left.jpg' );
    	background-repeat: no-repeat;
    	width: 600px;
    	height: 155px;
    	position: relative;
    	float: left;
    	
    }
    
    .header-repeat {
    
    	background-image: url( '../images/repeat.jpg' );
    	background-repeat: repeat-x;
    	width: 100%;
    	height: 155px;
    	float: left;
    	
    }
    
    .left-nav {
    
    	background-image: url( '../images/nav/wood_repeat.jpg' );
    	background-repeat: repeat-y;
    	width: 200px;
    	height: 100%;
    	float: left;
    	margin: 0px;
    	margin-right: 20px;
    
    }
    
    .bottom-nav {
    
    	background-image: url( '../images/nav/bottom_nav.jpg' );
    	margin: 0px;
    	width: 200px;
    	height: 25px;
    	
    }
    
    .nav-content {
    
    	margin: 10px;
    	
    }
    
    .content {
    
    	margin: 20px;
    	
    }
    
    /* AD Divs */
    
    .a125x125 {
    
    	width: 125px;
    	height: 125px;
    	overflow: hidden;
    	
    }
    
    /* TEXT CSS */
    
    .nav-section {
    
    	font-weight: bold;
    	font-size: 14px;
    	Color: #FFFFFF;
    	
    }
    
    .nav-links {
    
    	line-height: 20px;
    	font-size: 12px;
    	margin-top: 5px;
    	margin-left: 30px;
    	
    }
    
    .nav-link:link, .nav-link:visited {
    
    	Color: #FFFFFF;
    	font-weight: normal;
    	text-decoration: none;
    	
    }
    
    .nav-link:hover {
    
    	Color: #FFFFFF;
    	font-weight: normal;
    	text-decoration: underline;
    	
    }
    
    .align-center {
    
    	width: 96%;
    	text-align: center;
    	margin: auto;
    	padding: 5px;
    	
    }

  • #2
    Senior Coder
    Join Date
    Apr 2007
    Location
    Quakertown PA USA
    Posts
    1,028
    Thanks
    1
    Thanked 125 Times in 123 Posts
    This sounds like what you're looking for

  • Users who have thanked PappaJohn for this post:

    SMC (09-16-2007)

  • #3
    New Coder
    Join Date
    Sep 2007
    Posts
    13
    Thanks
    0
    Thanked 2 Times in 2 Posts
    they this, all you will have to do it repeat a background in the container div that matches the left, middle and right to make it look like they stretch the height of the middle div and ur all set.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
     <HEAD>
      <TITLE> New Document </TITLE>
      <style type="text/css">
    	body { margin:0;}
    
    	#container { width:100%; }
    
    	#header { width:100%; height:100px; background:#ccc; }
    
    	#content { background:red; float:left; margin:0; }
    	p { margin:10px 160px 10px 160px; }
    
    	#right { width:150px; height:300px; float:right; background:#999; }
    
    	#left { width:150px; height:300px; background:#999; float:left; }
    
    	#footer { width:100%; height:100px; background:#333; clear:both; }
      </style>
     </HEAD>
     <BODY>
      <div id="container">
    		<div id="header"></div>
    		<div id="right"></div>
    		<div id="left"></div>		
    			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin nibh arcu, tempus ac, rhoncus id, laoreet at, libero. Fusce mi nulla, pharetra a, euismod eget, lacinia quis, nunc. Nullam adipiscing. Donec convallis pede ac dolor. Nulla facilisi. Nunc odio dui, dignissim sed, rhoncus ac, pulvinar et, purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam volutpat lacinia mi. Aenean vestibulum aliquet massa. Mauris eget lacus.</p>
    
    			<p>Aliquam varius dolor at lorem. Duis interdum, orci gravida ullamcorper viverra, massa purus tristique ligula, sit amet blandit turpis ante vitae lacus. Nullam tincidunt orci venenatis nunc. Donec a sapien. Quisque a nulla ut ante molestie pulvinar. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed convallis sapien ac lorem. Maecenas justo. Ut id urna in metus nonummy nonummy. Morbi aliquet orci ut dolor. Ut sapien augue, iaculis id, convallis vel, interdum sit amet, felis. Duis elementum. Pellentesque tellus odio, elementum in, rhoncus ac, mollis ac, nisi. Aliquam suscipit orci ut odio.</p>
    
    			<p>In hac habitasse platea dictumst. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Pellentesque ipsum mi, vulputate ut, malesuada quis, blandit quis, justo. Maecenas quis felis at purus ultricies ornare. In hac habitasse platea dictumst. Nulla tincidunt sagittis nisl. Integer fermentum mi vel velit. Sed dapibus ipsum et lorem. Vivamus posuere massa vel nulla. Suspendisse eget metus sed ante mattis varius.</p>
    		<div id="footer"></div>
      </div><!-- end of container -->
     </BODY>
    </HTML>

  • Users who have thanked dudeson for this post:

    SMC (09-16-2007)

  • #4
    Regular Coder
    Join Date
    Feb 2007
    Location
    Canada
    Posts
    924
    Thanks
    10
    Thanked 56 Times in 55 Posts

  • Users who have thanked jlhaslip for this post:

    SMC (09-16-2007)

  • #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
    You may find some helpful sites here.
    See my signature.

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

  • Users who have thanked effpeetee for this post:

    SMC (09-16-2007)

  • #6
    SMC
    SMC is offline
    New Coder
    Join Date
    Jun 2007
    Location
    Orlando, FL
    Posts
    60
    Thanks
    5
    Thanked 2 Times in 2 Posts
    Thank you all for your input! I've managed to find the way


  •  

    Posting Permissions

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