# Solved: image not staying within div area...



## AllenJr (Aug 6, 2010)

Hello, I am not really sure how best to explain this, so here is a link:
http://tryfluid.com/testing.html

Basically, I am trying to get a small image to be in the navigation bar, set to the right edge (or close to it)

I did not set a height on the div area, I thought that meant it would automatically "sense" what is inside it and adjust to accomodate everything... this does not seem to be happening, and even worse, the image is offsetting the size of the boxes below it, which are set to percentages of the container element...

Im very confused, maybe someone can help.

Here is the code from the style sheet:


```
@charset "UTF-8";
body {
	background-image: url(images/background2.jpg);
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
#container {
	width: 75%;
	margin-right: auto;
	margin-left: auto;
	margin-top: 0px;
	background-image: url(images/transsquare2.png);
}
#navBartop {
	background-color: #FFF;
	width: 100%;
	margin-top: 7px;
	border-top-width: thin;
	border-bottom-width: thin;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #7BABFF;
	border-right-color: #7BABFF;
	border-bottom-color: #7BABFF;
	border-left-color: #7BABFF;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	vertical-align: top;
}
#content {
	width: 65%;
	padding-left: 25px;
	padding-top: 10px;
	padding-bottom: 65px;
	padding-right: 20px;
}
#header {
	width: 75%;
	margin-right: auto;
	margin-left: auto;
	height: 100px;
	vertical-align: bottom;
}
.mainText {
	font-family: 'Inconsolata';
	font-size: 14px;
	color: #333;
	padding-top: 8px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 25px;
	margin: 0px;
}
.mainText a {
	color: #036;
	text-decoration: none;
}
#thumbArea {
	background-color: #999;
	float: right;
	padding: 12px;
	height: 200px;
	width: 27%;
	margin-top: 25px;
	margin-right: 10px;
	margin-bottom: 0px;
	margin-left: 0px;
}
```
and here is the actual source code:


```
<!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" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>fluid designs</title>
<!-- TemplateEndEditable -->

<link href='http://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet' type='text/css'>

<style type="text/css">
<!--
-->

.headText {
	font-family: 'Inconsolata', Tahoma, Geneva, sans-serif;
	font-size: 12px;
	color: #333;
	letter-spacing: 1em;
	padding-top: 8px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 25px;
	margin: 0px;
}


.NavBarText {
	font-family: 'Inconsolata', verdana;
	font-size: 14px;
	color: #063;
	padding-top: 3px;
	padding-left: 25px;
	letter-spacing: .3em;
	margin: 0px;
	padding-bottom: 3px;
}
.NavBarText a {
	color: #036;
	text-decoration: none;
}
.NavBarText a:hover {
	color: #F00;
}
</style>

<link href="../fluidStyles.css" rel="stylesheet" type="text/css" />



<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
</head>

<body>
  <div id="header"><img src="../images/head_fluid.png" alt="fluid" width="294" height="100" hspace="19" align="left" /><img src="../images/head_stars.png" alt="stars" width="160" height="100" align="right" /></div>

<div id="container"><p  class="headText" >GRAPHIC DESIGN &amp; CREATIVE SERVICES SINCE 1998</p>

<div id="navBartop">
  <p class="NavBarText"><a href="index.html">HOME</a> &nbsp;&nbsp;&nbsp; <a href="portfolio.html">PORTFOLIO</a>&nbsp;&nbsp;&nbsp; <a href="clients.html">CLIENTS</a>&nbsp;&nbsp;&nbsp; <a href="print.html">PRINT SERVICES</a>&nbsp;&nbsp;&nbsp;<a href="contact.html">CONTACT</a> &nbsp;&nbsp;&nbsp; <img src="../images/facebook.png" hspace="15" / align="right"></p>
  
  </div>
  
  
  <div id="thumbArea">Why is the facebook icon not staying inside the &quot;navBarTop&quot; div, and why is it forcing this div area to not align with the right edge?
 
  
</div><div class="mainText" id="content">
  <p><strong>Welcome to fluid.</strong>*<br />
  <br />
    Founded in 1998, fluid designs has been offering professional and affordable graphic design services in the Wilmington, NC community. Since then our client base has expanded to include clients all over the country, in a range of industries.*<br />
  <br />
    Our creative work is professional, on time, and within your budget.*<br />
  <br />
    No matter what business you're in, there is a way we can help. Our love for design, and our ability to deliver your concept in a realistic fashion is what sets us apart from other small agencies. We listen to your suggestions and ideas, and then we deliver.*<br />
  <br />
  <strong>Fluid Designs is a one stop shop</strong>*for all your design and promotional needs. Since we offer a full range of design services as well as promotional products, you can stop worrying about getting your logos or artwork from one agency to another in order to get your promotional products printed. You'll also never have to worry about what type of file your logo is, what type of resolution is required for what you need... Just call us, or send us an email, and we'll take care of the rest.</p>
  <p><strong>Spend more time managing your business, not your art files</strong><em>.</em>*<br />
    <br />
    <strong>Again, welcome to fluid designs,</strong>*let us take care of your design needs so you can take care of your business needs. Give us a call at 910+616+5665 or*<a href="mailto:[email protected]">send us an email</a>, see how simple it can be. We'll work hard to make sure you look good.</p>
</div>



</div>


</body>
</html>
```
Thanks to anyone who can help, I'm stumped here... Hope the link above shows my problem clearly enough.

Thanks!


----------



## AllenJr (Aug 6, 2010)

OK, I have made some changes and the icon is now in the bar.... basically, I embedded an additional div area within the navBar and floated it left and then floated the facebook icon to the right. Not sure if this is the best/correct way to do this, but this is the effect I am trying to achieve...

here is a link:
http://tryfluid.com/testing2.html

But now, I cannot figure out how to vertically center the red bar within the navBar area. I made it red just for sampling purposes, once properly center I will remove the background so that the navBar color shows through

Thanks for any help anyone can offer!


----------



## colinsp (Sep 5, 2007)

I have checked your pages and you must have changed something else as I can't see anything red on either page.


----------



## AllenJr (Aug 6, 2010)

Sorry, yes, I made some changes, forgot that changing the style sheet will change all pages 
Thanks anyhow, I still don't know what was going on, but things are working better...


----------

