CSS Sticking !

One of my divs refuses to stay in place =/

Page 1 of 1

2 Replies - 550 Views - Last Post: 31 July 2009 - 08:10 PM

#1 cloudnyn3  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 24
  • Joined: 29-July 09

CSS Sticking !

Posted 30 July 2009 - 05:54 PM

Hey there, if you wanna take a look for yourself
http://www.intensity...ologies.com/vb/ Is the page having problems.
The problem as you will see is that the left pane or the search div stick all the way to the left of the browser, even when you move it, I tried positioning the div absolutely but it still does it =/

If you look to your right you'll see the picture I used to have text wrapped around it, well once I inserted the code which was
img.float {
		 float:left;
}



and then defined it with
<img src="blah/images/img.jpg" class="floatleft">



the whole thing went nuts =(

even after I removed everything I did =/

heres the code if you need it
<!DOCTYPE HTML>

<!--
Design By Cloudnyn3 and GreenEyez(R.I.P)
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Intensity-technologies</title>
<meta name="keywords" content="Computer Repair technology" />
<meta name="description" content="Intensity-technologies" />
<link href="default.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript">
function toggleDiv(id,flagit) {
if (flagit=="1"){
	if (document.layers) document.layers[''+id+''].visibility = "show"
	else if (document.all) document.all[''+id+''].style.visibility = "visible"
	else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "visible"					}
else
 if (flagit=="0"){
	if (document.layers) document.layers[''+id+''].visibility = "hide"
	else if (document.all) document.all[''+id+''].style.visibility = "hidden"
	else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "hidden"							}
}
</script>

</head>
<body>
<div id="wrapper">
<!-- start header -->
<div id="header">

</div>
<!-- end header -->
<!-- start page -->
<div id="page">
	<!-- start content -->
	<div id="content">
		<div class="post">
			<h1 class="title">About Us</h1>
<div class="summaryBox">

</div>
 
<div class="summaryContent">
<img src="/vb/images/About_us.png" class="floatLeft">
Intensity-Technologies is an all purpose and highly productive Information Technology work group with a promise of providing a wide array of different technological services and resources at a very affordable rate and at an exceptionally quicker pace that most of todays mainstream choices for IT solutions. Many of today's common mainstream Help Desk and Service Technician companies use individuals who are often unqualified, trained for less than a week at a time and often are not truely knowledgable of all aspects of the field in which they work. This is a good way to save costs and bring in more money, but unfortunately its a bad way to work and treat costumers. A recent study conducted by Fox News showed that larger companies who hired these individuals knew far less about IT than the vast majority of the local or smaller computer shops and businesses. The reasoning behind this is that, the poeple who were being

  </div>
</div>
			
		</div>
	</div>
	<!-- end content -->
	<!-- start sidebar -->
	<div id="search">
	

<div id="div1">A Short Summary Of Our Business, Employees And Services We Provide To Clients And Customers..</div>

		<ul>
			<li>
				<h2>Services</h2>
				<ul>
			
					<li><a href="#" onmouseover="toggleDiv('div1',1)" onmouseout="toggleDiv('div1',0)">About Us</a></li>
					<li><a href="#">Software management/Installation</a></li>
					<li><a href="#">Small Network Setup</a></li>
					<li><a href="#">Computer/Network Security</a></li>
					<li><a href="#">Custom Computer Builds</a></li>
					<li><a href="#">Computer Password/Data --Recovery</a></li>
					<li><a href="#">Hard Drive And Data Encryption</a></li>
					<li><a href="#">Some Forensic Services</a></li>
					<li><a href="#">Other Services</a></li>

				</ul>
			</li>
			<li>
				<h2>Our Partners</h2>
				<ul>
					<li><a href="#">Put that link here!!</a> (23)</li>
					<li><a href="#">do it here</a> (31)</li>
					<li><a href="#">You'd like it here</a> (31)</li>
					<li><a href="#">How about your site here?</a> (30)</li>
					<li><a href="#">advertise here</a> (31)</li>
					<li><a href="#">put your link here!!</a> (30)</li>
					<li><a href="#">put your website here</a> (31)</li>
					<li><a href="#">You could be here too?!!</a> (28)</li>
					<li><a href="#" title="">Could be you!</a> (31)</li>
				</ul>
			</li>
		</ul>
	</div>
	<!-- end sidebar -->
</div>
</div>
<!-- end page -->
<div id="footer">
	<p>©Intensity-Technologies  •  Design by Cl0udnyn3 And Greeneyez.</p>

</div>

</body>
</html>

</body>
</html>


And the CSS
/*
Design by Cl0udnyn3 and Greeneyez(R.I.P)
*/




body {
	margin: 0;
	padding: 0;
	background: #000000 url(images/img01.jpg) repeat-x top center;
	font-size: 13px;
	color: #8C8C8C;
}

body, th, td, input, textarea, select, option {
	font-family: "Arial", "Arial", Arial, Arial, Arial;
}

h1, h2, h3 {
	font-weight: normal;
	color: #F8FBEC;
}

h1 {
	letter-spacing: -2px;
	font-size: 3em;
}

h2 {
	letter-spacing: -1px;
	font-size: 2em;
}

h3 {
	font-size: 1em;
}

p, ul, ol {
	line-height: 200%;
}

blockquote {
	padding-left: 1em;
}

blockquote p, blockquote ul, blockquote ol {
	line-height: normal;
	font-style: italic;
}

a {
	color: #9BDB18;
}

a:hover {
	text-decoration: none;
	color: #E6B715;
}

/* Popup Divs */

#div1, #div2, #div3 {
	position: absolute; 
	top: 231px; 
	width: 180px; 
	color: #91d016; 
	visibility: hidden}

#wrapper {
}
/* Header */

#header {
	width: 760px;
	height: 288px;
	margin: 0 auto;
	background: url(images/img02.jpg) no-repeat right top;
}

#header h1, #header p {
	margin: 0;
	color: #9CBC1E;
}

#header h1 {
	padding: 100px 0 0 70px;
}

#header p {
	padding-left: 73px;
	margin-top: -10px;
}
#header a {
	color: #E6B715;
}

/* Page */

#page {
	width: 760px;
	margin: 0 auto;
}

/* Content */

#content {

	float: right;
	width: 460px;
	margin: 0;
	padding-right:20px;
}
	img.floatLeft {
		float:left;
	}
	
	.summaryBox {
	margin: 0 0 0.25em 0;
	padding: 0;
	border: 0px solid #999;
	
}
	


	.summaryContent {
	height: 580px;
	padding: 3px;
	background-color: #000000;
	overflow: auto;
	color: #91d016;

}

	

.post {
	padding: 0 0 20px 0;
}

.title {
	margin: 0;
	padding-bottom: 5px;
	border-bottom: 2px solid #B7D24D;
}

.byline {
	margin: 0;
	color: #a9cd19;
}

.meta {
	text-align: left;
	color: #646464;
	padding: 10px 10px;
	height: 48px;
	background: url(images/img06.gif) no-repeat left top;
}

.meta .more {
	padding-left: 20px;
}

.meta .comments {
	padding-left: 20px;
}

.meta a {
	color: #003300;
}

/* Sidebar */

#search {
	float: left;
	width: 249px;
}

#search ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#search li {
}

#search li ul {
	padding: 15px 15px;
}

#search li li {
	border-bottom: 1px dotted #000000;
	padding-left: 15px;
}

#search h2 {
	margin: 0;
	padding: 10px 0 0 40px;
	height: 40px;
	background: url(images/img04.gif) no-repeat left 60%;
}

#search a {
	text-decoration: none;
}

#search a: class { 
width: 30px 
height: 40px
}

#search a:hover {
}


/* Footer */

#footer {
	clear: both;
	width: 760px;
	height: 40px;
	margin: 0 auto;
	padding: 20px 0 0 0;
	background: url(images/img05.gif) no-repeat left top;
	text-align: center;
	font-size: smaller;
	color: #52640A;
}

#footer a {
	color: #003300;
}



If you can help me I'd really appreciate it thank you!

Is This A Good Question/Topic? 0
  • +

Replies To: CSS Sticking !

#2 gregwhitworth  Icon User is offline

  • Tired.
  • member icon

Reputation: 219
  • View blog
  • Posts: 1,604
  • Joined: 20-January 09

Re: CSS Sticking !

Posted 31 July 2009 - 10:18 AM

You're page ended before the sidebar actually, not where your commented area was. I put the end div where it belongs and it works fine:

<!DOCTYPE HTML>

<!--
Design By Cloudnyn3 and GreenEyez(R.I.P)
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Intensity-technologies</title>
<meta name="keywords" content="Computer Repair technology" />
<meta name="description" content="Intensity-technologies" />
<link href="default.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript">
function toggleDiv(id,flagit) {
if (flagit=="1"){
	if (document.layers) document.layers[''+id+''].visibility = "show"
	else if (document.all) document.all[''+id+''].style.visibility = "visible"
	else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "visible"					}
else
 if (flagit=="0"){
	if (document.layers) document.layers[''+id+''].visibility = "hide"
	else if (document.all) document.all[''+id+''].style.visibility = "hidden"
	else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "hidden"							}
}
</script>

</head>
<body>
<div id="wrapper">
<!-- start header -->
<div id="header">

</div>
<!-- end header -->
<!-- start page -->
<div id="page">
	<!-- start content -->
	<div id="content">
		<div class="post">
			<h1 class="title">About Us</h1>
<div class="summaryBox">

</div>
 
<div class="summaryContent">
<img src="/vb/images/About_us.png" class="floatLeft">
Intensity-Technologies is an all purpose and highly productive Information Technology work group with a promise of providing a wide array of different technological services and resources at a very affordable rate and at an exceptionally quicker pace that most of todays mainstream choices for IT solutions. Many of today's common mainstream Help Desk and Service Technician companies use individuals who are often unqualified, trained for less than a week at a time and often are not truely knowledgable of all aspects of the field in which they work. This is a good way to save costs and bring in more money, but unfortunately its a bad way to work and treat costumers. A recent study conducted by Fox News showed that larger companies who hired these individuals knew far less about IT than the vast majority of the local or smaller computer shops and businesses. The reasoning behind this is that, the poeple who were being

  </div>
</div>
		   
		</div>
	
	<!-- end content -->
	<!-- start sidebar -->
	<div id="search">
   

<div id="div1">A Short Summary Of Our Business, Employees And Services We Provide To Clients And Customers..</div>

		<ul>
			<li>
				<h2>Services</h2>
				<ul>
		   
					<li><a href="#" onmouseover="toggleDiv('div1',1)" onmouseout="toggleDiv('div1',0)">About Us</a></li>
					<li><a href="#">Software management/Installation</a></li>
					<li><a href="#">Small Network Setup</a></li>
					<li><a href="#">Computer/Network Security</a></li>
					<li><a href="#">Custom Computer Builds</a></li>
					<li><a href="#">Computer Password/Data --Recovery</a></li>
					<li><a href="#">Hard Drive And Data Encryption</a></li>
					<li><a href="#">Some Forensic Services</a></li>
					<li><a href="#">Other Services</a></li>

				</ul>
			</li>
			<li>
				<h2>Our Partners</h2>
				<ul>
					<li><a href="#">Put that link here!!</a> (23)</li>
					<li><a href="#">do it here</a> (31)</li>
					<li><a href="#">You'd like it here</a> (31)</li>
					<li><a href="#">How about your site here?</a> (30)</li>
					<li><a href="#">advertise here</a> (31)</li>
					<li><a href="#">put your link here!!</a> (30)</li>
					<li><a href="#">put your website here</a> (31)</li>
					<li><a href="#">You could be here too?!!</a> (28)</li>
					<li><a href="#" title="">Could be you!</a> (31)</li>
				</ul>
			</li>
		</ul>
	</div>
	<!-- end sidebar -->
</div>
</div>
<!-- end page -->
</div>
<div id="footer">
	<p>©Intensity-Technologies  •  Design by Cl0udnyn3 And Greeneyez.</p>

</div>

</body>
</html>

</body>
</html>



Was This Post Helpful? 1
  • +
  • -

#3 cloudnyn3  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 24
  • Joined: 29-July 09

Re: CSS Sticking !

Posted 31 July 2009 - 08:10 PM

View Postgregwhitworth, on 31 Jul, 2009 - 09:18 AM, said:

You're page ended before the sidebar actually, not where your commented area was. I put the end div where it belongs and it works fine:

<!DOCTYPE HTML>

<!--
Design By Cloudnyn3 and GreenEyez(R.I.P)
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Intensity-technologies</title>
<meta name="keywords" content="Computer Repair technology" />
<meta name="description" content="Intensity-technologies" />
<link href="default.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript">
function toggleDiv(id,flagit) {
if (flagit=="1"){
	if (document.layers) document.layers[''+id+''].visibility = "show"
	else if (document.all) document.all[''+id+''].style.visibility = "visible"
	else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "visible"					}
else
 if (flagit=="0"){
	if (document.layers) document.layers[''+id+''].visibility = "hide"
	else if (document.all) document.all[''+id+''].style.visibility = "hidden"
	else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "hidden"							}
}
</script>

</head>
<body>
<div id="wrapper">
<!-- start header -->
<div id="header">

</div>
<!-- end header -->
<!-- start page -->
<div id="page">
	<!-- start content -->
	<div id="content">
		<div class="post">
			<h1 class="title">About Us</h1>
<div class="summaryBox">

</div>
 
<div class="summaryContent">
<img src="/vb/images/About_us.png" class="floatLeft">
Intensity-Technologies is an all purpose and highly productive Information Technology work group with a promise of providing a wide array of different technological services and resources at a very affordable rate and at an exceptionally quicker pace that most of todays mainstream choices for IT solutions. Many of today's common mainstream Help Desk and Service Technician companies use individuals who are often unqualified, trained for less than a week at a time and often are not truely knowledgable of all aspects of the field in which they work. This is a good way to save costs and bring in more money, but unfortunately its a bad way to work and treat costumers. A recent study conducted by Fox News showed that larger companies who hired these individuals knew far less about IT than the vast majority of the local or smaller computer shops and businesses. The reasoning behind this is that, the poeple who were being

  </div>
</div>
		   
		</div>
	
	<!-- end content -->
	<!-- start sidebar -->
	<div id="search">
   

<div id="div1">A Short Summary Of Our Business, Employees And Services We Provide To Clients And Customers..</div>

		<ul>
			<li>
				<h2>Services</h2>
				<ul>
		   
					<li><a href="#" onmouseover="toggleDiv('div1',1)" onmouseout="toggleDiv('div1',0)">About Us</a></li>
					<li><a href="#">Software management/Installation</a></li>
					<li><a href="#">Small Network Setup</a></li>
					<li><a href="#">Computer/Network Security</a></li>
					<li><a href="#">Custom Computer Builds</a></li>
					<li><a href="#">Computer Password/Data --Recovery</a></li>
					<li><a href="#">Hard Drive And Data Encryption</a></li>
					<li><a href="#">Some Forensic Services</a></li>
					<li><a href="#">Other Services</a></li>

				</ul>
			</li>
			<li>
				<h2>Our Partners</h2>
				<ul>
					<li><a href="#">Put that link here!!</a> (23)</li>
					<li><a href="#">do it here</a> (31)</li>
					<li><a href="#">You'd like it here</a> (31)</li>
					<li><a href="#">How about your site here?</a> (30)</li>
					<li><a href="#">advertise here</a> (31)</li>
					<li><a href="#">put your link here!!</a> (30)</li>
					<li><a href="#">put your website here</a> (31)</li>
					<li><a href="#">You could be here too?!!</a> (28)</li>
					<li><a href="#" title="">Could be you!</a> (31)</li>
				</ul>
			</li>
		</ul>
	</div>
	<!-- end sidebar -->
</div>
</div>
<!-- end page -->
</div>
<div id="footer">
	<p>©Intensity-Technologies  •  Design by Cl0udnyn3 And Greeneyez.</p>

</div>

</body>
</html>

</body>
</html>



Wow, yeah I'm feeling pretty stupid right now, I even went over those to make sure that wasn't the problem >_<

anyway thanks I appreciate it alot!
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1