Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

What is causing my div to show up at the bottom rather than to the right?

Posted on 2013-05-30
4
Medium Priority
?
280 Views
Last Modified: 2013-06-08
Attached is a screen shot where you can see some verbiage along the bottom. That verbiage is contained within a div that should be parked to the right of the grey column. Instead, it's running along the bottom and I don't know why.

Here's my stylesheet:

img.bg {
  /* Set rules to fill background */
  min-height: 100%;
  min-width: 1024px;
	
  /* Set up proportionate scaling */
  width: 100%;
  height: auto;
	
  /* Set up positioning */
  position: fixed;
  top: 0;
  left: 0;
}

@media screen and (max-width: 1024px) { /* Specific to this particular image */
  img.bg {
    left: 50%;
    margin-left: -512px;   /* 50% */
  }
}

#header {
position:relative;
margin:auto;
height:359px;
width:1000px;
z-index:3;
}

#body_tray {
position:relative;
width:1000px;
background-color:#000000;
margin:25px auto ;
}

#side_bar {
position:relative;
margin-top:-45px;
margin-left:5px;
width:312px;
height:700px;
}

#main_body {
position:relative;
height:35px;
background-color:#cccccc;
}

#footer {
position:relative;
width:1000px;
margin: 10px auto ;
text-align:center;
font-family: Helvetica, Microsoft Sans Serif;
font-size: 12px;
font-weight:bold;
color: #243987;
}

Open in new window


..and here's my html:

<IMG SRC="images/background_image.jpg" class="bg">
<div id="body_tray">
	<div id="header"><IMG SRC="images/header.png" usemap="#header" border="0"></div>
	<div id="body_tray">
		<div id="side_bar"><IMG SRC="images/left_column.png"></div>
		<div id="main_body">hello</div>
	</div>
	<div id="footer">The Rotary of Spring Hill & Thompsons Station | Spring Hill, Tennessee<BR><font size="1"><BR></font><A HREF="http://www.brucegust.com" target="_blank"><IMG SRC="images/brucegust_signature.png" border="0"></a><BR><BR></div>
</div>

Open in new window


It's the grey box with the word "hello" in it. I want that to the right of my "side_bar" div and I'm failing miserably.

Where am I blowing it?
Screen-Shot-2013-05-30-at-5.01.3.png
0
Comment
Question by:brucegust
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
4 Comments
 
LVL 12

Expert Comment

by:duttcom
ID: 39209619
A link to the site would be useful so it can be firebugged.
0
 
LVL 1

Expert Comment

by:manbehindthecurtain
ID: 39209621
Do the following changes to the #side_bar and #main_body work for you?

#side_bar {
position:relative;
margin-top:-45px;
margin-left:5px;
width:312px;
height:700px;

float:left; display:inline;
}

#main_body {
position:relative;
height:35px;
background-color:#cccccc;

    float:left; display:inline;
    width:681px;
    top: 0px;
    left: 0px;
}
0
 

Author Comment

by:brucegust
ID: 39209746
Here's a link to the live version: http://hihatwebdesign.com/smiles/header.php
0
 
LVL 10

Accepted Solution

by:
Ishaan Rawat earned 2000 total points
ID: 39209939
Easiest way....

add float:left to the #side_bar and then modify your html to this..

<IMG SRC="images/background_image.jpg" class="bg">
<div id="body_tray">
	<div id="header"><IMG SRC="images/header.png" usemap="#header" border="0"></div>
	<div id="body_tray">
		<div id="side_bar"><IMG SRC="images/left_column.png"></div>
		<div id="main_body">hello</div>
                <div style="clear:both"></div>
	</div>
	<div id="footer">The Rotary of Spring Hill & Thompsons Station | Spring Hill, Tennessee<BR><font size="1"><BR></font><A HREF="http://www.brucegust.com" target="_blank"><IMG SRC="images/brucegust_signature.png" border="0"></a><BR><BR></div>
</div>

Open in new window

0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Suggested Courses

721 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question