Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Floating not working on the right side

Status
Not open for further replies.
neronikita

neronikita

Technical User
Feb 20, 2002
159
US
I'm hoping someone else sees something here that I'm missing.... I can't seem to get the right hand side bar (adbar) to move up and align with the left sidebar and main content. I'm including the CSS sheet to see if anyone sees a problem in that before I include the HTML.

What I want to see is:
Sidebar MainContent Adbar

but what I'm seeing is

Sidebar MainContent

adbar

Thanks in advance for any suggestions. I'm just learning CSS so any help will be greatly appreciated.

Di

body {
font-family: arial;
}
#container {
width: 60%;

margin: 0 auto;
padding: 0;
text-align: left;
}

#header {
text-align:center;
margin: 0;
padding: 0;
}

#header p {
Text-align: center;
color: #800000;
font-size: 18px;
font-family: arial;
font-weight: bold;
}
#sidebar {
float: left;
width: 12em;
}

#mainContent {
background-color: #dddddd;
margin-right: 20em;
margin-left: 12em;

font-family: Arial;

}
#mainContent p {
text-align: center;
}
#mainContent em {
font-style: italic;
font-weight: bold;
}
#mainContent h1, h2 {
text-align: center;
}
#adbar {
float: right;
width: 12em;
font-size: .8em;
}
#adbar div {
text-align: right;
margin: 0 auto;
}
#adbar p {
font-family: arial;
}
.clearfloat {
clear: both;
height: 0;
font-size:1px;
}
#footer p {
margin: 0;
padding: 10px 0;
background-color: #DDDDDD;
text-align: center;
font-size: .8em;
}


 
Sort by date Sort by votes
If your structure is as follows, you should be fine:
Code: 
<body> 
<div id="sidebar">sidebar</div>
<div id="adbar">adbar</div>
<div id="mainContent">
<h1>Main h1</h1>
<h2>Main h2</h2>
</div>

</body>
If, however, your adbar follows your mainContent div, then you wil get the results you are seeing unless you also float the mainContent to the left.

Greg
People demand freedom of speech as a compensation for the freedom of thought which they seldom use. Kierkegaard
 
Upvote 0 Downvote
Thanks Greg. I tried that and the maincontent goes underneath the sidebar and adbar then. I tried changing maincontent to 20px just to make it really skinny to see if it was the width that was affecting it and that didn't work. I also tried floating maincontent to the left and it didn't work. I'm totally at a loss.

Di
 
Upvote 0 Downvote
I didn't originally post the HTML because I figured it was a problem with the CSS and thought someone with more experience would pick up the problem easily. I do not have the page posted anywhere yet, so here is the html:

<html>
<head>
<metta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Testsite</title>
<link rel="stylesheet" href="Style.css" type="text/css" />
</head>
<body>
<div id="container">

<div id="header">
<a href="index.html"><img src="esi_banner75%.gif" alt="ESI Building" /></a>

</div><!--end#header -->

<Div id="sidebar">
<img src="wherego_button.gif" alt="tour info" />
<p><a href="index.html">Home</a></br></p>
<p> <a href="aboutesi.html">About ESI</a></br></p>
<p> <a href="equipment.html">Equipment</a></br></p>
<p> <a href="Haul.html">What can we haul?</a></br></p>
<p> <a href="PhotoGallery.html">Photo Gallery</a></br></p>
<p> <a href="Employment.html">Employment</a></br></p>
<p> <a href="safetytips.html">Safety Tips</a></br></p>
<p> <a href="ContactUs.html">Contact Us</a></br></p>
<p> <script>function fbs_click() {u=location.href;t=document.title;window.open(' false;}</script><style> html .fb_share_link { padding:2px 0 0 20px; height:16px; background:url( no-repeat top left; }</style><a href=" onclick="return fbs_click()" target="_blank" class="fb_share_link">Share on Facebook</a>

</div> <!--end #sidebar-->
<div id="adbar">
<img src="NewatElite_Small.gif" alt="What's new at ESI" /></br>


<p><em> ESI is hiring drivers! Please see our
employment page for an application.</em></p>
<p> An ESI truck (135) was featured in a recent copy of Long Haul trucking.</br>
Click to see a larger picture.</p>
<a href="135_longhaulmag_cropped.html"><img src="135_longhaulmag_cropped_tn.jpg" Alt="135 Long Haul Picture" /></a>
<p>Elite Service, Inc is now on Twitter and Facebook! </P>
<p> Follow us on <a href=" <p> <a href=" Service, Inc.</a> on Facebook</div>

</div>

<div id="mainContent">
<img src="aboutus.gif" alt="about us" />
<p>Elite Service, Inc. is dedicated to continuous improvement in servicing our customers across North America and Western Canada.</br>
Committing all our resources, enhancing the products we deliver through personalized communication, timeliness of deliveries, and a standard of zero percent in claims.</p>

<h2> Nationwide flatbed and specialty trucking - our business. </br>
<em>Elite Service</em> - our commitment.</h2></br>
<p>Elite Service, Inc. is a growing common and contract carrier located in Denver, PA. </br>Family owned and operated since 1987, with Elite Service you get the personal attention you deserve.</br>
Elite Service opearates in all 48 states and the mid and western Canadian providences.</br>
Our long-time customers have come to rely on Elite Service for cusotmizing the equipment to meet their needs.</br>
As a woman-owned company, Elite Service is DBE certified in Pennsylvania, Georgia, Delaware, and Massachusetts.</p>
<br class="clearfloat" />
</div><!--end #mainContent -->


<div id="footer">
<p><a href="index.html">Home</a>&nbsp; |
<a href="aboutesi.html">About ESI</a>&nbsp; |
<a href="equipment.html">Equipment</a>&nbsp; |
<a href="Haul.html">What can we haul?</a>&nbsp; |
<a href="PhotoGallery.html">Photo Gallery</a>&nbsp; |
<a href="Employment.html">Employment</a>&nbsp; |
<a href="safetytips.html">Safety Tips</a>&nbsp; |
<a href="ContactUs.html">Contact Us</a>
</p>
</div><!-- end #footer -->
</div> <!-- end #container -->

</body>
</html>


Thanks!

Di
 
Upvote 0 Downvote
You have an extra </div> at the end of div#adbar which probably isn't doing you any favours:
Code: 
    <p> <a href="[URL unfurl="true"]http://www.facebook.com/pages/Denver-PA/Elite-Service-Inc/115654102995">Elite[/URL] Service, Inc.</a> on Facebook[red]</div>[/red]
    
    </div>

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
696
spamjim
spamjim
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
171
lmcate
lmcate
Mike Lewis
  • Locked
  • Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
1K
Mike Lewis
Mike Lewis
lmcate
  • Locked
  • Question
Create a Expand/Collapse FAQ Accordion, Collapse other on Click 1
Replies
2
Views
633
Mike Lewis
Mike Lewis
PeDa
  • Locked
  • Question
Display table td's as block element on mobile phone 1
Replies
3
Views
815
spamjim
spamjim

Part and Inventory Search

Sponsor

Back
Top