I'm sure this has been covered many times and I did search for it, but I can't seem to fix my specific problem. I have one div inside another and the inside one expands when the user increases the text size, but the outer one does not. I am just learning CSS, so I'm sure there's a very obvious reason for this that I'm overlooking, but I would really appreciate some help...the site is currently at: http://76.163.73.195 Thanks!!!
I'm not sure which div it is but it could be because one has a width or height set and the other doesnt
When I don't specify a height for the outer, it doesn't show up at all. I tried saying {height:auto; min-height:700px;} but it still didn't show up. It only shows up when I specify a fixed height.
position:absolute; Possible culprit, absolute positioned elements are removed from flow - as such your inner container CANNOT figure out how high it is. THIS is why you use a table, or a floated layout - absolute positioning of ANYTHING is usally a total /FAIL/. I would axe the absolute positioning for a float/flow layout, position:absolute; Possible culprit, absolute positioned elements are removed from flow - as such your inner container CANNOT figure out how high it is. THIS is why you use a table, or a floated layout - absolute positioning of ANYTHING is usally a total /FAIL/. I would axe the absolute positioning for a float/flow layout, change that navigation list to... a list, drop that STUPID MALFING Adobe MM_Swap javacrap in the trash for CSS rollovers, mark your paragraphs as PARAGRAPHS, strip out every line break, validate to make sure things like that stupid <span class="text"> is either closed or deleted, use header tags for headers instead of <span class="bold">, and in general toss about half what you have in your .html files in the can. Oh, and you can only use an ID once on a page, not six times. If I were to code the about page (which is simple and shows the problem you are having quite clearly) it would probably look like this: <!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" lang="en"><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Rye Road Medical Park // Sarasota, FL</title> <link rel="stylesheet" type="text/css" href="screen.css" media="screen, projection"> </head><body> <div id="container"> <h1><strong>Rye Road</strong> Medical Park<span></span></h1> <ul id="menu"> <li id="home"><a href="index.html">Home<span></span></li> <li id="about"><a href="about.html" class="current">About Us<span></span></a></li> <li id="site"><a href="site.html">Site Plan<span></span></a></li> <li id="offices"><a href="offices.html">Offices<span></span></a></li> <li id="contact"><a href="contact.html">Contact<span></span></a></li> <li id="location"><a href="location.html">Location<span></span></a></li> </ul> <div id="content"> <h2>Who We Are</h2> <p> Rye Road Associates was formed as a partnership with Julie Aranibar and Stanley Sabuk. This partnership developed from a relationship formed while working on a community project for local schools in Manatee County. Julie Aranibar’s professional background began in medical technology and molecular histology as well as business and professional management. Locally Julie has managed her husband’s medical practice, Bradenton Pulmonary Consultants, is owner of Medical Practice Consultants, and has been past President of the Medical Society Alliance and local school Parent Teacher Organizations. </p><p> Stan Sabuk is the principal owner and operator for Skyline Builders Group and serves on the Executive Board for Gulf Coast Builders Exchange as well has having experience as past President for Manatee Home Builders Association. He has experience and knowledge of commercial as well as residential construction, planning, county administration and code and zoning compliance. </p><p> This partnership balances the needs of the medical community with a full understanding of the local economic community base and command of the construction applications. For those who are tenants and owners of Rye Road Medical Park, their investment comes with partners who know the local community and will provide a network to starting and expanding medical practices as well as a building that will surpass expectations as to design, quality and location. </p><p> Rye Road Medical Park is located in an area of over 50,000 planned and built homes with no other dedicated medical space facility. Being located at the lighted intersection of State Road 64 and Rye Road, the park is in a prime residential setting at the center of Lakewood Ranch and East Manatee County Communities such as Mill Creek, Grey Hawk Landing, Heritage Harbor and others. Please see our map for further information on the location of this facility as well as the relationship of this medical office park centered between two community hospitals to offer the convenience to patients and their doctors. </p><p> Thank you for contacting us and please let us know if there is any other information we may provide to you. </p> <div class="address"> <strong>Rye Road Associates</strong><br /> Julie B. Aranibar, c: 941.705.1010<br /> Stan Sabuk, c: 941.704.3874 </div> </div> <div id = "footer"> TEL 941-782-1553 · FAX 941-907-9073 · <a href="mailto:info@ryeyoadasociates.com">info@ryeroadassociates.com</a><br /> RYE ROAD ASSOCIATES, LLC · 6150 STATE ROAD 70 E BRADENTON, FLORIDA 34203 </div> </div> </body></html> Code (markup): If I have time later I'll toss together the CSS to match that. Container would set width and center the whole thing - set that to overflow:auto should the side column end up longer than the content... The header would probably have a bottom margin to remove itself from flow, pad the top of the menu to compensate for that and float it left, then set the #content with a left margin equal to the width of the menu/header and the footer would of course be set to clear:both; All those empty spans would be where I'd place the images as backgrounds, directly over the inlined text so you have image degredation.
Here's how I'd have done the CSS: http://battletech.hopto.org/for_others/mtaurick/screen.css Which you can see live here: http://battletech.hopto.org/for_others/mtaurick/template.html The directory: http://battletech.hopto.org/for_others/mtaurick/ is unlocked to facilitate grabbing the files, in particular you will want this single .png that I use to implement the entire menu: Which shaves about 10k and 17 file requests off the page. Validates XHTML 1.0 Strict, CSS validates, works cross browser to IE 5.5, 6 & 7, FF, Opera and Safari. Is 'presentable' images off and makes proper use of headers meaning search engines will be more... forgiving. (the only remaining SEO change would be to swap the content and menu source order) In a few minutes I'll post up a section by section breakdown of the CSS.
Ok, first thing in the CSS is nulling all margins and padding via the universal selector. I always do this as its' just less headaches and only effects one or two minor things - like submit buttons in IE which is easy enough to 'fix' later if needed... always a question of which one involves less code - setting it each and every time on each and every element, or just doing it once and nabbing the one or two incidents where it's an issue. For the body at first I thought it was a plain background and was wondering about the image, wasn't until I zoomed in on the image 5x that I saw there is a pattern. Nonetheless I 'remastered' that down to 16 colors chopping the filesize in half, and I assigned a 'close' color as the overall background when images are turned off. Set the default font size here and we don't have to target all those pesky paragraphs, and the text-align:center is there to center #container in IE 5.x (rest of world behaves differently on that) Set a padding-bottom on the paragraph - a lot of people do margin top/bottom, but I find padding works better to avoid box errors on floats and other minor box-model issues. #container gets a width - I'm using slightly less than you did so it's ACTUALLY 800px wide friendly. -30px is the 'best bet' most of the time, but another good rule of thumb with any measurement is to keep it a multiple of 8 so the processor or GPU can shove it around as DWORD or QWORD with no odd pixel logic - so 768 it is. Margins to center it and keep the page edges away from it top/bottom, add padding to the bottom for that 32px border around #content. Overflow:auto means that should content be shorter than the menu, #container SHOULD pay attention to the height of the menu. Background needs little explanaiton, while the text-align:left; puts our text back to normal orientation in all browsers after the IE 5.x centering on the body. One thing that is 'unusual' is the use of a negative bottom margin equal to our total height - this 'pulls' the page content up over the header - we'll get to that when we hit the menu. We went with a h1 for the header - first we style it to appear 'pretty' when images are off. Width, height, padding top to center the text top to bottom, color, font-size, text-align, no real shockers there. The position:relative is there to allow us to absolute position the span inside the H1. The h1 strong gets display:block and a separate color to put it on it's own line, this mimicks the appearance of the image (kind of) - again for people browsing with images turned off, we want the page to look halfway decent. The span gets position:absolute and top:0; left:0; to position it directly over our text version - this automagically makes it display:block so we can set our width and height, and finally the background-image which is your logo. The menu is float:left and has a top padding equal to our logo. This lets our #content area ride up next to the logo without resorting to an extra DIV around the h1 and #menu... why do it this way? Less HTML for some CSS is almost always a good bet, AND it would allow you to rearrange the page layout at a later date without changing the HMTL. Being a list, list-style:none drops the bullets. Setting the LI's to display:inline avoids a lot of IE problems, ESPECIALLY in IE7. Jumping heights, odd spacings, floats that don't work 'right' - all can be avoided by setting the LI to display:inline. The anchor is what we give the block to - again as with the H1 we set it up to look 'close' to your images without the images, then overlay the image via a span atop it. The anchor gets position:relative to allow said positioning, normal dimensions, we'll set the font style and line-height, turn off text-decoration - again no real surprises. Making the line-height equal to the height of the container centers our text top to bottom. The span is almost identical to our H1, except we have all those pesky hover states to deal with. Instead of using a bunch of separate images, we'll use the one image and 'slide' the background around with background-position for each of our 'states'. Notice I set :active, :focus AND :hover all the same - no reason to leave keyboard or other alternative browsers out on our visual effects. This ends up a hefty chunk of CSS for each image, but 2k of CSS is well worth using no javascript and removing 17 or so handshakes from the server (likely quadrupling the download time) #content is easy - margin on three sides (we already have that bottom padding) - two for normal margin top and bottom, the other to make sure our text doesn't wrap around the menu. #content h2 is also simple - font size/style, color, padding - simple. That just leaves the footer. We do a clear JUST in case that overflow:auto didn't take, otherwise it's just simple styling. We don't even need to set a width or centering on it since it's text-align:center and it's content is not wider than our window. ...and that's it. No absolute positioning of actual columns or content, instead relying on flow - where absolute positioning is used it is inside a relative container preserving flow. Hope this helps.