[SOLVED] Dynamic Divs

[lemmin]

If I were using a table, I would want to make two columns; one has a fixed width, the other has a percentage (100%) so that it dynamically changes depending on the window size, but the other one always stays the same. If I try to do this with inline divs, the percentage is always of the entire page, itself, not the remaining space after the fixed width column.

 

Does anyone know how I can do this without using javascript to dynamically change the value? It doesn't have to be divs, I don't care if it is not "standard compliant," I just don't want to use tables because they interrupt the styles.

 

P.S. Is ther anyway to remove the padding that is around span tags? I would want to make them sit next to eachother without a space, like divs would.

 

Thanks.

[calabiyau]

You can float your fixed width column left and next in the source comes the dynamic content column...give that column a margin-left equal to the width of the fixed width column.  No need to give it a percent width as it will automatically take up the rest of the page width.

 

css

#fixed_width { float: left; width: 200px;}

#dynamic { margin-left: 200px;}

 

html

<div id="fixed_width"></div>
<div id="dynamic"></div>

[bronzemonkey]

I don't care if it is not "standard compliant," I just don't want to use tables because they interrupt the styles.

 

You should care if it is standards compliant because otherwise it's likely to break in different browsers! You're right not to use tables, as this is a layout issue, not the display of tabular data.

 

Anyway, I'm not exactly sure what you want but there are a couple of approaches:

 

<!-- xhtml -->

      <div id="column_dynamic">
         <div id="column_fixed">
         <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
         </div>
         <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
      </div>
   </div>

/*css version1 - absolute positioning*/

#column_dynamic {position:relative; width:auto; border-left:210px solid #fff;}
#column_fixed {position:absolute; top:0; left:-210px; width:200px;}

/*css version2 - negative margins*/

#column_dynamic {position:relative; width:auto; border-left:210px solid #fff;}
#column_fixed {float:left; width:200px; margin-left:-210px;}
#column_dynamic:after {content:"."; display:block; height:0; font-size:0; clear:both; visibility:hidden;}
* html #content_dynamic {height:1%;} /*ie6 float fix*/
*:first-child+html #content_dynamic {min-height:1px;} /*ie7 float fix*/

/*css version3 - negative margins and background image*/

#column_dynamic {position:relative; width:auto; padding-left:210px solid #fff; background:url(imagefolder/imagefile.gif) 0 0 repeat-y;}
#column_fixed {float:left; width:200px; margin-left:-210px;}
#column_dynamic:after {content:"."; display:block; height:0; font-size:0; clear:both; visibility:hidden;}
* html #content_dynamic {height:1%;} /*ie6 float fix*/
*:first-child+html #content_dynamic {min-height:1px;} /*ie7 float fix*/

 

I'd go with css version2/3 because, whatever the height of either column (depending on content), you will always get the appearance of them being equal height because the border acts as a background image. If you really want to use an actual background image for the fixed column then use version3 and make sure that your image contains a portion that is the same width as the fixed column.

 

The last 3 lines of css code in version 2/3 are required to properly clear the floated #column_fixed div.

 

P.S. Is ther anyway to remove the padding that is around span tags? I would want to make them sit next to eachother without a space, like divs would.

 

It's best to use "reset" the css browser defaults. I use something like this at the top of every stylesheet:

 

*, html, body, div, span, object,
h1, h2, h3, h4, h5, h6,
p, blockquote, pre, a, em, font, img, strong,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, tr, th, td {margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-style:inherit; font-size:100%; font-family:inherit; vertical-align:baseline;}

ol, ul, li {list-style-type:none;}

[lemmin]

Thanks calabiyau, that is exactly what I was trying to figure out. I just set the the left column's positioning to absolute so that it would float over the margin of the right one.

 

Thanks for all the information, bronzemonkey, I SHOULD care, but this particular site I am doing shouldn't have any need to be published in a manner that would need accessability for different browsers. It should work with any browser so far, though.

 

For the span question, what does resetting it do? Do you know what property or style is actually causing it to have the spacing?