Need Help. Can't seem to position sidebar next to content

HTML-CSS
1

My sidebar is below the content and i cant seem to position it next to the content. It has already been floated to the left. How can i fix this issue.

This is the layout of the website:

Screenshot%20(10)
Screenshot%20(10)1366×768 356 KB

Below is the html code:

	<div class="row" id="content">
	           
		
		<!-- Main content area -->
		<div id="maincontent" class="col-mid-8">
		
			
		<!--Page heading -->
			
		<h1>Welcome to Namib Guest House</h1>
		
		<p>Namib Guest House is situated in the famous Sossusvlei area, near Dune 45.</p>
		
		<p>This warm and friendly guest house with its relaxed and homely atmosphere offers spacious, luxurious, and affordable accommodation all in one. With fabulous desert views from the balconies and amazing sight-seeing and adventure activities in the region, this serene and tranquil guesthouse the ideal retreat for weekend getaways, family holidays, business travellers or those just looking for an intimate relaxed atmosphere.</p>
		
					
		<h2>Dune 45</h2> 
		
		<p>Dune 45’s fascinating shape and accessibility makes it the most photographed dune in the world.  It is named not for its height (which is 85m), but for its proximity to Sesriem Gate (it is situated 45km from the gate).  The shifting sand colours throughout the day just have to be seen!</p>
		
				
		<h2>Latest news</h2> 
		
		<p><img src="images/aa-award.png" alt="" class="img-thumbnail pull-left">We are thrilled to announce that we have won the prestigious AA / SAA Award for Best Hotel / Guest House in southern Africa for 2016!</p>
		
		<p>This marks the third consecutive year in which we have won this award.</p>
		
		<p>Come visit us and see why!</p>
		
		<div class="clearfix"></div>			
		<h2>Weekday special</h2>
		
		<p>We now offer special weekday rates for out of season! Stay with us Monday to Friday from 12 Feb to 17 April and enjoy a 50% discount on your accommodation.</p>
	

		<!-- Sidebar content (large screen) -->
		<div id="sidebar" class="col-mid-4">
			<div id="sidebar-image" class="panel panel-default">
				<div class="panel-body">
					<img src="images/namib-landscape.png" alt="Explore the desert with us" class="img-thumbnail">
				</div>
			</div>

			<div id="testimonial" class="panel panel-default">
				<div class="panel-heading">
					<h3 class="panel-title">Testimonial</h3> 
				</div>
				<div class="panel-body">
					<small>
						<img src="images/testimonial-colleen-smith.png" alt="" class="img-thumbnail pull-left">
						<p>Tranquillity, good service, wonderful room.</p>
						<p>- Colleen Smith</p>
					</small>
				</div>
			</div>
	
		</div>
	</div>
	</div>

And this is the css style sheet:
/* ------------------- Main containers ------------------- */

body {
background-image:url(’…/images/desert-sand-texture.jpg’);
}

/* -------------- Top row -------------- */

#top {
margin-bottom: 20px;
background-color: #F2E6C2;
padding: 10px;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}

#logo {

}

#bookings {
padding-top: 5px;
padding-bottom: 5px;
}

/* -------------- Navigation -------------- */

.navbar {
background: #728BC1;
color: #ffffff;
font-size: 14px;
border: 0px;
}

.navbar-header * {
color: #ffffff;
border: Solid 1px #ffffff;
}

nav a {
color: #ffffff;
}

nav a:hover {
color: #ffffff;
background: #8CA5D6;
}

/* -------------- Big banner image -------------- */

#banner {
margin-bottom: 20px;
}

#banner img {
border-radius: 3px;
}

/* -------------- Main content area -------------- */

#content {
border-radius: 3px;
background-color: #F2E6C2;
margin-bottom: 20px;
padding-left: 10px;
padding-right: 10px;
}

/* Headings */

h1, h2, h3 {
color: #728BC1;
font-weight: normal;
font-family: Aref Ruqaa;
}

/* Text */

p {
text-align: justify;
}

ul {
list-style-type: circle;
overflow: hidden;
}

ol {
overflow: hidden;
}

/* Images */

#content .pull-left {
margin-right: 10px;
margin-bottom: 10px;
}

/* Tables */

.table-bordered th, .table-bordered td {
border: solid 1px #D9BF8F;
}

.table-bordered th {
background: #D9BF8F;
color: #ffffff;
}

/* Links */

#content a {
color: #A84111;
font-weight: bold;
}

#content a:visited {
color: #D9BF8F;
}

#content a:hover {
color: #0089af;
}

/* -------------- Sidebar -------------- */

#sidebar {
padding-top: 20px;
float: right;
}

.panel-default {
background: #D9BF8F;
margin-left: 800px;
}

/* Sidebar image */

#sidebar-image .panel-body {
padding: 0px;
}

/* Testimonial */

#testimonial .panel-heading {
background: #728BC1;
color: #ffffff;
}

#testimonial p {

}

/* -------------- Footer -------------- */

#footer {
border-radius: 3px;
background: #728BC1;
padding-top: 10px;
color: #ffffff;
margin-bottom: 15px;
}

#footer a {
color: #ffffff;
}

/* ------------------- Forms ------------------- */

label {

}

input, select, textarea {
border: solid 1px #D9BF8F;
margin-top: 1px;
}

.btn-primary {
background: #A84111;
border-color: #A84111;
}

.btn-primary:hover {
background: #A84111;
border-color: #734636;
color: #A84111;
}

.error {
color: #f00;
}

.error-highlight {
border: 1px solid #f00;
}

/* ------------------- Gallery ------------------- */

#gallery img {
margin: 12px;
}

2

Looks like you are using bootstrap.

Make sure your all your contents are inside in div class of ‘row’. Then using grid classes You can wrap everything inside your first column with div class of col-8 and the rest in div class of col-4.

1 Like