CSS - Varying Div Widths

i recently changed up my homebrew forum's css on http://www.fasttracksites.com/forum/index.php and im having problems with it in FireFox, Opera and IE looks fine(usually its just the opposite). It looks like its not accepting the widths from http://www.fasttracksites.com/forum...FTSBlue/dim.css this is the file that contains the dimensions of each item, the other pages(if you click on one of the forum names) they are using the same widths for the last post and such and look fine, can someone please help?

Code:

<table style="width:90%;">
<tr>
  <td>
    Text goes here
  </td>
  <td>
    Text 2 goes here
  </td>
</tr>
</table>

The problem is that since I say width:90%, the second td is all the way to the right of my table. The width of the first table depends on the length of the text to be inserted. How can I have the text for the second td show up just to the right of where the 1st td ends? I'd like to do this without having to specify a fixed with in the first td.

It has been a long day and tomorrow will be a longer. I give up trying to fix my problem and searching. So, that leads me here, where I will ask my question and once again receive the n00b stamp on my head. I hate css... but love it so.

go to church
css file

Now why the heck does IE not give a crap about the width I set. increase the text size(ctrl+scrollWheelUp) and you will see that it is acting like an auto width. It is the same if I switch between % em pt px.
Firefox views it just fine expect for the inner box going outside it's container on the navbar. Oh and the lists are shifted over to the right and the text goes outside the box and doesn't wrap inside. List problem with IE before and I fixed it only for it to show up in firefox.

These are probably easy fixes but I am too tired right now and know I will not have time in the next couple of days to mess around. So, answer me up please. Bonus points for posting a link to a topic that all ready covers this that I blatantly missed.

Sorry for the banner(too big file). The whole banner/header top will change but the navbar and content area concept is going to stay almost like it is so I need ot firgure this out.

Grrr for some particular reason in Firefox and IE div.userinfo wont stay to its assigned width.. what it is doing is that its expanding its width to fill up the text.. but.. it should just break to a new line.

html Code:
Original - html Code <div class="container"> <div class="subject">this is for your subject</div> <div class="userinfo">Your memosfasdfasdfasdfasdfasdfasdfasdfsadfasdfasdfsadfasfasdfsadfsadfasdfa</div> </div>

  
 <div class="container">
  <div class="subject">this is for your subject</div>
  <div class="userinfo">Your memosfasdfasdfasdfasdfasdfasdfasdfsadfasdfasdfsadfasfasdfsadfsadfasdfa</div>
 </div>

css Code:
Original - css Code div.container { border: 1px solid #000000; position: relative; margin: 0 auto; width: 580px; height: 432px; } div.subject { position: absolute; border: 1px solid #cccccc; top: 0px; left: 290px; width: 290px; height: 50px; } div.userinfo { position: absolute; border: 1px solid #cccccc; width: 15px auto; height: 150px; }

  

 div.container {


   border:   1px solid #000000;


   position: relative;


   margin:   0 auto;


   width:    580px;


   height:   432px;


 }


  


 div.subject {


   position: absolute;


   border:   1px solid #cccccc;


   top:      0px;


   left:     290px;


   width:    290px;


   height:   50px;


 }


  


 div.userinfo {


   position:  absolute;


   border:    1px solid #cccccc;


   width:     15px auto;


   height:    150px;


 } 

Anyone knows why? i even changed white-space: nowrap, and etc.

I want some particular text on my page to have an underline that keeps going after the text has finished so it spans 100% of the page (actually a div, not a page). It's easier to understand what I'm trying to do if you look at the links at the bottom of my post. My problem is that I got it to work fine on Internet Explorer, but not on Mozilla.

Here is the webpage:
http://www.eutron-inc.com/newsite/

And here is the stylesheet:
http://www.eutron-inc.com/newsite/stylesheet.css

So... can somebody help me?

Hi,

I'm Currently Redesigning my site Here And it all looks perfect in IE but when i go onto FireFox it looks mostly the same.
Just One Problem The Menu At The Top, The Widths And There Is Gaps. Ive Been Working Hard And Cant Seem To Find The Problem.

Heres The CSS for the whole menu:
Code:

.navigation {
margin : 0 auto;
padding : 0;
font-family : franklin gothic book;
background-color : silver;
width : 59em;
min-height : 1em;
min-width : 59em;
text-align : center;
margin-top : 5px;
}
.navigation li.t {
min-width : 1em;
width : 1em;
min-height : 1em;
float : left;
background : silver url(img/tl.gif) no-repeat top left;
}
.navigation li.b {
min-width : 1em;
width : 1em;
min-height : 1em;
float : right;
background : url(img/tr.gif) no-repeat top right;
}
.navigation li.tls {
min-width : 1em;
width : 1em;
background : silver url(img/tls.gif) no-repeat top left;
}
.navigation li.trs {
min-width : 1em;
width : 1em;
background : url(img/trs.gif) no-repeat right top;
margin : 0;
padding : 0;
}
.navigation ul {
color : white;
list-style : none;
min-width : 59em;
display : inline;
width : 59em;
margin : 0;
padding : 0;
}
.navigation li {
min-width : 15em;
max-width : 15em;
width : 10em;
height : 1em;
display : inline;
}
.navigation li a {
height : 1em;
min-width : 11em;
max-width : 11em;
width : 10em;
color : black;
text-decoration : none;
background : white;
}
.navigation li.tl {
min-width : 1em;
max-width : 2em;
width : 1em;
background : white url(img/tls.gif) no-repeat top left;
}
.navigation li.tr {
min-width : 1em;
max-width : 2em;
width : 1em;
background : white url(img/trs.gif) no-repeat right top;
}
.navigation li a.mi {
margin : 0 auto;
padding : 0;
min-width : 11em;
max-width : 12em;
margin-top : 5px;
width : 11em;
color : black;
text-decoration : none;
background : white;
}
.navigation a:hover {
text-decoration : underline;
}

I Just Cant Seem To Find Out What To Do,

Please Could SomeOne Help,

Thanks In Advance,

Jamie

This is driving me insane.

What is happening here? The green <div> should be the same width as the table - and that width should be 830px.

It looks like IE is stretching the table wider than it should be... but if so then why?

When you consider that the table is 830px wide, the pink div is 730px, the green div is 850px, the red div is 620px and the blue div is 100px, you can see that absolutely nothing is lining up correctly. It all seems quite random.

PHP Code:
// containg div
<div style="width:834px; padding:0; margin:0 auto; clear:both; text-align: left; float:left;">

// table
<table width="830px" cols="10" rows="$rows" cellpadding="4" cellspacing="1" style="border-top:1px solid #CCCCCC; border-bottom: 1px solid #CCCCCC;">

// pink div
<div style="border: 2px solid #FF00FF; width:730px; padding: 0; margin:0;">&nbsp;</div>

// green div
<div style="width:100%; margin:0; padding:0; border: 2px solid #00FF00;">

// red div
 <div style="border:2px dashed #FF0000; float:left; width:620px; margin: 0; padding: 2px 2px 2px 100px; text-align:center;">

// blue div
<div style="border:2px dashed #0000FF; float:right; width:100px; text-align:right; margin: 0; padding: 2px;"> 





Internet Explorer:


Firefox:


Thanks,

http://whittierpunks.com/test/bio.html and stylesheet

In the CENTER <div>, I want to have some text, with an image floated to the right. It's basic; there is no problem with an internal stylesheet (like the example at w3c)...but as you can see from my exapmle, its not doing that at all. And I'm not sure where the problem lies

Could someone show me how to correct this?
Many thanks,

Hello,

I'm doing my best to get to grips with designing pages without tables and generally get unstuck when it comes to float and display attributes, and don't get the results I want.

I have two div elements which I want to display next to each other. A navigation area goes on the left and the main contents to the right - both contained in a wrapper div:

Code:

<div id="wrapper">

  <div id="nav_cell">
     the navigation bits
  </div>

  <div id="main_contents">
    main contents of webpage
  </div>

</div>

I need to try and get the layout sorted without specifying the width of either 'column' because the content is dynamic for each, so restricting the width (in pixels) wouldn't always necessary look right.

In my first attempt I had the nav_cell float:left and the main_contents float:right. This mostly gives the desired effect... until the main_contents contains very little data in which case there is huge white space down the middle of the page - the nav_cell way on the left and the rest of it on the right.

I tried to specify the width of the main_contents to 100%, but rather than fill the space to the right of the nav_cell it dropped out of the flow and filled the full width under the nav_cell instead of next to it.

I toyed with trying to get the two div to display:inline, but that had disasterous consequences. How should I approach this problem. It feels like it should be simple to get two columns of variable width to sit next to each other. I feel absolute/relative positioning has something to do with it but I don't fully understand that either...

Thanks in advance.

If I have the following:

<span id="span1"></span>
<span id="span2"></span>


If I set the width of span1, I want to have span2 adjust it's width to be the same automaticly. Something dynamic or a variable.

For example in simple terms.

span1.width = 150px;
alert(span2); would show 150px also.

Hope that make sense.


Thanks

I am having an issue with a div that I am trying to float and set the width of. The page works fine in Firefox, but in IE it doesn't display correctly,

Here is the pertinent code,

<div id="textbar" class="sidebar" style="width:175px;">
<div id="handle">
<a href="#"><img src="http://swvtc06/swvtc/images/collapse.jpg" border="0" alt="Click to Collapse the Navigation Bar" onclick="sidebar()" /></a>
</div>
<div id="sbText" style="display:block;">
<!--#include virtual="/swvtc/include/nav_test.htm" -->
<!--#include virtual="/swvtc/include/smweather.asp" -->
</div>
</div>

Here is the CSS for the #handle div,

#handle {
float:right;
width:9px;
}

In Firefox, the handle div is correctly inline with the background graphic. In IE, the handle div is about 9 pixels to the left of where it should be.

We are in the ancient times, we still are mandated to be using IE 6, so that is where I am having the problems.

Where am I going wrong?

Thanks,
Drew

for those of you who have helped me before and told me to change from tables to divs, well, i'm on the last part before i convert the big table.

my problem is that on my home page i have category boxes that i want to each occupy half of the main column. HOWEVER, they also need margins to separate from each other.

here is their css code:
Code:

.leftcatpanel {
	margin-left:8px;
	margin-top:0px;
	margin-bottom:8px;
	margin-right:4px;
	float:left;
	width:50%;
}

.rightcatpanel {
	margin-left:4px;
	margin-top:0px;
	margin-bottom:8px;
	margin-right:8px;
	float:left;
	width:50%;
}

however, the 50% width makes them overflow to the next line, even though they are floated. how can i set them to stay on the same line, make their widths perfectly halved, and keep their margins???

(click here for the way it looks now and scroll down to the middle of the page)

I'm having a problem with my top Navigation. The top left has a search box, with a fixed width, but the other boxes across the top need to be dynamic width. Anyone have any suggestions on a good way to do this? I assumed I could set the boxes to a % width, and the % would be based on the container div, but this doesn't appear to be the case. Below is the skeleton of my code.

I also have a problem with the main div. I cannot get it to float left of the side navigation bar when I put a sufficient amount of text in it.

Thanks for the time to help me out!

Code:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	
	<title>Welcome!</title>
	<meta http-equiv="content-type" 
		content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />

  <style TYPE="text/css">

	#header {
		color: #fff;
		background-color: #000;
	}
	#topNav {
		width: 100%;
		min-width: 750px;
		margin: 10px 0px;
		padding: 0;
		border: 1px solid #0f0;
	}

	#topNav:after {
		content:".";
		display:block;
		clear:left;
		height:0;
		visibility:hidden;
	}

	/* Hides from IE-mac \*/
		* html #topNav {height: 1%;}
	/* End hide from IE-mac */



	/* Search Box */
	#searchBox {
		float: left;
		padding: 0; 
		margin: 0;
		width: 150px;
		height: 125px;
		border: 1px solid #000;
		background: #FFF;
		text-align: center;
	}
	
	#nav, #nav ul {
		list-style: none;
		padding: 0;
		margin: 0;
	}

	#nav li {
		float: left;
		margin-left: 8px;
		padding: 0;
		width: 18%;
		height: 125px;
		border: 1px solid #000;
		background: #235;
		color: #FFF;
	}


	#sideNav {
		float: left;
		width: 151px; /* 1px adjustment for no border */
		margin-right: 10px;
		border: 1px solid #0f0;
	}

	/* sideNav Boxes */

	#sideNav .box {
		margin-bottom: 10px;
		padding: 5px 5px 5px 50px;
		border: 1px solid #000;
		height: 90px;  /* add 10 for padding */
		background: #235;
		color: #fff;
		background-repeat: no-repeat;
	}


/* Main Content Container */

	#main {
		float: left;
		padding: 10px;
		border: 1px solid #000; 
		background: #fff;
	}

/* Page Footer */

	#footer {
		clear: both;
		background: #235;
		border: 1px solid #000;
	
		color: #aaa;
		text-align: center;
	
		margin: 10px 0px 0px 0px;
		padding: 20px;
	}
  </style>
</head>

<body>
<div id="header">
	Top Header Area
</div>
<div id="topNav">

	<!-- Search Box -->

	<div id="searchBox">

	Fixed Size Search Box

	</div>

	<ul id="nav">
		<li >Dynamic Sized Box in Top Nav</li>
		<li>Dynamic Sized Box in Top Nav</li>
		<li>Dynamic Sized Box in Top Nav</li>
		<li>Dynamic Sized Box in Top Nav</li>
	</ul>
</div>

<div id="sideNav">
	<div class="box"> Fixed Size Box in Side Nav
		</div>
	<div class="box"> Fixed Size Box in Side Nav
		</div>
	<div class="box"> Fixed Size Box in Side Nav
		</div>
</div>

	<div id="main">
			Main Content Area<br /><br />
	
Maecenas ut quam rutrum lacus tempus fringilla. Maecenas aliquam tempus libero. Mauris porttitor. Etiam at 

risus a est sodales cursus. Cras ut ipsum. Vivamus at turpis ac lorem posuere rutrum. Vestibulum nisi nulla, 

rhoncus a, rhoncus sit amet, placerat ac, justo. Nam consequat mauris ut orci. Etiam eleifend. Ut sem mauris, 

imperdiet vitae, consectetuer a, ullamcorper non, nibh. Curabitur sapien. Fusce ultricies, ligula eget 

scelerisque tempus, nisi nisl convallis dui, ut scelerisque magna est sit amet leo. Suspendisse facilisis 

tortor faucibus elit. Sed diam. Duis imperdiet blandit mauris. Etiam cursus erat vel ligula.
								
	</div>

<div id="footer">
	Footer
</div>



</body>

</html>

I have a left div which is fixed let is say 400px and the right div should extend to the edge of the screen. How can i get it to extend.

If i don't give any width to the right div:
The right div has other dives which has got dotted bottom border, these dotted border will not extend to the end

any ideas?

cheers

I'm having a problem with CSS widths on Firefox. My website, http://www.freefootball.org looks good in IE7 but when I look at it in Firefox, the main div on the left gets pushed down. I'm using a conditional CSS statement to get it working in IE which works well so its the #maincontentdiv that is the problem. My code for the divs in question is below. Any ideas on how to fix this?

Code:

}#ffsquaread {
	display: block;
	width: 270px;
	text-align: center;
	float: right;
	margin-top: 10px;
}
#ffmaincontent {
	float: left;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	line-height: 1.3em;
	color: #000000;
	display: block;
}
html>body #ffmaincontent {
	float: left;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	line-height: 1.3em;
	color: #000000;
	display: block;
	width: 80%;
}