CSS - Alternative To Max-width In Ie

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

All i want to do is put text on a new line like

[code]
<div>

text<br />
text<br />
text

</div>

do i just use <br> or this there a "proper" CSS way to do it?

I need to create a page that has a header that takes up 20% of the page and the other 80% of the page will be tables. The issue is that the header must not move and the other 80% will be scrollable.

I know how to implement this with frames but I understand that frames are looked down upon now in proper html/xhtml design. Can this be accomplished using css? If so how?

Thanks in advance.

In my website i have used a minus value for three div tags with absolute positions contained in a parent div.

i have done this to allow me to use multiple background images in an automatically heighten content wrapper. image on top, image below and repeating image between.

you can see for yourself at imatechi.co.uk, its the writen block inside the box.

apparently using neg values in the z-index causes problems with various browsers, so im wondering if there is another way to do this.

thank you

flos

I was just wondering if there was an alternative other than adding a last class to the last element in a list for internet explorer.

To explain the situation, I have a navigation list in a ul: Code:

<div id="navigation">
      <ul>
         <li><a href="/" title="Homepage">Home</a></li>
         <li><a href="/" title="Homepage">About</a></li>
         <li><a href="/" title="Homepage">News</a></li>
         <li><a href="/" title="Homepage">Contact</a></li>
      </ul>
   </div> <!-- navigation -->

To get the look I want, tiled vertically with a white line in between elements, I am applying this style Code:

div#navigation
{
   width: 200px;
   margin: 0 0 0 10px;
   float: left;
}
   div#navigation ul { list-style-type: none; margin: 0; padding: 0;}
      div#navigation ul li { background: #585858; border-bottom: 2px solid #e4eaef; padding: 0; }
         div#navigation ul li a { display: block; color: #e4eaef; text-decoration: none; padding: 6px; }
         div#navigation ul li a:hover { background: #fab511; display: block; color: #2c2c2c; text-decoration: none; }
         
      /* only works in Mozilla */
      div#navigation ul li:last-child { background: #585858; border-bottom: none; }

but of course the last-child pseudo class does not work in IE. Just curious.

Also, what is the fix for the anchor element not expanding to the full width of the list item?

It is my understanding that the EMBED tag is not XHTML compliant correct? If so, how can you get around it as i also understand that without the EMBED tag within the OBJECT, mozilla fails to pick up the content.

I am now learning CSS and I usually use iFrames to make dynamic content but I was wondering if there was a CSS equivalent.

I have a two buttons, that when clicked, will load an image to an iFrame called "window".

Is there a CSS way to do this?

Thanks

Hi guys,

I've recently been updating a flash games site, but i ran into a little problem. Check out this page:

Spank the monkey

The size of the game is so big in width, that it overlaps the "Related" box. (I currently have overflow set to "hidden", so you cant see it now). Back when a table was used for that portion of the site, whenever a game was too big, it pushed the "Related" box outside of the main container.

How can i achieve a similar effect with CSS?

Regards,

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>

using the sibling selector like this

Code:

p, h3
{
margin-bottom: 1em;
}

p + h3
{
margin-top: 2em;
}

should produce output like this (taking mrgin collapsing into consideration)
Code:

first h3 at top of page

paragraph


h3 with 2em gap to preceding paragraph

paragraph

secondary paragraph with 1em gap to preceding paragraph


h3 etc

but alas, the sibling selector does not work in IE6! so how do i do it otherwise, whilst retaining simple markup?

Hello! Is it possible to get iframe fully fill the div when div is in the middle of the screen and it is absolutely positioned and left,right,top,bottom: 100px;

I have worked as a web developer for two years now, and yet I still have not found a satisfactory solution to the problem of table-less layouts. Table-less layouts always end up needlessly complicated or full of CSS and other hacks.

Here is the challenge for you all. I have a very simple table layout with header, left nav, main content, and footer:
http://brentonboy.com/misc-pages/layouttest.html I am trying to figure out if there is a way to replace the table with CSS stuff only while meeting all of the following requirements:
Must be a simple solution with as few HTML elements as possible. Must look and behave the same as the example table. Thus: When the content area is taller than the left nav, the blue of the left matches the height of the content exactly, and the footer drops down nicely below. When the left nav area is taller than the content area, the green of the content area matches the height of the left nav exactly, and the footer drops down nicely below. The solution uses new HTML and new CSS only... not looking for a javascript solution or something else. Do not make use of CSS hacks or any other hacks. All code must be valid. Do not make use absolute positioning: in case I need to center it or do some other fluid thing later. Also avoiding relative positioning would be great too. Must work flawlessly in every browser, just as the table does. Basically, I don't think it's possible to meet all of those requirements, which means that layout tables are better. Please prove me wrong!

I'm working on a web app that includes a wysiwyg html/css editor. The idea is that people can use the editor to create a webpage. Seems simple enough.

The trick is that I want all webpages created to have a small header at the top. Basically a 15-20px tall navigation strip. Currently, I have it setup so that people can create pages using the editor, but as it is now, the header is simply inserted as an 'included document' when they view the page they created.

Depending on the complexity of the page they make, they CSS, and formatting of the banner could affect how their page is displayed. Even as simple as pushing their content down 15pixels and mis-aligning content they may have set against their background. I'd also like to try and prevent user code from affecting how the header is rendered.

I'm hoping there is a way to seperate the rendering of the header and the user content in the browser. Basically, I'd like the css rendering of the user's content to start BELOW the header, rather than the header being combined with the user content. If a user creates a page that has their own header and it's set to be fixed to the top, it would basically cover up my header. I'm hoping that any element they would fix to the top would be fixed BELOW the header I insert.

This almost seems like a job for 'html frames'. With HTML frames, I could basically split the page into two rendered browser pages. Is there a CSS alternative to this?