CSS sidebar not working? - html

Question

I've tried to create a right sidebar within my div, but it's not working. It keeps sitting outside of my main wrapper. Any suggestions?
HTML:
<div id="wrapper">
<h1>Hogan Flying Service</h1>
<img src="Images/CincinnatiSectional.png" width="800" height="97" alt="CincySectional" />
<div class="bodytext">
<h2>About Hogan Flying Service:</h2>
<p>While Hogan Flying Service setup operations at HAO in 2009, it was founded in 1991 by Tom Hogan, after a long history and tradition of aviation in the Hogan family. Uncle Joe and Bernie started flying in 1929, and bought their first Waco 10 in 1932. In that same year, my grandparents William and Emma Hogan purchased the Hamilton Airport and farming careers turned into aviation careers.</p>
<p>A few years later, my father Art and Uncle Bill learned to fly and soon became flight instructors supporting the CPT programs during WWII. My Aunts Lauretta, Katie and Mary also were involved in the many aspects of running an airport. Through the years, the Hogan family was involved in many flying aviation activities including flight instruction, barnstorming, an on-field restaurant, air taxi, air charter, maintenance shop, aircraft restoration, pilot services and laying the foundation of the Butler County Regional Airport as you see it today.</p>
<div class="sideright">
<ul>
<li>Private Pilot</li>
<li> Private Pilot</li>
<li>Commercial Pilot</li>
<li>Instrument Rating</li>
<li>Light Sport Pilot LSA</li>
<li>Tailwheel endorsements</li>
<li>Currency requirements</li>
<li>Biennial Flight Reviews</li>
<li>Ground School Instruction</li>
<li>Aircraft rental</li>
</ul>
</div><!--sidebar end-->
CSS:
#wrapper {
width: 800px;
margin: 60px auto;
background-color: #182228;
border: medium groove #000;
z-index: 1000;
position: relative;
box-shadow: 3px 3px 5px 0px #000;
}
.bodytext {
margin: 10px 320px 10px 10px;
padding: 20px;
}
.sideright {
float: right;
width:260px;
padding:10px;
margin-top:10px;
margin-bottom: 10px;
margin-left:10px;
float:right
}
Here's my fiddle: https://jsfiddle.net/5w8xprqg/2/

Answer 1

If you are content with a fixed width layout, here are the minimum changes to your fiddle that need to be made to get the sidebar where it should be. If you want a responsive layout, you will have to switch over to defining widths and such with percentages.
CSS
wrapper {display:table
}
.body-text {margin: 10px;
float: left;
width: 470px;
}
And the updated jsfiddle. https://jsfiddle.net/5w8xprqg/3/
One mistake was using a 320px margin on the right of your body text which would never let your sidebar flow up next to the body text. Use width to do that kind of thing instead. Also using float:left on elements higher up the DOM usually works better than trying to float:right elements further down. Note you don't really need the float on the .side-right element, but it works.
On a separate note there are other ways that your problems can be avoided and get a superior layout with less css.
One problem I believe you were experiencing was the text overflowing the at the bottom of the wrapper. This can usually be prevented by adding display:table;or overflow:hidden What the last one does is not what you would expect, but instead of the overflowing text being hidden it forces the container to stretch down and contain it.
Also using percentages for your widths today is a better practice.
See this jsfiddle, and notice how little css is necessary to get the layout in the working properly. http://jsfiddle.net/5w8xprqg/4/ Also resize the results box to see how the text adjusts to fit the width.
To get even better layout at very narrow widths, you would want to add in media queries.

Answer 2

There are many ways to do this, and it depends if you want your bodytext to wrap your sidebar. Here is one way, where I created a left side with set width, and right side with set width. Fiddle here: http://jsfiddle.net/t0837grw/
#wrapper {
width: 800px;
margin: 60px auto;
background-color: #ccc;
border: medium groove #000;
z-index: 1000;
position: relative;
box-shadow: 3px 3px 5px 0px #000;
}
.bodytext {
margin: 10px;
padding: 20px;
}
.sideleft
{
display: inline-block;
width: 65%;
}
.sideright {
display: inline-block;
vertical-align: top;
width:30%;
margin: 0 10px;
}
Here is alternate fiddle with set widths: http://jsfiddle.net/6e6btgds/

Answer 3

In the context of the code in the question, the simplest solution might be to swap the locations of the .bodytext and .sideright elements in the mark-up.
#charset "UTF-8";
/* CSS Document */
body {
background-color: #2c3439;
color: #FFF;
}
#wrapper {
width: 800px;
margin: 60px auto;
background-color: #182228;
border: medium groove #000;
z-index: 1000;
position: relative;
box-shadow: 3px 3px 5px 0px #000;
}
#topnav ul {
margin: -11px -10px 10px -10px;
text-align: center;
padding: 1%;
background-color: #000;
color: #FFF;
}
#topnav li {
display: inline;
margin: 0px 40px;
}
.centerimage {
margin: 10px 165px;
}
p {
text-indent: 2.5em;
}
.bodytext {
margin: 10px 320px 10px 10px;
padding: 20px;
}
.sideright {
float: right;
width: 260px;
padding: 10px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 10px float: right
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link href="all.css" rel="stylesheet" type="text/css" />
</head>
<body>
<nav id="topnav">
<ul>
<li>Home</li>
<li>Aircraft Rental</li>
<li>Contact Us</li>
<li>Flight Training</li>
</ul>
</nav>
<div id="wrapper">
<h1>Hogan Flying Service</h1>
<img src="Images/CincinnatiSectional.png" width="800" height="97" alt="CincySectional" />
<div class="sideright">
<ul>
<li>Private Pilot</li>
<li>Private Pilot</li>
<li>Commercial Pilot</li>
<li>Instrument Rating</li>
<li>Light Sport Pilot LSA</li>
<li>Tailwheel endorsements</li>
<li>Currency requirements</li>
<li>Biennial Flight Reviews</li>
<li>Ground School Instruction</li>
<li>Aircraft rental</li>
</ul>
</div>
<!--sidebar end-->
<div class="bodytext">
<h2>About Hogan Flying Service:</h2>
<p>While Hogan Flying Service setup operations at HAO in 2009, it was founded in 1991 by Tom Hogan, after a long history and tradition of aviation in the Hogan family. Uncle Joe and Bernie started flying in 1929, and bought their first Waco 10 in 1932.
In that same year, my grandparents William and Emma Hogan purchased the Hamilton Airport and farming careers turned into aviation careers.</p>
<p>A few years later, my father Art and Uncle Bill learned to fly and soon became flight instructors supporting the CPT programs during WWII. My Aunts Lauretta, Katie and Mary also were involved in the many aspects of running an airport. Through the
years, the Hogan family was involved in many flying aviation activities including flight instruction, barnstorming, an on-field restaurant, air taxi, air charter, maintenance shop, aircraft restoration, pilot services and laying the foundation
of the Butler County Regional Airport as you see it today.</p>
</div>
<!--text div end-->
</div>
<!--Wrapper End-->
</body>
</html>