www.webdeveloper.com
Results 1 to 2 of 2

Thread: Need help with left side text box

  1. #1
    Join Date
    Jul 2012
    Posts
    5

    Need help with left side text box

    So this is what I got, but the boxes wont get next to eachother. I want the grey on the left, and the blue & green next to it. I'm a total noob and this is the first site I ever made in html.

    HTML Code:
    ul {
    padding-left: 0;
    }
    li {
    list-style: none;
    display: inline;
    padding-right: 10px;
    }
    h3 { 
    margin-bottom: 0; 
    padding-bottom: 0; 
    }
    header{
    background-color: green
    }
    
    footer{
    background-color: blue;
    }
    test{
    background-color: red;
    }
    footer, div#test, header {
    width: 600px;
    margin: auto;
    }
    div#test {
    background-color: red;
    }
    body{
    background-color: black;
    }
    div#left{
    width: 80px;
    background-color: grey;
    float: left;
    }
    http://i50.tinypic.com/293x8qw.png

  2. #2
    Join Date
    Jul 2012
    Location
    UK
    Posts
    15
    Try this...

    Css:
    Code:
    <style type="text/css">
    body	{
    background-color: #000;
    font-family: 'century gothic';
    font-size: 14px;
    }
    
    h3	{ 
    margin-bottom: 0; 
    padding-bottom: 0; 
    }
    
    header	{
    background-color: #00ff00;
    margin: 10px 0 10px 0;
    padding: 10px;
    }
    
    footer	{
    background-color: #0000ff;
    margin: 10px 0 10px 0;
    clear: both;
    padding: 10px;
    }
    
    #red	{
    background-color: #ff0000;
    float: right;
    width: 835px;
    padding: 10px;
    margin: 0 0 10px 0;
    
    height: 600px; /*remove this */
    }
    
    #grey	{
    width: 70px;
    background-color: #555;
    margin: 0 0 10px 0;
    float: left;
    padding: 10px;
    
    height: 600px; /*remove this */
    }
    
    #container	{
    	width: 955px;
    	margin: 0 auto;
    }
    
    </style>
    HTML:
    HTML Code:
    <body>
    
    <!-- Container wraps all child divs -->
    <div id="container">
    
    <!-- Green section -->
    <header>
    			<br />
    			<p>Header content here (955px wide)</p>
    			<br />
    </header>
    
    
    <!-- Grey section -->
    <div id="grey">
    			<p>Grey area content between here (90px wide)</p>
    </div>
    
    
    <!-- Red section -->
    <div id="red">
    			<p>Red area content in here (855px wide)</p>
    </div>
    
    <!-- Blue section -->
    <footer>&copy; Copyright</footer>
    
    </div>
    <!-- end of container -->
    </body>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles