CSS - Div Widths Not Respecting Me!

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,

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 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?

hi,
i'm trying to create a horizontal navigation bar using Div's and css. So what i have is a background image for the background of the navigation bar, and then the links as images. i want to give varying widths to each link. i.e. if we were talking tables, i'd give the first cell with the first link a 10% width, the second a 8% the third a 15% etc...
my question is, how do i do that with Divs? do i have to create a separate id (#) for each link? or can i specify a width in the div tag in the html (<div width=10%>) for example?
Thanks,
Heidi

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

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

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.

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 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%;
}

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 am trying to create a menu that uses drop downs (only 1 deep) and I seem to be running into problems. I've used code that I've tried to tweak but seem to be having problems. I'm sure there is code in here that I don't need, but I don't know what I can remove and what I can't.

My biggest current problem is that I want
a) to have more room between the menu items (to space them out) but I can't seem to find where to set that?

and

b) I can't seem to figure out how to set the width of the drop down items...I've tried everywhere!

Here is a link to the page: http://www.thespinzone.com/temp/csshelp.html

and here is the code for the css I'm using Code:

<style type="text/css">

body {
	font: 78%/1.5 arial, helvetica, serif;
	background: #FFFFFF;
	text-align: center;
	padding: 0;
	margin: 0em;
}

#container {
	width: 745px;
	background: url(cssbg2.gif) center right no-repeat;
	text-align: left;
	border: 0px solid #FF0000;
	margin: 0 auto;
}

#nav, #nav ul {
	float: right;
	width: 353px;
	height: 96px;
	list-style: none;
	line-height: 1;
	font-weight: bold;
	padding: 20px;
	border-width: 10px 10px;
	margin: 0 0 0 0;
}

#nav a {
	display: block;
	width: 8em;
	width: 4em;
	color: #7C6240;
	text-decoration: none;
	padding: 0.25em .5em;
}

#nav li {
	float: left;
	padding: 0;
	width: 1em;
}

#nav li ul {
	position: absolute;
	left: -999em;
	height: auto;
	width: 14.4em;
	width: 13.9em;
	font-weight: normal;
	border-width: 0.25em;
	margin: 0;
}

#nav li li {
	padding-right: 1em;
	width: 13em
}

#nav li ul a {
	width: 13em;
	w\idth: 9em;
}

#nav li ul ul {
	margin: -1.75em 0 0 10em;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
	left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
	left: auto;
}

#nav li:hover, #nav li.sfhover {
	background: #FF0000;
	border: 0px solid #FF0000;

}
</style>



sdf

So for a long time I've seen that widths for dropdown menus must be fixed for one reason or another. Trying to make it so that the width of the dropdown was dynamic worked in IE, not Firefox, or vice versa.

For instance, you had a horizontal nav menu (<ul>), with two items (<li>s), "cars" and "trucks". Under cars you have dropdown links for "Focus" and "Sky" (so the width could be very short) but for trucks you have "Chevrolet 510 Extended Cab" and "Ford Yadda Yadda Yad" (so a long width). The widths of these dropdowns would have to be specified, meaning that 1.) it wouldn't be perfect padding unless you define the perfect width and 2.) unless you want to define a different width for each dropdown, the width would have to be the same for all and you might have a buttload more padding for one (like the first item) than another (the second item).

So I'm wondering, if I force my users to CSS3 (which luckily I'm working on a project where I can), does it allow us to ditch this convention, and dynamically size the width of the dropdown based on content? Maybe through display:table-cell?

I've looked around and even the fanciest CSS3 dropdowns still appear to have fixed widths:
http://webdesignerwall.com/tutorials/css3-dropdown-menu