im still learning CSS so forgive me if this is a very basic question i have the following CSS Code: #comment { width: 99%; height: auto; position: relative; border: 1px solid #99FFCC; clear: both; text-align: center; overflow: visible } #com_icon { position: absolute; top: 5px; left: 10px; height: 75px; width: 75px; vertical-align: middle; float: left; } #com_title { position: absolute; top: 5px; width: 100%; height: 10px; font-weight: bold; text-decoration: underline; text-align: center; float: right; } #com_what { height: auto; position: absolute; top: 25px; left: 95px; float: left; text-align: justify; } used for comments. the #com_what ID holds the comment text. I set height of ID comment to auto in hopes that the container would stretch to be the same size as the text content filling it, but it doesnt. it just spills over. iv tried using min-height and max-height and still it isnt stretching. Im obviously missing something basic but havent had any luck figuring it out. id appreciate it if someone could educate me in this
Absolutely positioned elements are outside of the flow of the document. Basically that means their height isn't taken into account when positioning other elements, so the browser sees the contents of the #comment element as having a height of 0, regardless of what's in its three children. Is there any reason why you need to use absolute positioning for the child elements?
No Overflow is just that, overflowing outside of the containing box, and as such not affecting its dimensions or layout.
so if i changed #com_what to relative would that work? well i tried that and it kind of worked, it pushed the other elements below it down but the border didnt stretch and the #comments below it over lap some because if i dont they position wrong
ok heres what i want Code: ------------------------------------------------------------------------- | ------------ #com_title | | | ICON | ------------------------------------------------------ | | | | | | | | ------------ | #com_what | | <- #comment | | | | | | | | | | | | | ------------------------------------------------------ | ------------------------------------------------------------------------- i want #comment to stretch vertically with #com_what #com_what is wraping around ICON (#com_icon) if i use relative positioning I want to get the hang of CSS but stuff like this make me remember why i like tables, design once works across all browsers, does what you tell it, BUT unmaintainable, unflexable
Here's a sample, should get you in the right direction: Code: <!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>ab</title> <style type="text/css" media="screen"> .comment { width: 500px; border: 1px solid #000; } .comment .com_title { display: block; width: 100%; font-size: x-large; text-align:center; } .comment .com_icon { display:block; float:left; width: 50px; height: 50px; border:1px solid #000; } .comment .com_what { display:block; float:left; width:200px; background-color: lightyellow; } div.clear { clear:both; } </style> </head> <body> <div class="comment"> <div class="com_title">some title</div> <div class="com_icon">icon would go here</div> <div class="com_what">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div> <div class="clear"></div> </div><!--.comment--> </body> </html> Positioning always works out a little funky unless you're... well, lucky, usually, or have an unusually good idea of what you're doing. I avoid it whenever possible, though it's the only way to do some things (thickboxes, mostly). The above floats your icon and text divs to the left within the comment box, so they line up inline. You need the clearing div underneath them so that there's something that sets the height property of the comment wrapper div. Unfortunately, it's damn near impossible to get working reliably with fluid-width setups, only because percent-based systems just fail abysmally for images. Readability and consistency aside, it's probably a good part of why so many sites are fixed-width. Too bad you can't do width: 100% - 75px; or something (at least w/out javascript, which should stay the hell away from layout except in very, very rare circumstances). Styles and widths and whatnot in there are just to make it a bit easier to see what's going on, obviously you can change them to whatever you need. Only really important stuff is that .com_icon and .com_what have float:left;, their combined width (using the box model, so border+padding+margin) is less than the width of .comment, and that the div.clear is present.
My attempt. Code: <html> <head> <style> .comment { width: 650px; background-color: #000; } .wrap_left { float: left; width: auto; background-color: #DDD; } .wrap_right { float: left; width: 500px; background-color: #DDD; } .com_icon { width: 70px; height: 70px; padding: 5px; background-color: #999; } .com_title { width: 100%; padding: 5px; background-color: #999; } .com_what { width: 100%; padding: 5px; background-color: #DDD; } .clear { clear:both; } </style> </head> <body> <div class="comment"> <div class="wrap_left"> <div class="com_icon">icon</div> </div> <div class="wrap_right"> <div class="com_title">Comment title</div> <div class="com_what"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin sed erat. Duis pulvinar. Ut tincidunt turpis sed risus. Sed nec velit in risus pellentesque mollis. Nulla facilisi. Nam eu ligula. Mauris aliquet arcu nec velit. Etiam erat. Proin dictum, ligula ut gravida convallis, velit lacus vehicula diam, sit amet hendrerit odio sem sed nisl. Nunc tincidunt, mauris at iaculis laoreet, ipsum nibh rutrum erat, eu mollis diam sapien et eros. In porta tellus congue neque. </p> </div> </div> <div class="clear"></div> </div> <br /> <div class="comment"> <div class="wrap_left"> <div class="com_icon">icon</div> </div> <div class="wrap_right"> <div class="com_title">Comment title</div> <div class="com_what"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin sed erat. Duis pulvinar. Ut tincidunt turpis sed risus. Sed nec velit in risus pellentesque mollis. Nulla facilisi. Nam eu ligula. Mauris aliquet arcu nec velit. Etiam erat. Proin dictum, ligula ut gravida convallis, velit lacus vehicula diam, sit amet hendrerit odio sem sed nisl. Nunc tincidunt, mauris at iaculis laoreet, ipsum nibh rutrum erat, eu mollis diam sapien et eros. In porta tellus congue neque. </p> </div> </div> <div class="clear"></div> </div> </body> </html> The background colours are there for debug purposes and can be removed.
well if you put it that way, ill send you some PSDs and pay you $200 each to make them cross browser CSS just so i dont have to do them payment on browsershots verification across all A-class browsers (IE 5.5+, safari, firefox, opera)
Depends how complex the PSDs are, but if I had a copy of IE5.5 I'd probably take you up on that. PM me or email eric@ the domain noted in my sig if you want to try working something out. edit - the first domain. forgot I link out to two lol
IE 5.5... A-class? Is there a specific reason you need your sites to support IE 5.5? It has a negligible market share, hasn't been supported by Microsoft since the end of 2005 and is an absolute pig to get well-built sites working in. Just in case that comes across the wrong way, I'm not being confrontational, just curious
