Content and Sidebar Divs

Discussion in 'HTML & Website Design' started by bobby9101, Jul 27, 2005.

  1. #1
    I have created a page.
    I hvae a sidebar which is a div.
    the problem is how do i get the other main content next to it?
    it shows up underneath.

    http://img29.imageshack.us/img29/9416/newpicture6jg.jpg
    I want the pictures next to the siderbar.

    here is the code for that
    <html><head>
    <style type= "text/css">
    h1 {color: #C80000}
    h1 {text-align: center}
    i {color: teal}
    a {color: salmon}				
    	body {background-color: #380000}
    #linkstable align="left"{background-color: #330000; margin:0 auto;width:18%;}
    </style></head></body>
    <div id="linkstable">
    
    <h3>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="cherryhome.htm">Home</a></h3>
    
    <h3>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href"=contact-us.htm">Contact Us</a></h3>
    
    <h2><i>&nbsp;Inventory:</i></h2>
    
    <h3>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href"=tables.htm">Tables</a></h3>
    
    <h3>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href"=seating.htm">Seating</a></h3>
    
    </div>
    <a>
    <img border="0" src="monitor.gif" alt=""></a>
    <a>
    <img border="0" src="camcorder.jpg" alt=""></a>
    <a>
    <img border="0" src="keyboard.jpg" alt=""></a>
    </body>
    </html>
    Code (markup):
     
    bobby9101, Jul 27, 2005 IP
  2. Corey Bryant

    Corey Bryant Texan at Heart

    Messages:
    1,126
    Likes Received:
    51
    Best Answers:
    0
    Trophy Points:
    0
    #2
    I think you want something closer to
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    	"http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <style type="text/css">
    h1 
    {	color: #C80000;
    	text-align: center;
    }
    i {color: teal}
    a {color: salmon}
    body 
    {
    	background-color: #380000;
    }
    div.main
    {
    	width: 100%;
    }	
    #linkstable 
    {
    	text-align:left;
    	background-color: #330000; 
    	margin:0 auto;
    	width:18%;
    	float: left;
    }
    #content
    {
    	width: 81%;
    	float: right;
    }
    </style>
    </head>
    <body>
    <div class="main">
    <div id="linkstable">
    
    <h3>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="cherryhome.htm">Home</a></h3>
    
    <h3>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href"=contact-us.htm">Contact Us</a></h3>
    
    <h2><i>&nbsp;Inventory:</i></h2>
    
    <h3>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href"=tables.htm">Tables</a></h3>
    
    <h3>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href"=seating.htm">Seating</a></h3>
    
    </div>
    <div id="content">
    <a><img border="0" src="monitor.gif" alt=""></a>
    <a>
    <img border="0" src="camcorder.jpg" alt=""></a>
    <a>
    <img border="0" src="keyboard.jpg" alt=""></a>
    </div>
    </div>
    </body>
    </html>
    Code (markup):
    You need to name your i to a id or class though as well.
     
    Corey Bryant, Jul 29, 2005 IP
  3. bobby9101

    bobby9101 Peon

    Messages:
    3,292
    Likes Received:
    134
    Best Answers:
    0
    Trophy Points:
    0
    #3
    it is fixed thanks
     
    bobby9101, Jul 29, 2005 IP
  4. Up2U - YourWorld

    Up2U - YourWorld Peon

    Messages:
    47
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Shouldn't you not have a wrapper div for centering and keeping it accessible to those in 800x600s?

    And stylesheets ought to be external, too!

    And most people are currently switching to XHTML 1.0 STRICT now, as well.
     
    Up2U - YourWorld, Jul 29, 2005 IP