www.webdeveloper.com
Results 1 to 6 of 6

Thread: Table outside of div

  1. #1
    Join Date
    Jan 2014
    Posts
    7

    Table outside of div

    Hi all, I'm trying to put a table inside a div and it seems to just sit outside the div. I've tried some things in CSS, but aren't too sure what's wrong :/

    Cheers

    HTML Code
    Code:
    <html>
    <head>
    	<link rel="stylesheet" href="stylesheet.css" />
    	<title>Menu | 55 Degrees </title>
    </head>
    <body>
    	<div id="nav">
    	<div id="wrapper">
    			<ul>
    				<a href="index.html"><li>Home</li></a>
    				<li>&nbsp;&nbsp;|&nbsp;</li>
    				<a href="menu.html"><li>Menu</li></a>
    				<li>&nbsp;&nbsp;|&nbsp;</li>
    				<a href="events.html"><li>Events</li></a>
    				<li>&nbsp;&nbsp;|&nbsp;</li>
    				<a href="contactus.html"><li>Contact Us</li></a>
    			</ul>
    			</div>
    		</div>
    	<div id="wrapper">
    		<div id="header">
    			<div class="logo"></div>
    			<div class="institute"></div>
    			<div class="wifi"></div>
    		</div>
    		<div id="contentleft">
    		<div id"="menu">
    					<table border="1">
    			<tr>
    					<th>Snacks</th>
    					<th>Price</th>
    					</tr>
    			<tr>
    					<td> Cake of the day (per slice)</td>
    					<td>&pound1.50</td>	
    			</tr>
    			<tr>
    					<td>Tray Bakes (per slice)</td>
    					<td>75p</td>		
    			</tr>
    					<td>Freshly mad soup
    					and a bread roll*</td>
    					<td>&pound1.25</td>		
    			</tr>
    					<td>Two slices of toast and butter 
    					with jam</td>
    					<td>&pound1.45</td>		
    			</tr>
    					<td>Bagels</td>
    					<td>&pound1</td>		
    			</tr>
    			</tr>
    					<td>Croissants, scones, pain au chocolat, Danish pastries,
    					and cheese and crackers.</td>
    					<td>(Priced daily and subject to availability</td>		
    			</tr>
    					</div>
    		</div>
    		<div id="contentright">
    		
    		</div>
    		<div id="footer">
    		</div>
    	</div>
    CSS Code:
    The menu styling can be found as #menu
    Code:
    *{
    margin: 0px;
    font-weight: 100;
    }
    body{
    background-color:#FFDEAD;
    }
    #wrapper{
    width:1000px;
    margin:0 auto;
    }
    #nav{
    width: 100%;
    height: 40px;
    background-color: #000;
    }
    #nav ul  {
    padding-top:10px;
    float:right;
    }
    #nav ul li {
    display:inline-block;
    list-style:none;
    color:#fff;
    font-size: 16px;
    font-family: arial;
    -moz-transition:ease-in all 300ms;
    -webkit-transition:ease-in all 300ms;
    -o-transition:ease-in all 300ms;
    }
    #nav ul li:hover {
    opacity:0.7;
    position:relative;
    right: 10px;
    transition:ease-in all 300ms;
    -moz-transition:ease-in all 300ms;
    -webkit-transition:ease-in all 300ms;
    -o-transition:ease-in all 300ms;
    }
    #nav ul a {
    }
    #header{
    width: 100%;
    height: 300px;
    }
    .logo{
    width:140px;
    height:210px;
    background-image: url(Pictures/logo.jpg);
    margin:auto;
    position:relative;
    top:50px;
    }
    .institute{
    width:363px;
    height:160px;
    background-image: url(Pictures/ilogo.png);
    margin:auto;
    position:relative;
    bottom:135px;
    left:295px;
    border:2px solid black;
    }
    .wifi{
    width:363px;
    height:200px;
    background-image: url(Pictures/wifi.jpg);
    margin:auto;
    position:relative;
    bottom:320px;
    right:295px;
    border:2px solid black;
    }
    #contentleft{
    width: 50%;
    height: 400px;
    background-color: #333;
    float:left;
    }
    .bal{
    background-image: url(Pictures/rest.jpg);
    width:250px;
    height:95px;
    margin:auto;
    position:relative;
    top:3px;
    border:2px solid black;
    }
    #contentleft h1{
    font-weight:3px;
    font-family:century;
    color:white;
    text-decoration:underline;
    }
    #contentleft h2{
    font-weight:2px;
    font-family:century;
    color:white;
    text-decoration:underline;
    }
    #contentleft p1{
    font-weight:1px;
    font-family:century;
    color:white;
    }
    #menu{
    margin: 0 auto;
    height:400;
    width:100%;
    }
    #contentright{
    width: 50%;
    height: 400px;
    background-color: #666;
    float:left;
    }
    #contentright h1{
    color:brown;
    font-weight:2px;
    font-family:century;
    color:white;
    }
    .flask{
    background-image: url(Pictures/flask.jpg);
    width:250px;
    height:333px;
    margin:auto;
    position:relative;
    top:22px;
    border:2px solid black;
    }
    #footer{
    clear: both;
    width: 100%;
    height: 30px;
    background-color: #000;
    }
    #footer ul  {
    padding-top:10px;
    float:right;
    }
    #footer ul li {
    display:inline-block;
    list-style:none;
    color:#fff;
    font-size: 16px;
    font-family: arial;
    -moz-transition:ease-in all 300ms;
    -webkit-transition:ease-in all 300ms;
    -o-transition:ease-in all 300ms;
    }
    #footer ul li:hover {
    opacity:0.7;
    position:relative;
    right: 10px;
    transition:ease-in all 300ms;
    -moz-transition:ease-in all 300ms;
    -webkit-transition:ease-in all 300ms;
    -o-transition:ease-in all 300ms;
    }

  2. #2
    Join Date
    Jan 2014
    Posts
    7
    Forgot to add a screenshot of what it looks like - http://gyazo.com/d793c189e3ce6c18edac1b8cb023aa37
    Also at the top there's usually pictures.

  3. #3
    Join Date
    Mar 2011
    Posts
    1,157
    At a glance, you've got two <div>s with id="wrapper". Each 'id' attribute on a page must be unique, or the browser won't know which CSS rules apply. If you want to apply the same CSS rule to multiple elements, use the 'class' attribute.

  4. #4
    Join Date
    Jan 2014
    Posts
    7
    Ah i see, i've got rid of the top wrapper, as that wasn't meant to be there (copy paste error xD). Also the table still seems to be outside the div, not too sure whats going on >.<

  5. #5
    Join Date
    Oct 2013
    Posts
    600
    Missing and miscoded things in the table as well as it's wrapping DIV. Corrections are in red.

    Code:
    		<div id="menu"> <!-- not div id"="menu" -->
    					<table border="1">
    			<tr>
    					<th>Snacks</th>
    					<th>Price</th>
    					</tr>
    			<tr>
    					<td> Cake of the day (per slice)</td>
    					<td>&pound;1.50</td>	
    			</tr>
    			<tr>
    					<td>Tray Bakes (per slice)</td>
    					<td>75p</td>		
    			</tr>
    					<td>Freshly mad soup
    					and a bread roll*</td>
    					<td>&pound;1.25</td>		
    			</tr>
    					<td>Two slices of toast and butter 
    					with jam</td>
    					<td>&pound;1.45</td>		
    			</tr>
    					<td>Bagels</td>
    					<td>&pound;1</td>		
    			</tr>
    			</tr>
    					<td>Croissants, scones, pain au chocolat, Danish pastries,
    					and cheese and crackers.</td>
    					<td>(Priced daily and subject to availability</td>		
    			</tr>
    					</table> <!-- I think this missing tag was the culprit -->

  6. #6
    Join Date
    Jan 2014
    Posts
    7
    Cheers man! that fixed it up nicely. From now on i need to proof read more lol! Thanks a lot for pointing those errors out though!

    Much appreciated.

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