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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Aug 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Fixed Menu with Scrollable Main Content

    I've set myself a challenge of making a website a day for this week. I figured this will help me to get to grips with CSS and HTML.

    I am currently trying to create a website with a fixed menu on the left side and a content area on the right.
    Layout.

    The problem I have is this Problem

    Here is a link containing the website Website

    What is causing the overlap of the text?

    Thanks.

  • #2
    New Coder
    Join Date
    Jul 2013
    Posts
    39
    Thanks
    0
    Thanked 2 Times in 2 Posts
    It's hard to figure out the problem without the code and only a screeshot... if you could upload or give us the URL that would be great..

  • #3
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,197
    Thanks
    23
    Thanked 605 Times in 604 Posts
    CSS float is the key
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <style type="text/css">
    body{
    	width: 960px;
    	border: 2px pink solid;
    }
    #wrapper{
    	width: 950px;
    	height: 400px;
    	margin: 5px auto;
    }
    #colA{
    	width: 25%;
    	background-color: green;
    	height: 400px;
    	float:left;
    }
    #colB{
    	width: 75%;
    	background-color: blue;
    	height: 400px;
    	float:left;
    }
    </style>
    </head>
    
    <body>
    <div id="wrapper">
    	<div id="colA">Menu</div>
    	<div id="colB">Text</div>
    </div>
    </body>
    </html>
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."


  •  

    Posting Permissions

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