CSS - Divs Around Content Breaking

Hey all, I have the following site: http://www.trshady.com

All works fine but for SEO reasons along with my own desire to learn, I'm wanting to know how to change the code so that the layout stays the same, but the content of the page comes first in the code.

So I have a 'topbar' div and a 'content' div. Without using absolute posistioning, how can I go about having the content div before the topbar div but still have it display the same as it currently does?

Thanks for any help

Hi,

I'm racking my brain here and I can't figure out what I'm doing wrong.

First of all, I have a "sidebar" div that is being pushed outside of the page, even though there is plenty of room for it in the content.

http://65.175.116.253/design/demo.html

I have included the CSS below, followed by the HTML and you can get the rar file for the entire layout at the following link

http://65.175.116.253/design/design.rar

I've been racking my head! All I want is the side bar, the two boxes way off to the right, to be floated to the right hand side of the screen, contained within the page. I can't figure out what I'm doing wrong.

Can somebody look at this and tell me what I am doing wrong? I will paypal $5 to who ever figures it out..





Code:

/*--- Generic Styles ---*/

body 
	{
	background: #e3edc2; color: #333;
	font: .8em,  Arial, verdana, sans-serif;
	margin: 0; 
	padding:0px;

	}
	
	#main {width:840px; margin:18px auto 0 auto; _text-align:left;}

a
	{
	color: #686397;
	}

a img
	{
	border: 0px none;
	}

p
	{
	margin: 0 0 1em;
	}
	
	
.smallboldtext 	
	{ 
	font-family: verdana, helvetica, sans-serif;
   	color: #686397;
   	font-size: .7em;
	font-weight: bold;
	}
	

.mediumtext 
	{ 
	font-family: verdana, helvetica, sans-serif;
  	color: #686397;
  	font-size: .9em;
	}
	
.mediumboldtext 
	{ 
	font-family: verdana, helvetica, sans-serif;
  	color: #686397;
  	font-size: .9em;
	font-weight: bold;
	}
	
.largetext 
	{
	font-family: verdana, helvetica, sans-serif;
   	color: #686397;
   	font-size: 1.5em;
	}
	

	/*--- Header Styles ---*/
	
	
#header 
	{
	margin-bottom: 1.75em; 
	padding-top: 1px;
	background: #abd240;
	}
	
	
#navbar 
	{	
	margin: 0; 
	padding: 0.5em 3em;
	background: #686397; 
	color: #fff;
	}
	

#navbar li
	{
	display: inline;
	margin-right: 0.5em; padding-right: 0.75em;
	border-right: 1px solid #99c;
	font-weight: bold;
	
	}


#navbar li.last 
	{
	border: 0px none;
	}
	

#navbar a
	{
	color: #d4ec84;
	text-decoration: none;
	}
	

#today
	{
	text-align: right;
	margin-top: -1.66em; padding: 0 2em 0 0;
	color: #fff;
	line-height: 1;
	}
	
	
	/*--- Content Styles ---*/
	
#content 
	{
	float: left;
	padding: 0 20em 4em 3em;
	width: 100%;
	}
	

#content h1
	{
	background: #fff; color: #686397;
	font-size: 1.5em;
	margin: 0 33% 1.25em -2em; padding: 0.4em 2em;
	}

	
#content h1 b
	{
	color: #b0d742;
	}
	
	
#content h2
	{
	margin: 0.5em 0; padding-bottom: 0.25em;
	border-bottom: 1px solid #b0d742;
	font-size: 1.5em;
	}
	
	
	/*--- Content Styles ---*/
	
table.basic
	{
	border: 0px;
	width: 100%;
	border-collapse: collapse; 
	}
	
table.basicborder
	{
	border: 2px solid #b0d742;
	width: 505px;
	border-collapse: collapse; 
	}

table.mainsearch 
	{
	border: 2px solid #b0d742;
	width: 415px;
	border-collapse: collapse; 
	}
	


/*--- Sidebar Styles ---*/



#sidebar 
	{
	float: left;
	width: 17em;
	margin: 0 0 4em -18em; /* this creates a mathematical layout width of -1 */
	}
	
#sidebar div h3{
	background: #9b96ca;
}
#sidebar form_div 
	{
		margin: 0; padding: 0.8em;
	}
	
#sidebar div{
	background: #3a3c2d; color: #fff;
	padding: 0 1em 1em;
	margin-top: 0.75em;
}
#sidebar div h3{
	font-size: 1.25em;
	margin: 0 -0.8em; padding: 0.4em 0.8em;
	text-transform: lowercase;
}
	
	
#whatiscompany h4{
	margin: 0 0 0.5em; padding: 0.5em 0;
	border-bottom: 1px solid #fff;
	font-weight: normal;
}
#whatiscompany p:first-line{
	font-style: italic;
}
	
	

/*--- Footer Styles ---*/

#footer 
	{
	clear: both;
	padding: 1.5em 3em;
	background: #a0c63a;
	height: 15px;
	}

#footer p 
	{
	margin: .1em;
	}

#footer a 
	{
	color: #333;
	text-decoration: underline;
	}

-------------------------------------------------------

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>www.company.com/</title>
		<link href="css.css" type="text/css" rel="stylesheet" media="screen">
		<!--[if IE]>
			<style type="text/css">
				#today{
					text-align: right;
					margin-top: 0;
					margin-bottom: 0;
					padding: 0 2em 0 0;
					position: relative;
					top: -1.66em;
					color: #fff;
					font-weight: bold;
					line-height: 1;
				}
			</style>
		<![endif]-->
	</head>
	<body>
		<!-- mockup, adding borders | markup, using float for layout (or the appropriate section) -->
		<div id="header">
			<img src="logo.jpg" alt="a link to the home page" width="231" height="52">
			<ul id="navbar">
				<li class="first">
				<a href="http://www.company.com">nav link</a></li>
				<li><a href="http://www.company.com">nav link</a></li>
				<li><a href="http://www.company.com">nav link</a></li>
				<li><a href="http://www.company.com">nav link</a></li>
				<li><a href="http://www.company.com">nav link</a></li>
				<li><a href="http://www.company.com">nav link</a></li>
				<li><a href="http://www.company.com">nav link</a></li>
				<li class="last"><a href="http://www.company.com">nav link</a></li>
			</ul>
			<p id="today">date here</p>
		</div> <!-- end div id header -->

<div id="content">
<h1><b>home:</b> search</h1>
<img src="flash.jpg"><br>

<h2>quick search</h2>
<table class="mainsearch">

<tr>
<td>

<FORM action="http://company.com/" method="post">

<input type="radio" name="quicksearch"><span class="smallboldtext">title</span>
<br>
<input type="radio" name="quicksearch"><span class="smallboldtext">title</span>
<br>
<input type="radio" name="quicksearch"><span class="smallboldtext">title</span>
<br>
<input type="radio" name="quicksearch"><span class="smallboldtext">title</span>
<br>
<input type="radio" name="quicksearch"><span class="smallboldtext">title</span>
<br>
<input type="radio" name="quicksearch"><span class="smallboldtext">title</span>
<br>
<input type="radio" name="quicksearch"><span class="smallboldtext">title</span>
<br>
 
</td>
 
<td width="285" valign="top">
<br>
&nbsp;<span class="smallboldtext">Keywords - </span><input type="Text" name="keywords" size="25">
<br>
&nbsp;<span class="smallboldtext">Within - </span><select name="distance">
<option value="50"
>
50
</option>
<option value="Any"
>
Any
</option>
<option value="1"
>
1
</option>
<option value="5"
>
5
</option>

</select>
<select name="distance_measure">
<option value="Miles"
>
Miles
</option>
<option value="kilometers"
>
Kilometers
</option>
</select> <span class="smallboldtext">of</span>
<br>
&nbsp;<span class="smallboldtext">City & State or Zip - </span> <input type="Text" name="zip" size="15">
<br>
<center>
<input type="submit" name="search" value="search">
</center>
</FORM>
</td>
</tr>
</table>
		
</div> <!-- end div id content -->
				
							<div id="sidebar">
				<div id="whatiscompany">
<h3>what is company.com?</h3>
<h4>www.company.com</h4>
<p>				This is simply example text that goes here. Sample example text is in this place. You can read the sample text here it is. 
<br>
</p>
</div> <!-- end div id whatistea -->

<div id="loginsidebar">
<h3>login</h3>
<br>
<form action="http://company.com" method="post" name="login">
<p>
&nbsp;Username - <INPUT type="Text" name="member_user_name" size="12">
<br>
&nbsp;Password - <INPUT type="password" name="member_password_a" size="12">
<INPUT type="submit" name="submit" value="login" >
</FORM>
<br>
<a href="http://company.com">Forget Your Password?</a>
<br>
<br>
</p>
</div> <!-- end div id loginsidebar -->
</div> <!-- end div id sidebar -->

<div id="footer">
			<p>
			- <a href="http://company.com">nav link</a>
			- <a href="http://company.com">nav link</a>  
			- <a href="http://company.com">nav link</a>
			- <a href="http://company.com">nav link</a> 
			- <a href="http://company.com">nav link</a>
			- <a href="http://company.com">nav link</a> 
			- <a href="http://company.com">nav link</a> 
			- <a href="http://company.com">nav link</a> 
			- <a href="http://company.com">nav link</a> 
			- <a href="http://company.com">nav link</a> 
			- <a href="http://company.com">nav link</a> 
			- 
			</p>

		</div> <!-- end div id footer -->
	</body>
</html>

Hi everyone

I have a 3 column layout with a footer. If the content ends up being too wide for the middle column (ie a large data table) I can't get the middle column to push the right hand column beyond the width of the screen. If the right column is absolutely positioned, the middle column just continues underneath the right column (overlaps). If the right column is floated right, it just drops down below the middle column. What I want it to do is bring up a horizontal scroll bar in the browser and let people scroll across for the right column.

Based on the code below, if anyone has any ideas I would be unbelievably greatful. I've been pulling my hair out all day...

My HTML is as follows:

Code:

<div id="content_container"> 
  <div id="lft"> 
   ... 
  </div> 
  <div id="mainbody"> 
   .... 
  </div> 
  <div id="rght"> 
   ... 
  </div> 
  <div id="footer"> 
   ... 
  </div> 
</div>

My relevant CSS is as follows:

Code:

#content_container { 
   position: relative; 
   min-height: 100%; 
   top: 0; 
   left: 0; 
   width: auto; 
   height: auto; 
   border: 1px solid red; 
} 

#lft { 
   float: left; 
   left: 0; 
   top: 0; 
   width: 24%; 
   visibility: visible; 
} 

#mainbody { 
   position: relative; 
   left: 0; 
   top: 0; 
   width: 50%; 
   height: auto; 
   visibility: visible; 
} 

#rght { 
   position: absolute; 
   right: 0; 
   top: 0; 
   width: 22%; 
   visibility: visible; 
   padding-right: 10px; 
} 

#footer { 
   float: left; 
   bottom: 0; 
   left: 0; 
   top: 0; 
   clear: both; 
   width: 100%; 
   margin-top: 40px; 
   padding-top: 15px; 
   padding-bottom: 15px; 
   visibility: visible; 
}

I have a container div which includes a #header div, a left-floated #content div, a #right div, and a #footer div. The #content div has a background image that does not want to extend all the way down within the div to snuggly join the footer in any IE browser. I've tried the Holly hack, adding a line-height, relative positioning but to no avail. The stylesheet is embedded in the html file. Here's the link:

http://www.emaycreations.net/BuildWebsiteIII/Week6/finalexamPractice.html

It looks great in NN, FF and Opera but neither IE 5 nor 6 displays the page correctly. Can anyone help?

Mari-Anne in Montana

Hi everyone.

I have a header with a menu div inside of it with the following settings:
position: absolute
margin-left: 250px
margin-right: auto

and height...

Now, below that menu, I have a sub menu - it uses the same settings, with a bigger height of course, but it is styled completely different.

The idea is, I want the sub menu to be different for every page the user is on. The main menu may change, I.e., have an extra menu item in it for specific pages.

So, this is what I am trying to achieve...

If MAIN MENU is a longer length then SUB MENU, I would like the sub menu to be the same width. Keeping in mind that the main menu is fluid and width is not set.

Now, alternatively, if the SUB MENU is longer than the main menu, I would like the main menu to be the same length as the sub menu, again, keeping in mind that the sub menu is also fluid and will change width depending on the number of menu items.

I mean, I know I could just set some arbitrary width for both, something I am sure will be wide enough despite what is inside of each menu, but I'd really rather avoid doing that, I don't want them both to always be X width, rather, I want the width to be able to change, but both at the same time, not one or the other.

I hope that explains what I'm trying to accomplish here, if not, please feel free to ask any questions that would help you understand what I mean better.

Thank you much.

I have this page:

http://www.taleria.net/ken/

It looks beautiful in Firefox but in IE only the page background shows up. If I comment out the entire CSS file the page shows up in IE so it's obviously a problem with my CSS code - but I don't know where the problem is.

Any pointers would be appreciated:

Code:

<style type="text/css">
<!--
body
{
  background: url(http://www.taleria.net/ken/images/bg2.jpg) repeat-x left top;
  font-family: arial;
}
td
{
  font-family: arial;
  font-size: 13px;
}
.navfont
{
  font-variant: small-caps;
  font-weight: bold;
	color: black;
}
a.navfont
{
	color: black;
	text-decoration: none;
}
.main_heading
{
  font-variant: small-caps;
  font-weight: bold;
  font-size: 14px;
  color: #000033;
}

.bodytable
{
  background: url(http://www.taleria.net/ken/images/headingbg.jpg) repeat-x left top;
}

a
{
	color: #393d5a;
}

/************************/
/* BEGIN SUCKERFISH*/
/************************/

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

#nav a {
  font-weight: bold;
	color: black;
}

#nav a {
	text-decoration: none;
}

#nav li li a {
	display: block;
	font-weight: normal;
	color: black;
	padding: 0.2em 10px;
}

#nav li li a:hover {
	padding: 0.2em 5px;
	border: 5px solid #393d5a;
	border-width: 0 5px;
}

#nav li {
	float: left;
	position: relative;
	cursor: default;
	background-color: white;
	padding-right: 1.2em;
}

#nav li#first
{
	padding-right: 1.2em;
}

#nav li#last
{
	padding-left: 1.2em;
	padding-right: 0;
}

#nav li ul {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	font-weight: normal;
	background: url(http://www.taleria.net/ken/images/ddbg3.gif) bottom left no-repeat;
	padding: 0.5em 0 1em 0;
	border-right: solid 1px #393d5a;
}

#nav li>ul {
	top: auto;
	left: auto;
}

#nav li li {
	display: block;
	float: none;
	background-color: transparent;
	background-image: none;
	border: 0;
}

#nav li:hover ul, li.over ul {
	display: block;
}

/************************/
/* END SUCKERFISH*/
/************************/

</style>

I have customised an open source wordpress template for my website and somewhere along the line seem to have broken the navigation as it appears in IE6,7,8. I use a mac so I didn't identify the problem straight away and I'm not sure how to fix it. I can work my way around CSS usually but I find navigation very difficult to grasp and so any help would be very much appreciated.

blackmarlinfishingblog.com

Problem:
The child items of the navigation (drop downs) are appearing under the slideshow so you can't click on them.

Thanks again in advance for any help you may be able to give!

ok this isnt so much a need for code, more an need for information. I have worked out how to page break
Code:

<STYLE TYPE="text/css">
     H2 {
       page-break-befo  always
     }
</STYLE> 
<div class="H2"> </div>

I am assuming this is right, as the page will always break after the <div>
But I would like to know how much success people have had with this? I have tried using it and it doesnt seem to work on IE 6.0. Any luck with any other browsers? I am just wondering whether im doing it wrong or it isnt supported fully yet.

Just when you thought you got everything under control, something backfires.. lol
Please see acengage.com and try the Reach Us tab under IE 7.0 - and you'd see a broken tab with a line underneath. I have tried every sane CSS maneuver to fix it, but in vain.
Any help would be greatly appreciated!

Thanks in advance!

I inherited a big huge site; so there is way much going on; this is a simplification...

I am trying to use CSS to divide it into columns, with a column as a div. For debugging, I draw a border around the columns to show me the boundaries. But when I include the following code within the column div:

Code:

<div class="mycolumn">             
<p>Hi, I'm in the Div!</p>
<table><tr><td><p> I'm in the table</p> </td></tr></table>
<p>Hi, I'm after the table; I would expect to still be in the div</p>
</div>

The bottom border of the div is drawn right beneath the words "Hi, I'm in the Div", and both "I'm in the table" and "I'm after the table" are outside the box boundary.

This does NOT happen if I create a separate test html file and include my Column CSS, but it does happen withing the application.

Now, what's going on in the application is extremely complex, involving dozens of included CSS files, javascript, smarty templates which include other smarty templates, and over 4000 files in all.

Could one of the other CSS files or something else be redefining <td> somehow, or any other obvious thing that could be breaking the div?

Obviously, I keep trying to debug it, but if any old hand has an explanation that might save me another 8 hours, that would be greatly appreciated.

Thanks,

Chris

First off, thanks for reading.

I've finally been hit with a document that requires I create some smart page breaking.
What I need to do is get the document to have a page break only after certain things and not within those certain things.
What I've done is surrounded these things with <div> tags and put this in my stylesheet:
DIV {page-break-inside:avoid;}
However, this fails miserably.
I also looked at this site, but in Mozilla 1.6 and IE 6, the elements were all broken by page breaks.

Anyone had any successful experience with this?

Thanks in advance,
colin

Hi

I have 3 background images that make up the background for my navigation you can see here http://dmumford.bizhat.com/test/about.htm

When viewed in FF and Netscape it breaks in 3 positions, in IE just below the top image.

Does anyone know why, and can they please help me

Thanks

I recently inherited an application that, in my opinion, is poorly written. It relies heavily on tables, like so:

Code:

...
<table>
<tr>
<td>Error:</td>
<td>
<table>
<tr>
<td>P</td><td>a</td><td>g</td><td>e</td><td> </td><td>N</td><td>o</td><td>t</td><td> </td><td>F</td><td>o</td>u</td><td>n</td><td>d</td>
</tr>
</table>
</td>
</tr>
</table>
...

I kid you not. It's horrible but it can't be re-written *yet*. It will be rewritten around October. But there's a problem I'm dealing with now that I am hoping is possible. I have a feeling it isn't because it's logically impossible (even if it may be practically possible.

I'm writing some CSS for a media="print" layout. There is so much garbage in some of these table cells, that I'm finding it so much easier to hide the entire cell. For example, there is a page header that has a lot of junk in it that won't be on a print out. But there is one <div> inside that header that we would like.

Is it possible to display an element that is nested deep down inside an element that's hidden? It's a div inside a table cell inside a table cell inside a table cell. The top level cell is hidden, but I'd like to stylize the div. I know it makes no sense logically - a hidden element's children should all be hidden too. But practically, I'm wondering if it's possible to break away from the HTML's heirarchy with CSS.

Any suggestions (other than "rewrite the app") are appreciated.

Thanks in advance to anyone who can help.

I've been spending some time moving from HTML 4 and a table-based layout to CSS-based layout and XHTML 1.1 compliance. Most of my site looks fine to me.

However, on pages where there is not a lot of content in the right-hand column, the contents of the left-hand column end up looking very wonky in Firefox 0.8. It shows up fine in IE, but I don't trust IE.

Here's an example of an offending page:
http://www.thatlittlebastad.com/more.php?id=1286_0_1_0_M

Here's my CSS file
http://www.thatlittlebastad.com/style_040805.css

Can anyone help?

This post can be deleted, I solved my problem.