CSS - Div Not Floating & H-scroll Issue

I've been beating my head against the wall over this problem for two nights now.

I'm working on our new site and everything is formatting well across all major browsers. But when I go to print the page, the results are less than desirable, except for Opera on my Mac. For some reason that browser handles floating divs great. But Safari, Firefox 3 and IE 7 all barf on the divs.

Particularly, if the text in my main content area exceeds a page length, the remaining text displayed on subsequent pages is displayed down the page and not at the top like one would expect. Another problem is that sometimes the first page will just show me the header and menu of my content and will begin displaying the main content on the second page.

I've played around with clearing floats when printing but this just re-arranges the divs and of course overlaps with other floats.

Could one of you experts please take a look at this page in particular and the accompanying main.css file and tell me a quick way to prevent this with using just css attributes.

An example page is he www proterraonline com / dev / team.asp

While I have a print css linked in the source of the html, the code is the same as in the main.css at the moment.

Here's a link to the css file to make life a little easier.
www proterraonline com / dev / css / main.css

Thanks.

I've defined three classes in this page but now I can't scroll down to the end of the page. the vertical scroll bars are missing. why is that?

hello. i am having some trouble, my page has a scroll bar at the bottom but there is nothing there to scroll. It is only a centimeter or so but still aint good!! It is just background...yet i have not idea why, can anyone please help...

I have pasted two stylesheets that im using there is also a text one but i doubt that is the prob!!

Code:

body {
	margin:0px;
	padding:0px;
	font-family: Georgia;
	color:#333;
	background-color:#FFFFD2;
	}
h1 {
	margin:0px 0px 15px 0px;
	padding:0px;
	font-size:28px;
	line-height:28px;
	font-weight:900;
		color:#ccc;
	}
p {
	font:11px/20px Georgia;
	margin:0px 0px 16px 0px;
	padding:0px;
	}
#Content>p {margin:0px;}
#Content>p+p {text-indent:30px;}

a {
	color:#ffffd2;
	font-size:13px;
	text-decoration:none;
	/*font-weight:600;*/
	font: Georgia;
	}
a:link {color:#ffffd2;}
a:visited {color:#ffffd2;}
a:hover {background-color:#A4AA54;}

a.blue {
	color:#0000CC;
	font-size:11px;
	text-decoration:none;
	font-weight:600;
	font: Georgia;
	}
a.blue:link {color:#0000CC;}
a.blue:visited {color:#0000FF;}
a.blue:hover {background-color:#eee;}
#logodiv {
	position:absolute;
	top:6px;
	left:14px;
	width:91px;
	height:126px;
	background-image: url(../images/logo/gglogoweb.gif);
	background-position: 1% 2px;
	background-repeat:no-repeat;
	visibility: visible;
	z-index:1;
}
#slogandiv {
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:137px;
	background-color:#A4AA54;
	visibility: visible;
	z-index:0;

/* This is a fix for IE% */
	voice-family: "\"}\"";
	voice-family:inherit;
	height:137px;
	width:100%; /* the correct height */
	}
/* "be nice to Opera 5" */
body>#slogandiv {height:137px; width:100%;}

#MenuBar {
	position:absolute;
	top: 136px;
	left:0px;
	width:100%;
	height:32px;
	padding-bottom:2px;
	background-color:#667138;
	border-bottom:0px solid #A4AA54;
	line-height:17px;
	z-index:1;
	/* Again, the ugly brilliant hack. */
	voice-family: "\"}\"";
	voice-family:inherit;
	height:32px;
	}
/* Again, "be nice to Opera 5". */
body>#MenuBar {width:100%; height:32px;}

#Content {
	position:absolute;
	top: 175px;
	left: 185px;
	width: 81%;
	padding:15px;
	border: 0px solid #000000;
	background-color:#ffffd2;
	z-index:0;
	}
body>#Content {width:81%;}
	
		
#Menu {
	position:absolute;
	top: 166px;
	left:0px;
	width:150px;
	padding:10px;
	background-color:#667138;
	border-right:2px solid #A4AA54;
	border-top:0px solid #A4AA54;
	line-height:17px;
	/* Again, the ugly brilliant hack. */
	voice-family: "\"}\"";
	voice-family:inherit;
	width:150px;
	}
/* Again, "be nice to Opera 5". */
body>#Menu {width:150px;}

and the other
Code:

/* CoolMenus 4 - default styles - do not edit */
.clCMAbs{position:absolute; visibility:hidden; left:0; top:0}
/* CoolMenus 4 - default styles - end */
  
/*Style for the background-bar
.clBar{position:absolute;  width:10; padding-right:10; height:10; background-color:#667138; layer-background-color:yellow; visibility:hidden}

/*Styles for level 0*/
.clLevel0,.clLevel0over{position:absolute; padding-top:3px; font-family:georgia; font-size:12px; font-weight:bold; text-align:center; }
.clLevel0{background-color:#667138; layer-background-color:#667138; color:#ffffd2;}
.clLevel0over{background-color:#A4AA54; layer-background-color:#A4AA54; color:#ffffd2;; cursor:pointer; cursor:hand; }
.clLevel0border{position:absolute; visibility:hidden; background-color:#667138; layer-background-color:#667138}

/*Styles for level 1*/
.clLevel1, .clLevel1over{position:absolute; padding:2px; font-family:georgia; font-size:11px; text-align:center;}
.clLevel1{background-color:#667138; layer-background-color:#667138; color:#ffffd2;}
.clLevel1over{background-color:#A4AA43; layer-background-color:#A4AA54; color:#ffffd2; cursor:pointer; cursor:hand; }
.clLevel1border{position:absolute; visibility:hidden; background-color:#A4AA54; layer-background-color:#A4AA54}

/*Styles for level 2*/
.clLevel2, .clLevel2over{position:absolute; padding:2px; font-family:tahoma,arial,helvetica; font-size:10px; font-weight:bold; text-align:center;}
.clLevel2{background-color:Navy; layer-background-color:Navy; color:white;}
.clLevel2over{background-color:#0099cc; layer-background-color:#0099cc; color:#667138; cursor:pointer; cursor:hand; }
.clLevel2border{position:absolute; visibility:hidden; background-color:#006699; layer-background-color:#006699}/* CSS Document */

i can paste the php file too if needed but it iwll have to be in another post because im running out of spce in this one!!

If anyone can help that would be really appreciated!

Thanks very much

RF

Hi,

Can someone help me with why the following header bar doesn't work in Firefox? It just shows the very top of the bar with the two other divs inside of it.

Code:

<div class="cmsHeader">
	<div style="float: left;">Page Name</div>
	<div style="float: right;"><a href="" title='Add Page'><img src='images/icons/file_(add)_16x16.gif' border='0' alt='Add Page'></a></div>
</div>


.cmsHeader{
	background: #809096;
	padding: 5px;
	width: 98%;
	color: #FFFFFF;
}

.cmsHeader a{
	color: #FFFFFF;
	text-decoration: none;
}
.cmsHeader a:hover{
	text-decoration: underline;
}

Learning CSS and trying to emulate the following table:
Code:

|--------------------------------------|
| Text 1           |----------------|  |
| Text 2           |  Inner box text|  |
| Text 3           |----------------|  |
|--------------------------------------|

I can get a nested div to work vertically but not horizontally. I'm trying:

Code:

        div#container { float: left }
        div#title { float: right }
	<div id="container">
	        hello<br>hello
		<div id="title">
			Text 1<br />
                        Text 2
		</div>
	</div>

Which is producing:
Code:

|--------------------------------------|
| Hello                                |
| Hello                                |
|                  |----------------|  |
|                  |  Text 1        |  |
|                  |  Text 2        |  |
|                  |----------------|  |
|--------------------------------------|

Perhaps a positioning thing which I don't understand yet? It's not homework so you don't have to do it for me, but rather you could just point to knowledge sources.... Tx!

Hi Everyone,

I've been doing modest CSS for a while now and feel like I have a good grasp of it, and generally find a way of doing what I want. But, this has always bugged me and I need to understand what is going on...

I think it's a question of Floating.

This is in reference to http://www.arabellamusic.co.uk

I want the blog posts to be on the left, and some other content on the right. How is the best way to go about doing this? You can check my source, but this was my thinking:

Code:

HTML

<div class='inner'>
     <div class='left'>
     BLOG PHP HERE
     </div>

     <div class='right'>
     SOME OTHER STUFF HERE
     </div>
</div>

And the CSS:

.inner { width:788px; }
.left { float:left; width:50%; }
.right { float:left; width:50%; }

If you grab my stylesheet and my source, you will see that I have a couple more things in there, but I don't think they could be affecting the rest (text-align etc...)

So, am I doing this wrong? I have floated columns in other websites this way and it sometimes works, sometimes doesn't. Incidentally, once it would only work when I set 49% to each, I was assuming this was something to do with the box model I read about, but wasn't too sure.
I will try not to play around with the site too much until I get a reply or two, but a few things may jump around as I try stuff!

Thanks in advance...
James

hi,

i am a total newbie with css and trying to create a floating divider. an example can be seen at www.payjunction.com.
does anyone know a tutorial on how to create one?
thanks for the help in advance

I currently have the following layout

Code:

<table>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>

how do i go about making the same layout but using CSS. Each <td> is 50% wide

I have 3 tables in a div. I have two of the tables one on top of the other. I wanted to place the third table to the left of the bottom table. So I placed the second table relative and left -50px. I placed the third with position absolute, top -70px and float right to achieve this layout. Is there a better way of doing this out of curiousity?

I'm trying to float my navigation to the right side of the screen, but not messing up the order of the links. (left to right as in 1.2.3.4.5).

The problem I'm having is the links go right, but so does the order of the links (they show right to left 5.4.3.2.1).

Here's the CSS:
Code:

ul#nav {
	width: 890px;
	font-size: 0.70em;
	list-style: none;
	padding: 0;
	margin-top: 3em;
	float: left;
	clear: both;
}

ul#nav li {
	background-color: #0776a0;
	text-align: left;
	float: right;
	text-transform: uppercase;
	border-right: 2px solid #279bd5;
	display: block;
}
	
ul#nav li a, ul#nav li a:visited {
	display: block;
	padding: 0.4em 4em 0.4em 0.4em;
	color: #FFF;
	text-decoration: none;
}
	
ul#nav li a:hover {
	color: #FFF;
	background-color: #279bd5;
	text-decoration: none;
}
		
ul#nav li a.current, ul#nav li a.current:visited, ul#nav li a.current:hover {
	color: #FFF;
	text-decoration: none;
}

And here's the html
Code:

	<ul id="nav">
		<li><a href="Home" title="Home">Home</a></li>
		<li><a href="Example" title="Example">Example</a></li>
	</ul>

Will also post website with the example if asked.

http://jordanmeeter.com/new/links.php

If you view that page in Firefox, it displays how it is supposed to. But if you view the page in Internet Explorer, you can see that it is severely ****ed up!

Any suggestions?

Thanks,
Jordan

I have recently created a design in which the main content and sidebar are both floated right, but I've been having a problem.

For whatever reason, the main content has been floating slightly below my sidebar.

Could anyone please look at the code and tell me how to fix it? Thanks a ton, go here to view my problematic design. I've had to write the address differently because "new user accounts are not permitted to create posts containing URLs."

wendyhenrichs (dot) com (slash) pin.

If you had trouble understanding my above message, here's the address with spaces in them (just remove the spaces in your address bar):

http:// www . wendyhenrichs . com / pin

Please just take a quick look.

Thanks!

hey I am trying to get this sub menu floating on the rollover of a list item. Here's my HTML:

Code:

<body>

<div id="banner">
</div>

<div id="leftmenu">
<ul>
<li>List 1</li>
<li><a href="">List 2</a></li>
<li><a href="">List 3</a>
	<ul>
	<li><a href="">List 3.1</a></li>
	<li><a href="">List 3.2</a></li>
	<li><a href="">List 3.3</a></li>
	<li><a href="">List 3.4</a></li>
	</ul>
</li>
<li><a href="">List 4</a></li>
<li><a href="">List 5</a></li>
<li><a href="">List 6</a></li>
<li><a href="">List 7</a></li>
<li><a href="">List 8</a></li>
<li><a href="">List 9</a></li>
</ul>
</div>

<div id="maincontent">
CONTENT
</div>

</body>

and this CSS:

Code:

#leftmenu {
	position: absolute;
	margin: 0px;
	top: 120px;
	left: 0px;
	width: 147px;
	height: 800px;
	background-color: #cccc66;
	font-size: 10px;
	font-weight: bold;	
}

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

ul li {
	color: #FFFFFF;
	display: block;
	background-color: #FF0000;
	margin-bottom: 1px;
	text-align: right;
	font-weight: bold;
}

ul li a {
	text-decoration: none;
	color: #FFFFFF;
}

ul li a:hover {
	color: #000000;
}

ul li ul {
	display: none;
	position: absolute; 
	top: 200px;
	left: 100px;
}

#maincontent {
	position: absolute;
	z-index: 0;
	left: 147px;
	top: 120px;
	height: 381px;
	width: 100%;
	padding-top: 10px;
	padding-left: 10px;
	margin-top: 0px;
	margin-left: 0px;
	background-color: #FFFFFF;
	font-family: Arial;
	font-size: 13px;
}

so yeah, I am struggling at this point, I have looked at a reference that someone gave me last time I brought up the issue, but can't get it working, if you can spot why, help would be appreciated, not having much luck, thinking maybe a syntax thing(?), not sure...HELP!!

kr.

Hi,
I'm getting very frustrated trying to float in image to the right and vertically aligned in a TD cell.
This is a actually a vBulletin Forum Home Page and I want to display an image in the forum description.
With the inline CSS below I keep getting a new line which I don't want. I want the text "Forum description goes here" with the image vertically aligned on the right hand side of the TD cell.

Code:

<td class="alt1Active" align="left" id="f34">
	<div>
		<a href="http://www.myurl.co.uk/forums/test_forum/"><strong>Test Forum</strong></a>
	</div>
	<div class="smallfont">
		Forum description goes here.
		<!-- *** THIS IS THE BIT I HAVE CONTROL OVER *** -->
		<div align="right" valign="top" style="float:right;">
			<a href="http://www.myurl.co.uk">
			<img src="http://www.myurl.co.uk/picture.jpg" style="border:0px;">
			</a>
		</div>
		<!-- ****** -->
	</div>
</td>

Hi, I'm trying to display text in a floating div in the middle of the page. The style is as follows:

Code:

.mainContentAreaBackground {
	position:absolute;
	z-index:11;
	top: 190px;
	left: 230px; 
	width:70%;
	height:72%;   
}

#mainContentArea{
	z-index:12;
	position:absolute;
	overflow:auto;
	overflow-x:hidden;
	width: 67%;
	height: 68%;
	top:205px;
	left:246px;
	text-align:left;
	font-family:Tahoma;
	font-size:10.0pt;
	visibility:visible;
}

There are two anomalies which I think might be bugs in IE's implementation of CSS, and I was hoping someone might be able to give me some advice as to how to get around them. The first problem is that, when going to highlight text in the main content area, all objects on the page are selected, rather than just the intended text. The second anomaly is that, when using the mouse wheel to scroll down in the mainContentArea div when there's overflow, the cursor needs to be hovering over text. If it's hovering over any place with a "hole" in it, such as the space between paragraphs, then it will not scroll. Everything works fine in Firefox.
You can see what I'm talking about he
http://www.cs.mcgill.ca/~jbeard4/lepdev

If anyone has any advice, please let me know.
Thanks!

-Jake