CSS - How To Prevent 100% Width Div In Ie6?

i ve been playing with my page and been trying to modify the width of the page (divs) according to the browswer's width.
The problem is i want the navigation menu on left to be fixed width (say 200px) and the center div and the right column to be variable width. Also, i want to set a minimum width , so that the floating divs dont roll below the navigation menu.

here s the link to the page. try reducing ur browser windows size . the content div rolls down under theleft nav menu.
http://ccc.1asphost.com/pacemakerpr...r/cicuitlab.htm

Also , i get wierd result in netscape navigator. please help

I have an absolutely positioned <div> containing a block of text. I have not specified a width for this <div>.

This <div> is nested within another <div> for which I have specified a width of 200px.

So something like:
html4strict Code:
Original - html4strict Code <div style="position: relative; width: 200px;"> <div style="position: absolute; top: 10px; left: 20px; z-index: 100;"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur eu purus a tellus mollis consequat. Phasellus aliquam sapien quis mauris. </div> </div>

  

 <div style="position: relative; width: 200px;">


     <div style="position: absolute; top: 10px; left: 20px; z-index: 100;">


         Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur eu purus a tellus mollis consequat. Phasellus aliquam sapien quis mauris.


     </div>


 </div> 

Since the absolutely positioned <div> is not part of the page's normal flow, I would expect that its width would expand according to its contents (and the browser window's boundries).

Instead, in Firefox only, the width of the absolutely positioned <div> expands only to the width of its parent - in this case 200px.

Am I doing something wrong? or is there a workaround for this?

I have seen a design which I find pretty interesting where in the main site is aligned left and fixed width at say 700px wide. Yet the footer seems to span the entire screen.

The header also seems to use the entire screen width but that is beign accomplished with the background image, but this footer goes all the way to end of the screen and naturally adjusts itself under all the content.

Is there a way to get this effect?

Hello,

(please also see attached/uploaded style sheet)

I'm puzzled why (in the following code) the TEST #2 table renders as required (i.e. 2 rows in 1 column, all with the same cell WIDTH) but the table in TEST #1 seems to render the table cells (i.e. 2 columns in 1 row) without a common cell WIDTH.

How can I get all the cells (there are plenty more!) in table TEST #1 to all be exactly the same width (preferably 85px)?

Code:

<link rel="stylesheet" type="text/css" href="http://thinet/cgi-bin/thinetStyleSheet.css">

TEST #1
<table class="menu" border=1 CELLPADDING=2>
<tr>
<td class="pinkButtons"><a title="Treats menu" href='http://thinet/theread/forumdisplay.php?s=&forumid=82'>Treats</a></td>
<td class="pinkButtons"><a title="New Starters, Leavers and Transfers" href='http://thinet/theread/forumdisplay.php?s=&forumid=41'>Joiners etc.</a></td>
</tr>
</table>

<P>

TEST #2
<table class="menu" border=1 CELLPADDING=2>
<tr><td class="pinkButtons"><a title="Treats menu" href='http://thinet/theread/forumdisplay.php?s=&forumid=82'>Treats</a></td></tr>
<tr><td class="pinkButtons"><a title="New Starters, Leavers and Transfers" href='http://thinet/theread/forumdisplay.php?s=&forumid=41'>Joiners etc.</a></td></tr>
</table>

I don't think I've quite grasped the idea of CSS yet?!?!

Any help/pointers would be appreciated.

Thanks,
Andy

I'm at the very very very begaining of a table-less design (my first, actually). The problem is, since I have decided to have a non-fixed width, when the browser is minimized, at a certain point the design breaks.

See it here (please don't make fun! it's just the start): SiliconSatan.com/test.php

I'd like to set a minimum width, probably on the container <div>, so at a certain point it sort of becomes like a fixed width? No smaller than a set width?

[EDIT]

Also, I have a question about background color mismatch, but it was not quite OT for the CSS forum:

http://forums.devshed.com/web-desig...e7t-403266.html

Ok. Here's the problem:

I have a asp.net 1.x datagrid inside a floated div and I want the datagrid to stretch the width of the div. This div is in the center of two other floated divs. Is there a way to make a table go 100% the width of its container div?

Css code:
Code:

/* left bar: */
#navBar{
	width: 185px;
	float: left;
}

/* right bar: */
#rightModulesContainer {
	width: 130px;
	margin: 0;
	padding: 0px 0px 0px 10px;
	float: right;
}

/* center content: */
#content{
	padding: 0px 5px 0px 0px;
	margin-top:0;
	margin-bottom:0;
	margin-left:4px;
	margin-right:0px;
	float: left;
	text-align:left;
	/*display: inline;*/
}

/* contained in #container: */

#dataGridContainer{
	margin: 0;
	padding-bottom: 10px;
	min-width:360px;
}

.categoryGridStyle {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-style: normal;
	color: #000000;
        width:100%;
}

and here is the layout of the divs:
Code:

<div id="navBar">left navigation bar here (tree view)</div>

<div id="rightModulesContainer">right side bar here</div>

<div id="content"><div id="dataGridContainer">datagrid here</div></div>

Thanks for your help in advance. I've been messing with this for a while - trying to get it to work cross browser is driving me nuts. I've tried placing the divs in containers and floating the containers, I've tried everything I can think of...

I have a header div with a background image - it's basically a pair of hands holding a banner - the arms extending to the sides of the window.

I'm trying to work it so that, no matter how wide or thin the window, the arms will always extend to the sides. So when you make it smaller, the image will disappear beyond the viewing window. This happens automatically on the right-hand side, but the image is stopping it on the left.

Is there a way to set a min-width, which is smaller then the image itself, so that when the window is shrunk the image starts to disappear on either side until it reaches the min-width? I'm trying to get it so the arms will disappear and stop at the hands.

Or can anyone suggest an alternative solution? I tried to do it with background and header image, with the arms on the background, so when the top image moves it looks like the arms move with it. That worked great until I started using a patterned background.


Full width:
|---------------------------------------|
|AAAAAAAAHHH BBBBBBBBBBBBBB HHHAAAAAAAAA|
|---------------------------------------|

Shrunk width:
------- |------------------------| --------
AAAAAAA |AHHH BBBBBBBBBBBBBB HHHA| AAAAAAAA
------- |------------------------| --------

Grey bit outside window edge.
| Window side
A Arms
H Hands
B Banner


I hope that makes sense. I expect there's an easy solution but I've been trying to figure it out for several hours and could do with someone else's perspective. Thanks.

I have a page with an ASP.NET Gridview on it...this Gridview is located in a child DIV inside a parent DIV. That Gridview can often go wider than the parent DIV width set. In IE6 the MAINDIV (Parent DIV) would expand to fit the expanded Gridview contained within the child DIV. In IE7 the DIV will not expand so it overlaps the DIV and looks bad. I want that MainDiv to dynamically grow with the child DIV width, like it did in IE6.

Please see my code below. I want the MainDiv to remain ~800px unless it is pushed out further.

Thanks for any ideas on a fix for this. Whenever I try min-width it just blows the parent DIV out to 100% screen size.

Code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
 
</head>
  <body style="width:100%;text-align:center;background-color:#68838B" onload="loadpage();">
      <form id="frmMain" runat="server"> 
          <div id="mainDiv" style="position:relative;top:10px;width:800px;height:auto; background-color:white;border:solid 1px #666666">        
                      <div id="contentDiv" style="text-align:left;width:797px; padding:3px 3px 3px 3px;">
                  <asp:ContentPlaceHolder ID="contentBody" runat="server"></asp:ContentPlaceHolder>
                  </div> 
          </div>
      </form>
  </body>
</html>

I have a table that uses style sheets:
<table class="Border">
but then when I place a table inside of it, it inherits the same class. Is there a way to prevent this?

Thanks!
Scott.

I'm working with a portal system where-in various different modules can be applied to the main system. The problem I'm running into is when I want a module to have complete reign over it's appearance, completely ignoring the pre-set design of the surrounding system.

Is there a CSS tag hiding somewhere that can disable all inheritance from the parent on up?

I understand that styles declared closer to the output will take precidence, but I also don't feel like modifying the current and very complex stylesheet of a module I'm porting to make sure every attribute of every tag is being set to something compatible.

Surely there must be a way to disable inheritance for a block...?

Just wondering, is there a way to prevent the 2 div tag from overlapping each other??

Code:

<html>
<head>
<style type="text/css">
#wrapper {
  MARGIN: 0px;
  PADDING: 0px;
  WIDTH: 100%;
  MIN-HEIGHT: 100%; 
  BACKGROUND-COLOR: #55649D;
  BORDER-TOP: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  BORDER-RIGHT: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  BORDER-LEFT: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  BORDER-BOTTOM: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
}
* html #wrapper {HEIGHT: 100%;}  /* IE Hack since IE does not support "min-height" in the #wrapper*/
#footer {
  MARGIN: -65px 0px 0px 0px;
  PADDING: 0px;
  WIDTH: 100%;
  HEIGHT: 65px;
  BACKGROUND-COLOR: #00FF00;
  BORDER-TOP: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  BORDER-RIGHT: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  BORDER-LEFT: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  BORDER-BOTTOM: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
}
</style>
</head>
<body>
 <div id="wrapper">blah blah</div>
 <div id="footer">blah blah</div>
</body>
</html>

Thanks... FletchSOD

So here's the deal. I need the nav buttons to stretch across so that it's flush with the gray background but when I add another pixel to padding-right:7px it wraps to the next line.
I'm somewhat new to CSS so I don't know what to do to fix it.

-Johnny

Here is the code:
/* ---------- Primary Nav ---------- */
div#primaryNav {clear:both;background-color:#EEEEEE;width:754px;}
div#primaryNav ul {border:0;margin:0;padding:0;list-style-type:none;text-align:center;}
div#primaryNav ul li {display:inline;float:left;text-align:center;padding:0;margin:0;padding-bottom:5px;padding-right:7px;}
div#primaryNav ul li a {width:116px;height:17px;border:1px solid #D9D9D9;background:#FFFFFF;margin:0px;padding:0;padding-top:2px;color:#707070;display:block;text-align:center;text-decoration:none;}
div#primaryNav ul li a:hover {}
div#primaryNav ul li a.selected {font-weight:bold;color: #FFFFFF;background-color: #FFAB00;border: inherit #FFAB00;}

Here is the navi:
<div id="primaryNav">
<ul>
<li><a href="Item">Item</a></li>
<li><a href="Item">Item</a></li>
<li><a href="Item">Item</a></li>
<li><a href="Item">Item</a></li>
<li><a href="Item">Item</a></li>
<li><a class="selected" href="Item">Item</a></li>
</ul>
</div>

Is there a way to tell a browser to NOT zoom it when the user tries to zoom the text... I ask because I use text in a menu bar that I do not want to scale at all. Thanks

I am trying to create a site with a footer below the content, and I want the footer to be at or below the bottom of the browser window (that is, on pages where the content is less high than the window, the footer should be at the bottom of the window, but on longer pages, the footer will be off the bottom of the browser window until you scroll down past all the content to see it).

I've done this with the following code, where I have a DIV that's 100% high, then two futher DIVs inside this: one to contain the content of the page, and the second to contain the footer. The footer DIV is positioned with "bottom:0px" to make it appear at the bottom of the browser.

This works fine, until the window is shrunk down, and then (I think because of the "bottom:0px") the footer DIV moves over the content DIV until its bottom is in line with the bottom of the content DIV.

What I want to happen is that when the window shrinks, the footer moves up only until its top touches the bottom of the content DIV, and then if the window shrinks further, it will become invisibile until you scroll down.

Please can somebody help me to acheive this?

Many thanks,

Gary

Code:

<body text="#000000" style="background-color:#008000; text-align:center; height:100%;">

<div style="background-color:#ffffff;text-align:left;margin-left:auto;margin-right:auto;position:relative;width:750px;height:100%;">

<div style="background-color:#0000ff;text-align:left;margin-left:auto;margin-right:auto;position:relative;width:750px;height:200px;">
</div>

<div style="background-color:#00ff00;position:absolute; left:0px; bottom:0px; width:750px; height:100px; /*MainDivStyle*/" __AddCode="here"></div>
</div>

</body>

Hello,

I'm really bad with CSS, so this probably a simple question. I've found some stuff on the 'net about how to set up a class to prevent <body> from printing, but I just want to prevent one table element from printing while still allowing everything else.

Example - on print, allow First Name but do NOT print SSN:
Code:

<table>
<tr>
<td>
First Name
</td>
<td>
SSN
</td>
</tr>
</table>