Bruce Gust
asked on
What is causing my div to show up at the bottom rather than to the right?
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:
..and here's my html:
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
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;
}
..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>
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
A link to the site would be useful so it can be firebugged.
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;
}
#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;
}
ASKER
Here's a link to the live version: http://hihatwebdesign.com/smiles/header.php
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.