This is my code and i just can't get the #eateries div and the #categories div to be next to eachother. I stripped down the webpage to only include relevant pieces. I've only had a couple months to learn html.
edit: I tryed implementing what has been suggested but in the full site it doesn't work is there something different that needs to be done?
@charset "UTF-8";
#contacts {
background-color: #424040;
text-align: center;
padding-top: 5px;
padding-bottom: 5px;
}
p {} #content {
border: medium solid #FE4B3B;
background-color: #FFFFFF;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
}
#navigation {
text-align: center;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-size: large;
background-color: #424040;
height: 60px;
border-left-color: #FE4B3B;
border-right-color: #FE4B3B;
border-top-color: #FE4B3B;
border-left-style: solid;
border-right-style: solid;
border-top-style: solid;
border-left-width: medium;
border-right-width: medium;
border-top-width: medium;
}
#header #navigation ul li {
list-style: none;
display: inline;
}
#header {
background-image: url(Assets/boston.jpeg);
background-repeat: no-repeat;
height: auto;
}
#options {} #contact_info {
color: #FFFFFF;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
}
#header_image {
background-repeat: no-repeat;
height: 250px;
border-left-color: #FE4B3B;
border-right-color: #FE4B3B;
border-top-color: #FE4B3B;
border-left-style: solid;
border-right-style: solid;
border-top-style: solid;
border-left-width: medium;
border-right-width: medium;
border-top-width: medium;
}
.Nav_button a {
background-color: #424040;
margin-right: 50px;
padding-right: 5px;
padding-top: 5px;
padding-left: 5px;
padding-bottom: 5px;
color: #FFFFFF;
text-decoration: none;
font-size: large;
}
#Title_image {
text-align: center;
width: 100%;
height: 100%;
}
.Nav_button a:hover {
color: #FFFFFF;
background-color: #000000;
}
body {
margin: 0 auto 0 auto;
width: 1300px;
background-image: url(Assets/Boston_Back_Bay_reflection.jpg);
}
#garden_img {
width: 400px;
height: auto;
}
#header_text {
font-size: xx-large;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-weight: bold;
color: #0C0D12;
text-align: center;
}
.text_content {
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-size: large;
}
#hall_img {
width: 200px;
height: auto;
text-align: center;
}
.picture_div {
width: auto;
margin: auto;
height: auto;
text-align: center;
}
.navbar-fixed {
top: 0;
z-index: 100;
position: fixed;
width: 1294px;
border: 0px;
margin: 0 auto 0 auto;
}
#const:hover {
background-color: #FE4B3B;
}
#mfa:hover {
background-color: #FE4B3B;
}
#nathist:hover {
background-color: #FE4B3B;
}
#mos:hover {
background-color: #FE4B3B;
}
#categories {
border: medium solid #000000;
width: 200px;
}
#placestoeat {} #eateries {
border: medium solid #000000;
width: 400px;
}<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>index</title>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">
<div id="header_image">
<img src="Assets/Boston_Header.png" alt="" width="1291" height="455" id="Title_image" />
</div>
<div id="navigation">
<ul width="1291" height="455">
<script type="text/javascript">
$(document).ready(function() {
$(window).scroll(function() {
//if you hard code, then use console
//.log to determine when you want the
//nav bar to stick.
console.log($(window).scrollTop())
if ($(window).scrollTop() > 253) {
$('#navigation').addClass('navbar-fixed');
}
if ($(window).scrollTop() < 253) {
$('#navigation').removeClass('navbar-fixed');
}
});
});
</script>
<li class="Nav_button"><a href="index.html">Home</a>
</li>
<li class="Nav_button"><a href="History.html">History</a>
</li>
<li class="Nav_button"><a href="restraunts.html">Restraunts</a>
</li>
<li class="Nav_button"><a href="outdoor.html">Outdoors</a>
</li>
<li class="Nav_button"><a href="Maps.html">Maps</a>
</li>
</ul>
</div>
</div>
<div id="content">
<p id="header_text">Places To Eat</p>
<p>Boston is home to many restraunts, cafes, food vendors, and diners. There is a huge variety of cultural foods in boston such as Italian, French, Mediteranean, South American, German. Since boston is right on the water you will find many seafood focused
restraunts with large selections of food. There is a huge variety of prices in boston with upscale fancy restraunts as well as small places offering up affordable food guaranteed to make your mouth water. Take a look at our long list of places to
eat!
</p>
<div id="placestoeat">
<div id="categories">
<ul>
<li>Seafood</li>
<li>Italian</li>
<li>French</li>
<li>Mediteranean</li>
<li>German</li>
<li>South American</li>
<li>American</li>
</ul>
</div>
<div id="eateries">
<table width="200" border="1">
<tbody>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="contacts">
<p id="contact_info">Email: gerrickslonder037@email.com Phone: 123-456-7890 Mailing Address: 123 Fake Street, PA</p>
</div>
</div>
</body>
</html>
