|
CSS - Div Width Issues
i have never encountered an issue like this... i isolated the code so i can work with it.... here is a link...
A LINK problem is... a line of numbers is generated via php... there is no php working on this page... i just took the final resulting code from View Source, and copied it here... anyhow, a list of numbers is generated... i want to set a width, so the numbers will auto flow to another line... but when i set a width, the numbers just go outside the div... i put a 1px dashed border to show where the div is... it shows the correct width in firefox, but the data flows outside of the div... and in IE... the div is just the size of the text, regarless my set width Similar Tutorialsok, i know that because span is a inline element width cant be applied to it, and a lot of people suggest DIV my problem is that div wont work, because of its auto-break thing.... it being a block element and all... so, how would i apply a width of something like 100px to the span elements in code like this?... Code: <div class="infocontainer"> <span class="infobox">Publisher: <?php print $publisher; ?></span> <span class="infobox">Developer: <?php print $developer; ?></span> <span class="infobox">System: <?php print $system; ?></span> <span class="infobox">Gen <?php print $genre; ?></span> </div> I'm having trouble getting my dropdown navbar to stretch the width of the parent container. I can get it almost the right width but I have to make the width 107.16px which seems really stupid and wrong to me. But if I change it to 100% the list becomes vertical and all jacked up. Any clues on how to get it to stretch the entire width of the container? link Thanks! edit: I added the follow css to get rid of the white border at the end of the navbar. It looks good in FF but in IE there's a small gap now between the navbar & the side of the container. I'm hoping that there's a better way to do this. Code: #contact_nav a {border:none;} /*Removes right border on end of navbar*/
The problem I have has arisen whilst trying to create a horizontal and a vertical navigation menu using <li> tags. It is best illustrated by the following example: Code: <div style="width:100%;height:50px;"> <ul> <li style="border:1px solid black;">Hello</li> <li>World</li> </ul> </div> <br /> <div style="width:100px;height:100%;"> <ul> <li style="border:1px solid black;">Hello</li> <li>World</li> </ul> </div> and the CSS Code:
div {
border:0;
background-color:#888888;
}
ul {
margin:0;padding:0;
}
ul li {
float:left;
list-style:none;
background-color:#CCCCCC;
height:50px;
width:100px;
}
The <div> tags are set to 50px height and 100px width respectively. When an <li> element is placed within the div with the same height or width they display the way I intended. However once a 1px border is applied to the <li>'s then in IE the border is counted as part of the width or height. In Firefox the border will add 2px to the starting height and width giving the effect of width:102px or height:52px;. This is massively frustrating as I need each <li> to have the 1px border. It looks different in each browser (I have not tested it in netscape nor opera, but I suspect they will display the same as Firefox.) Can anyone provide a fix to get get round this please? Thank you in advance. I have a page whose outer-most container has a fixed width. On some pages, there is a table whose width I cannot set to be fixed because its contents (more specifically the number of <td>s) are dynamic. My problem is that when the table has so many <td>s that its width is forced to be greater than its parent <div>'s fixed width, the other page elements are not rendered as desired. Here is a simple illiustration of what I'm talking about. The text on the page explAins my issues (although it should be evident from loooking at it in a browser). Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<style type="text/css">
body {
font-family: Arial, Helvetica, sans-serif;
}
#outer {
width: 950px;
min-width: 950px;
background-color: #fc0;
}
#hdr {
background-color: #66c;
height: 50px;
padding: 10px;
color: #fff;
margin-bottom: 25px;
}
table#data1 {
background-color: #eee;
margin: 10px;
}
table#data1 td {
font-weight: bold;
}
</style>
</head>
<body>
<div id="outer">
<div id="hdr">
This box should span the entire width of its orange container box even if the orange box's width exceeedes the width of the browser window due to the content it contains.
</div>
<table id="data1" border="1">
<tr>
<td colspan="24"><p>This table has a lot of TDs which causes its width to go beyond both the 900px assigned to its containg DIV as well as the width of my browser window. My desired behaviours a </p>
<ol>
<li>the containing element would expand to the width of the table (meaning that the orange background will be displayed behind the content of the grey table)</li>
<li>the DIV with the blue background at the top would also expand to the width of its parent container (the DIV with the orange background)</li>
</ol>
<p>Neither of these are happening in Mozilla and only #1 is happening in IE.</p>
<p>I'm sure that Mozilla is displaying properly per the CSS spec, but there must be a way to acheive what I'm trying to do.</p></td>
</tr>
<tr>
<td>aaaaaaaaaaaaaaaaaaaaaaaa</td>
<td>bbbbbbbbbbbbbbbbbbbbbbbb</td>
<td>aaaaaaaaaaaaaaaaaaaaaaaa</td>
<td>bbbbbbbbbbbbbbbbbbbbbbbb</td>
<td>aaaaaaaaaaaaaaaaaaaaaaaa</td>
<td>bbbbbbbbbbbbbbbbbbbbbbbb</td>
<td>aaaaaaaaaaaaaaaaaaaaaaaa</td>
<td>bbbbbbbbbbbbbbbbbbbbbbbb</td>
<td>aaaaaaaaaaaaaaaaaaaaaaaa</td>
<td>bbbbbbbbbbbbbbbbbbbbbbbb</td>
<td>aaaaaaaaaaaaaaaaaaaaaaaa</td>
<td>bbbbbbbbbbbbbbbbbbbbbbbb</td>
<td>aaaaaaaaaaaaaaaaaaaaaaaa</td>
<td>bbbbbbbbbbbbbbbbbbbbbbbb</td>
<td>aaaaaaaaaaaaaaaaaaaaaaaa</td>
<td>bbbbbbbbbbbbbbbbbbbbbbbb</td>
<td>aaaaaaaaaaaaaaaaaaaaaaaa</td>
<td>bbbbbbbbbbbbbbbbbbbbbbbb</td>
<td>aaaaaaaaaaaaaaaaaaaaaaaa</td>
<td>bbbbbbbbbbbbbbbbbbbbbbbb</td>
<td>aaaaaaaaaaaaaaaaaaaaaaaa</td>
<td>bbbbbbbbbbbbbbbbbbbbbbbb</td>
<td>aaaaaaaaaaaaaaaaaaaaaaaa</td>
<td>bbbbbbbbbbbbbbbbbbbbbbbb</td>
</tr>
</table>
</div>
</body>
</html>
I'm not saying my code is correct and that the browsers are not displaying it properly. I know I'm doing something wrong, I just can't figure out what. Any suggestions? Hey everyone, After doing some reprogramming of the site I was making I'm having troubles with lists. I can't set the width of the li or a so that the size takes shape. I can't figure out why, or how to do it. I know I've done it before but the code i used there just doesn't seem to want to work. The LI and A tags take the size of the text within. I've checked the resources I could find in the sticky and that kravitz gave me and they seem to be able to set width but it's just not working. here is my css Code:
#menu{
width:750px;
border:thin solid #000000;
}
#menu ul{
margin:0;
padding:0;
width:750px;
display:inline;
}
#menu li{
width:150px;
display:inline;
border:thin solid #000000;
list-style-type:none;
background-color:#550210;
}
#menu a{
width:150px;
}
If I take out the display:inline the width takes shape but when I put it back in it resizes to the size of the text within. Hi there! I've been diving into trying to make mobile web pages and though a lot of my former CSS experience helps me a great deal I get a bit perplexed about forms. I'd like to have all my form elements at the width of a 100% except for checkboxes and radiobuttons. Now, this almost works out all the way but I have a problem with how the strict rendering handles form elements. I've tried using both XHTML Mobile 1.2 and XHTML Mobile 1.0 but the same problems arise; Apart from wanting the elements to go 100% in width, I also would like them to respect margins. If I simply set the width to a 100% and my right and left margins to, say, 5px, I get the field pushed in 5 pixels from the left but I cannot get the 5 pixel indent from the right. I have tried using a wrapper div but it suffers the same result. I have figured out that this can have something to do with the rules of mobile pages provided by the XHTML mobile rendering specification but I'm now wondering if there's anything I can do to accomplish this. I've found out that mobile pages that have full width elements look (in almost all cases) very good on most handsets I've tested. Thanks in advance! Hi guys, I am building a page with CSS and I'm running into some problems with the CSS buttons I'm trying to use. Right now I have a large box along the top of the page and want two rows of buttons inside of it. These text on these buttons will likely be changing on a semi-regular basis. So instead of using gif buttons made in a graphics program, I'm using CSS to create the buttons. Since each row will have multiple buttons, I first used the display:inline; item and it worked fine in IE. In FF however, the buttons lost their height and width. If I also used the float:left; it worked right, but the buttons were not centered. In looking for a solution, I discovered that inline items cannot use the height and width properties. Any ideas on how to get what I'm looking for? I can't post a link, because this is an intranet page, but here is my relevant code... CSS Code: Original - CSS Code /*the main box which will contain the buttons*/ div#Main-buttons { width:96%; margin:2%; margin-top:10px; height:100px; padding-top:10px; background-color:#84C394; border:ridge medium #004500; } /*adjustments for FireFox*/ html>body div#Main-buttons { width:90%; margin:5%; margin-top:10px; height:100px; padding-top:0px; background-color:#84C394; border:ridge medium #004500; } /*class for individual buttons*/ div#buttons { width:100px; height:30px; margin:3px; float:left; background-color:#F7F3B5; border-style:solid; border-width:2px; border-color:#ffffff; line-height:1.6; display:inline; } a.buttonLinks:link {color:#000000; text-decoration:none;} a.buttonLinks:active {color:#000000; text-decoration:none;} a.buttonLinks:visited {color:#000000; text-decoration:none;}
HTML Code: Original - HTML Code <div id="Main-buttons"> <a href="#" class="buttonLinks"><div id="buttons">Testing</div></a><a href="#" class="buttonLinks"><div id="buttons">Testing</div></a></div> <div id="Main-buttons"> <a href="#" class="buttonLinks"><div id="buttons">Testing</div></a><a href="#" class="buttonLinks"><div id="buttons">Testing</div></a></div> Thanks in advance guys! Good day! I have exhausted all of the people I could ask regarding this so I'm hoping I may get help here. This is the first website I've made and it's causing a lot of problems. http:// www . sycwin . com / index2 . html My issue is that my website is browser compatible with everything BUT IE. My problem is getting it to look the same on IE as it currently looks now on Firefox. I understand that there are java script solutions for div stacking problems, but for some reason those are causing no effects problems: 1. subinfo not positioning over mainwrapper and is instead STACKING on top of mainwrapper on IE 2. introduction not in position to the right of carousel/slideshow on IE 3. paints and wires divs are messed up in width, padding and margin on IE here's the css: Code: body {
color:#333333;
background-color: #f5f5ef;
background-image:url(images/bg.jpg);
background-repeat:repeat;
font-family:Arial, Helvetica, sans-serif;
line-height: 18px;
font-size:11px;
padding:0px;
margin:0px;
}
emphasis {
background-color:#e7d018;
}
strong {
color:#2b6934;
}
a:active, a:link, a:hover, a:visited {
border:none;
text-decoration:none;
}
img {
border:none;
}
/*MAIN SEGMENTS*/
#mainwrapper{
width:1000px;
margin:0 auto;
margin-top:-20px;
margin-bottom:-50px;
z-index:900;
overflow:hidden;
}
#contentwrapper {
width:1000px;
margin-bottom:-10px;
}
#header {
background-image:url(images/header.png);
background-repeat:no-repeat;
height:492px;
margin-top:-15px;
width:1000px;
float:none;
}
#footer {
width:1000px;
height:222px;
background-image:url(images/footer.png);
background-repeat:no-repeat;
background-position:bottom;
margin-top:-300px;
padding-top:-300px;
margin:0 auto;
}
/*SUBINFO*/
#subinfo {
width:220px;
position:relative;
top:0px;
right:35px;
float:right;
z-index:1000;
}
#blurb {
width:220px;
height:165px;
color:#FFFFFF;
background-image:url(images/blurb_01.png);
background-repeat:no-repeat;
text-align:center;
padding-top:380px;
padding-bottom:64px;
font-size:11px;
}
.call {
font-size:22px;
padding-top:20px;
font-weight:bold;
line-height:20px;
}
#contact {
width:220px;
background-image:url(images/blurb_02.png);
background-repeat:no-repeat;
font-size:14px;
line-height:20px;
text-align:center;
padding-top:5px;
}
#blurb strong {
color:#FFFFFF;
}
.blurbheader {
font-size:20px;
font-weight:bold;
}
.blurbsubtext {
font-size:14px;
font-weight:bold;
}
#credits {
text-align: center;
font-size:9px;
line-height:14px;
padding-top:80px;
}
/*CONTENT*/
#content {
width:700px;
background-image: url(content-bg.png);
background-repeat:repeat-y;
padding-right:250px;
margin-top:-240px;
padding-left:44px;
}
#slideshow {
width:460px;
padding-left:10px;
height:360px;
float:left;
padding-bottom:20px;
overflow:hidden;
}
#write-up {
width:210px;
height:360px;
padding:8px 0 20px 10px;
margin-left:470px;
}
#products {
width:680px;
padding-right:10px;
margin: 0 auto;
margin-top:20px;
}
#products td {
width:160px;
padding-bottom:5px;
text-align:center;
}
#products-wires {
width:660px;
margin: 0 auto;
margin-top:20px;
}
#products-wires td {
width:220px;
text-align:center;
}
.product-header {
font-family:Gotham, Helvetica, Arial, sans-serif;
text-align:left;
font-size:25px;
font-weight:bold;
text-transform:uppercase;
letter-spacing:-2px;
line-height:14px;
}
#introduction {
width:680px;
font-size:11px;
line-height: 18px;
text-align:left;
overflow:hidden;
}
#paints{
margin-right:18px;
width:290px;
padding:20px;
background-image:url(images/introduction.png);
background-repeat:no-repeat;
height:195px;
float:left;
margin-bottom:20px;
}
#wires {
margin-left: 348px;
width:290px;
padding:20px;
margin-right:10px;
background-image:url(images/introduction.png);
background-repeat:no-repeat;
height:195px;
margin-bottom:20px;
}
.product-brand {
background-color:#314842;
color:#FFFFFF;
font-family:Gotham, Helvetica, Arial, sans-serif;
font-weight:bold;
text-transform:uppercase;
text-align:left;
letter-spacing:2px;
font-size:12px;
padding-left:5px;
}
/*ROLLOVER*/
#preview{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:5px;
display:none;
color:#fff;
text-align:center;
z-index:3;
}
#preview img{
width:300px;
height:300px;
}
/*CAROUSEL*/
#carousel ul {
list-style: none;
width:3600px;
margin: 0;
padding: 0;
position:relative;
padding-left:10px;
height:350px;
float:left;
padding-bottom:20px;
}
#carousel li {
display:inline;
float:left;
}
#carousel {
overflow:hidden;
I hope you guys could help me figure this one out. I'm absolutely clueless. Thank you for taking the time to read this. I've been having some issues getting a design for a site I'm co-authoring to display correctly using CSS. I know that what I'm trying to do should be possible, but I haven't been able to figure it out and am getting pretty damn frustrated with the whole thing. I could probably do it with tables, and right now I have it set up with some javascript that I threw together, but css+divs would be the ideal solution. Anyways, this is basically what I want to try and do (that's the javascript version). Just resize the window a bit to see what i'm getting at. Here's the source: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Title</title>
<style type="text/css">
<!--
#leftpane {
float: left;
height: 100%;
border: 1px solid black;
}
#rightpane {
float: right;
height: 100%;
border: 1px solid black;
}
-->
</style>
<script type="text/javascript">
<!--
// get rid of all this javascript and figure out a way to do this with css
var windowWidth = 800;
window.onload = function() {
getWindowSize();
resizeLeftPane();
}
window.onresize = function() {
getWindowSize();
resizeLeftPane();
}
function getWindowSize() {
if(window.innerWidth) {
windowWidth = window.innerWidth;
} else if(document.documentElement.clientWidth) {
windowWidth = document.documentElement.clientWidth;
} else if(document.body.clientWidth) {
windowWidth = document.body.clientWidth;
}
}
function resizeLeftPane() {
var rightpaneWidth = document.getElementById('rightpane').offsetWidth;
var margin = 10;
document.getElementById('leftpane').style.width = String(windowWidth - rightpaneWidth - margin * 3) +'px';
}
//-->
</script>
</head>
<body>
<div id="leftpane">
<p>this pane needs to stretch as wide as it can while leaving room for the image at right, whose width is arbitrary</p>
</div>
<div id="rightpane">
<img src="http://movingboxstudios.com/testz0rz/images/box.jpg" height="100%" alt="image" />
</div>
</body>
</html>
Basically I need a way to have 2 elements next to eachother, 1 of which is an arbitrary size and the other be wide enough to fill the rest of the containing block. Any help would be much appreciated. EDIT: Here's a link to the actual working design, maybe that'll help in understanding my question (don't open it in IE unless you want a facefull of ugly). Hi, I have hit the "wall" in my knowledge of CSS while trying to implement a "flex-width-equal-height-sidebar-layout" style of layout as a skin/theme for a message board system and need some help. My trouble occurs when a direct link to the post is used (instead of following the menu navigation system) where the top menu information/links area (the area between the banner and the post) is chopped off... The relevant portion of the CSS seems to be the .col_wrap {margin-top: 10px; border: 0; overflow: hidden; float: left; width: 100%; position: relative; z-index: 10; clear: both;} portion of my CSS because if I take out the overflow:hidden declaration then the menu portion of the skin/theme/layout shows correctly but the sidebar the shows the part which should be hidden at the bottom and the footer completely vanishes from view! My apologies but this is the best I can do without having the ability to post pics or urls which could better explain what is wrong and frankly speaking I don't know how anyone here can help given my inability to show the problem but hopefully someone knows or has run into this problem before or can offer some resources that may be of assistance.... 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;"> 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? 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... 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 I cannot figure this out. I've tried adding clear: both in several places, I've tried overflow: hidden and I've tried cursing. Nothing works! How can this be fixed so that in IE6 the divs are not staggered vertically?? Code: <div style="height: 38px; margin: 0px; padding: 0px; width: 140px;"> <div style="float: left; height: 38px; width: 38px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="38" border="0"></div> <div style="float: right; height: 38px; width: 102px;">copy</a><br>copy</a></div> </div> <div style="height: 38px; margin: 0px; padding: 0px; width: 140px;"> <div style="float: left; height: 38px; width: 38px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="19" border="0"></div> <div style="float: right; height: 38px; width: 102px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="8" border="0"></div> </div> 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>
|
|||||||