CSS - Problems With Containers And Fluidity
I am so glad that I found somewhere where I might be able to get some help! Currently brain is running so hot its close to seizing or exploding!
I have a page design which has three columns each of which has a number of divs within it and a footer all contained within an empty_centre div. Each of the three columns has a container sidebarContainerLeft, midContainer, sidebarContainerRight and all of these are in a contentContainer. So, when filled with content the sidebarContainerLeft and sidebarContainerRight are correctly increasing the height of the contentContainer and the footer is correctly positioned. However when the content in the midContainer exceeds the height of sidebarContainerLeft and sidebarContainerRight the contentContainer is not increasing in height and the footer overlaps the contents of the midContainer! I am completely stuck and wondered if someone could help me!! results with skitch can be seen he - good www.rcm01.f2s.com/tmp/GoodRight.html.jpg good www.rcm01.f2s.com/tmp/GoodLeft.html.jpg bad www.rcm01.f2s.com/tmp/BadMiddle.html.jpg html:- Code: <body> <!-- This is 'empty_center' --> <div id="empty_centre" > <div id="contentContainer" > <div id="midContainer"> <div id="content" class="textcontent" > Main content goes here </div> <div class="clear"></div> <div id="content2" class="textcontent" > Another content set goes here </div> </div> <div id="sidebarContainerLeft" > <div id="phonebar" > phone number </div> <div id="adbar1" > advert 1 </div> <div id="adbar2" > advert 2 </div> </div> <div id="sidebarContainerRight" > <div id="twitter" > twitter posts go here </div> <div id="newsletter" > newsletter signup goes here </div> </div> <div class="clear"></div> <div id="footer" class="textcontent" > footer goes here </div> </div> </body> </html> css:- Code: #empty_centre { position: absolute; top: 20px; left: 50%; width: 940px; margin-left: -470px; height: auto; z-index: 1; } .clearpad { width: 100%; height: 65px; margin: 0 0 -1px; clear: both; } .clear { clear: both; } /* Page */ #contentContainer { border-style: dotted; height: auto; position: absolute; width: 940px; } #midContainer { float: left; border-style: dotted; position: absolute; left: 190px; width: 460px; } #content { position: relative; background-image:url('./opaquefiller.png'); padding-right: 10px; width: 400px; margin-left: 20px; padding: 10px 10px 10px 10px; } #content2 { position: relative; background-image:url('./opaquefiller.png'); width: 400px; height: auto; margin-left: 20px; margin-top: 10px; padding: 10px 10px 10px 10px; } #reviews { position: relative; background-image:url('./opaquefiller.png'); margin-top: 10px; padding-right: 10px; width: 490px; padding: 10px 10px 10px 10px; margin-left: 10px; } /* Sidebar */ #sidebarContainerRight { border-style: dotted; position: relative; float: right; width: 270px; } #sidebarContainerLeft { border-style: dotted; position: relative; float: left; width: 180px; } #phonebar { background-image:url('./opaquefiller.png'); position: relative; width: 160px; min-height: 30px; height: auto; padding: 10px 10px 10px 10px; } #adbar1 { background-image:url('./opaquefiller.png'); position: relative; width: 160px; height: auto; margin-top: 10px; padding: 10px 10px 10px 10px; } #adbar2 { background-image:url('./opaquefiller.png'); position: relative; width: 160px; height: auto; margin-top: 10px; padding: 10px 10px 10px 10px; } adbar3 { background-image:url('./opaquefiller.png'); position: relative; width: 160px; height: auto; margin-top: 10px; padding: 10px 10px 10px 10px; } #twitter { background-image:url('./opaquefiller.png'); position: relative; width: 210px; height: auto; padding: 10px 10px 10px 10px; } #newsletter { background-image:url('./opaquefiller.png'); position: relative; width: 210px; min-height: 150px; height: auto; margin-top: 10px; padding: 10px 10px 10px 10px; } /* Footer */ #footer { position: relative; background-image:url('./opaquefiller.png'); margin-top: 10px; width: 940px; height: auto; z-index: 3; } Similar TutorialsHi, I need help with a container div. Something is screwy in the way I have nested my divs and I think it has something to do with position: relative or absolute. I get the difference between the two, but not the relationship. Can someone tell me what I'm doing wrong? http://idiaonline.com/websites/taz/index.php Code: <div id="container"> <div class="logo"></div><div class="top"></div> <div class="navline"></div> <div class="navbar"> <div class="navsquare"><img src="images/faq.gif" alt="Taz Limousine Service Policy" width="43" height="41" /><br />F.A.Q.</div> <div class="navsquare"><img src="images/fleet.gif" alt="Our Vehicles" width="43" height="41" /><br />Fleet</div> <div class="navsquare"><img src="images/contact.gif" alt="Contact Us" width="43" height="41" /><br />Contact</div> <div class="navsquare"><img src="images/maps.gif" alt="Maps & Directions" /><br />Maps</div> </div> <div class="content"> <div id="left"> <div class="about"> <p><br /> <br /> Taz Limousine is dedicated to dependable,courteous and quality service for business or personal transportation at competitive pricing. In order to achieve that goal in a secure and comfortable environment we rely on experienced chauffeurs and well maintained vehicles that meet city, state and federal regulations. Thank you for considering Taz Limousine Service.</p> <p> </p> <div class="weather"> <div align="center"> <br /> <p></p> </div> </div> <div style="float:right; width:150px;"><br /><br /> <h2> Atlanta, GA</h2> </div> </div> </div> <div id="mid"> <div class="rotate"><img src="images/rotate/rotate.php" alt="Limousine Service Atlanta" /></div></div> <div id="right"><div class="special"> <h1> Reserve A Limo Today!</h1> </div></div> </div> </div> and css Code: body, html { font-family:Arial, Helvetica, sans-serif; color:white; height:100%; margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; } a:link { color: #FFFFFF; text-decoration: none; font-weight:bold; } a:visited { text-decoration: none; color: #0066FF; } a:hover { text-decoration: underline; color: #0000FF; } a:active { text-decoration: none; color: #FFFFFF; } #container { width:800px; margin: 0px auto; position:relative; background:#000033; border: thin #0000ff solid; } .top { height: 108px; width: 800px; position: absolute; left: 0px; top: 0px; background-image:url(images/gradient.jpg); background-repeat: repeat; z-index: 2; } .logo { background-image: url(images/taz-logo.gif); background-repeat: no-repeat; background-position:top; height: 60px; width: 305px; left: 0px; top: 25px; z-index:4; position:absolute; } .navline { background-image: url(images/blk-gradient.jpg); background-repeat: repeat-x; position: absolute; height: 42px; width: 100%; left: 0px; top: 108px; z-index: 3; } .content { background:#000033; position: absolute; height: 100%; width: 100%; left: 0px; top: 0px; z-index: 1; border:solid #0000ff thin; } .navbar { position: absolute; height: 60px; left: 60%; top: 75px; z-index: 15; width:288px; } .navsquare { position:relative; float:left; height:60px; width:72px; background-image:url(images/nav-square.gif); background-repeat:no-repeat; text-align:center; font-size:9px; font-style:italic; } .about { position:relative; left:5%; top:40%; background-image:url(images/about_taz_limousine.gif); background-repeat:no-repeat; width:225px; height:150px; font-size:10px; padding-left:25px; z-index:4; } .rotate { position:relative; top:10%; z-index:3; } .weather { position:absolute; background-color:#000033; top:159px; background-image:url(images/weatherbox.jpg); background-position:left; background-repeat:no-repeat; height:81px; width:94px; left: 6px; } .special { background-image:url(images/special.gif); width:271px; height:88px; position:absolute; text-align:center; top:15%; } #left { float:left; position:relative; top:200px; width:35%; z-index:50; } #mid { float:left; position:relative; top:175px; width:35%; } #right { float:left; position:relative; top:200px; height:300px; width:30%; z-index:30; } h2 { font-size:15px; } h1 { font-size:18px; font-variant:small-caps; } I have partially succeeded in making a table of products that changes column number depending on page width. The magic of DIVs. It's been a dream of mine . LOL. Problem is I can't figure out how to center the shown container objects in each row. So, unless the width of your browser is just right, everything ends up off-center. (http://www.harpgallery.com/showroomdetail/cat_id/4/) I've been looking at how Newegg does it, but I just can't figure out what they've done to get their containers to dynamically resize and float like they do. It's a work of CSS art for sure. I snipped out the code I'm using to make the page. I was hoping some of you here would have some ideas? Thanks! Code: --The HTML-- <table border='0' cellpadding='2' cellspacing='2' bgcolor='#000000' width=100%> <tr><td> <div id='HomepagePrd'> <div class='Section'> <div class='product'> <div class='prodImage'><a href='Product URL'><img Border='0' src='Image URL' height=150 align='top' /></a> </div> <div class='desc'> <h3><a href='$PDurl' ><font color=white face=georgia,arial>Product Name</font></a></h3> </div> </div> </div> </div> </td></tr> </table> --The CSS-- #HomepagePrd{width:100%;clear:both;min-width:472px;} .Section{float:left;width:240px;} .product{ position:relative; width:100%; margin:5px 2px 2px 5px; height:180px; } .prodImage{text-align: center;position:relative;width:100%;} .desc{position:relative;width:100%;margin:0px;padding:0px;} .desc h3{text-align: center;font-size:12px;margin:0px;padding:0px;} i am working for a client that is strict on making sure that all code is up to standards. the question i have is, how can i use the same class container twice in the same page and have everything up to standards? the catch is the doctype has to be XHTML 1.0 Transitional and i can't have the same id twice on the page. i'd hate to make 2 classes for the same style. any suggestions? Code: <ul id="headerfooter"> <li><a href="link1.html">header link 1</a></li> <li><a href="link2.html">header link 2</a></li> <li><a href="link3.html">header link 3</a></li> </ul> Code: <ul id="headerfooter"> <li><a href="link1.html">footer link 1</a></li> <li><a href="link2.html">footer link 2</a></li> <li><a href="link3.html">footer link 3</a></li> </ul> Thanks for taking the time to read my question. I have two containers that I want to line up at the top. I can't seem to make them line up. I have a picture inside a <div>, then I have a paragraph. It works in IE7, but in FF, the <p> appears under the picture. If I put a width on the <p> it moves up, but never up all the way so that it is inline with the picture. I'm stumped and not sure what to do. I tried putting display:inline; on either classes, and on both classes at the same time. Not sure what else to do. If I put a width on the <p>, it looks like this in FF |------| |Icon | |---------------------------| |------| | ElevatorSpeech ES2..........| .............|---------------------------| It looks like this if I have no width on <p> |------| |Icon | |------| |---------------------------| |ElevatorSpeech ES2...........| |---------------------------| HTML: Code: <div class="ESContainer"> <p class="Title1">Control</p> <div class="Icon"><img src="Images/Remote.jpg" align="Zone All Control Remote Control" /></div> <p class="ElevatorSpeech ES2">Control your surroundings with confidence, get the results you deserve.</p> <p class="ElevatorFull"><span class="EFLargeText">Zone-All</span> has been manufacturing room comfort temperature controls for more than two decades. Its variable air volume and variable temperature solutions for zone controls are applicable to heating and cooling systems that are designed using both incremental HVAC units and central station air handlers.</p> </div> CSS: Code: .Icon { float: left; margin-left: 10px; padding: 0px; height: 100px; background-color:#FF0000; } .ElevatorSpeech { font-size: 19px; margin-left: 10px; margin-right: 10px; float: left; padding: 0px; /*width: 225px;*/ background-color:#FFFF00; } Thanks, Brad Hi, i need a bit of help here.. i got my page up and running perfectly on FF but as for IE7.. well it does load! I have problems with the right menu, the div's i use as containers are not working as they suppose to do. plz see for youself www.soyunapendeja.com.ar can i get a litle help here? Thank you. Please take a look at a site I'm developing: http;//www.b4itwascool.com The CSS is he http://www.b4itwascool.com/css/main.css I'm also using a Lightbox 2.0, so that CSS is he http://www.b4itwascool.com/css/lightbox.css 1. There is a lot of extra space below the footer. I assume this is where the containers would have been had I not relatively repositioned them? How do I remove this space? 2. I want the right "steel" beam to repeat-y to the bottom of the page. I don't know why that's not working. 3. If you click the top links, you will see that sometimes the footer falls within the left "column", and sometimes it falls within the right column. How do I ensure it always falls to the right, like the way it appears on the homepage? thanks for any advice! When I am floating two containers or images my background color disappears. Why is that and what should I do instead? Here is what I am doing: <div class="contentWrapper"> <div class="content"> <div class="leftContent"> <img src="" alt="" /> </div> <!-- end leftContent --> <div class="rightContent"> <img src="" alt="" /> </div> <!-- end rightContent --> </div> <!-- end content --> </div> <!-- end contentWrapper --> Now the css: .contentWrapper { margin: 0; padding: 0; width: 100%; } .content { margin: 0 auto; padding: 0; width: 960px; background: #ccc; } .leftContent { margin: 0; padding: 0; width: 450px; float: left; } .leftContent img { margin: 0; padding: 0; width: 200px; height: 200px; border: #000 solid 1px; } .rightContent { margin: 0; padding: 0; width: 450px; float: right; } .rightContent img { margin: 0; padding: 0; width: 200px; height: 200px; border: #000 solid 1px; } Thanks! If you are getting results as in the above image, simply add "clear:both;" to the container (blue) div which you do not want affected and it will flatten its ceiling and stop any float's escaping. -Luke Hello all. I've got a layout with three columns. The first column contains the navigation and the second two are variable content. All the columns can be any length, and consist of any number of divs; each div is a bordered block of variable-sized content. The problem is if I want to float an image around some text in the second or third column. Since the image is floating, its container doesn't extend fully, and the image overlaps the border and the block below it. However, if I put a "clear: both" spacer within the block, then the container clears elements in the left or right columns, and extends way too far down! What I really need is a way to just clear a single level of nesting, but "clear" seems to be pretty much all or nothing. I've also tried the pseudoclass :after trick to extend the box, but that didn't appear to do any good. It just added the content inside the border of each block, but doesn't enclose the image at all. I hope somebody has suggestions - I actually haven't found anything about this problem, but perhaps I'm just looking for the wrong terms. It seems like a fairly fundamental thing to do... Thanks! Hi all 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>untitled</title> </head> <body> <table style="margin-bottom: 10px;" cellspacing="0" cellpadding="0"> <tr> <td>asdf</td> </tr> </table> <p style="margin-top: 10px;">asdf</p> </body> </html> Why do the margin-bottom of the table and the margin-top of the p not collapse (only tested in Firefox2)? Why is there 20px between them? I don't understand the world of margins anymore... Is this an exception or a bug or what? Thanks for help, Josh I am developing a web site, panopticinsight dot com. The header/banner looks fine in Firefox. In IE7 and Opera, the H2 subtitle is left aligned over the globe image. In IE6 content jumps outside of container. Anyone know why there is a shift, and what I can do about it? Style sheet code pasted below: Code: body { width:800px; font:0.83em/1.4em Tahoma, Geneva, sans-serif; color:#CBD4E3; background:#000 url(images/body_bg.gif) repeat-y top center; letter-spacing:1px; margin:0 auto; } h1,h2,h3,h4,h5,h6 { font-family:"Times New Roman", Times, serif; font-style:italic; font-weight:bold; color:#e9df55; background-color:#000; } h2 { font-size:2em; } h3 { font-size:1.5em; } h4 { font-size:1.25em; } a:link { color:#8090AC; text-decoration:none; } a:visited { color:#B17F6C; text-decoration:none; } a:hover { color:#E9DF55; text-decoration:underline; } a:active { color:#E9DF55; text-decoration:none; } #container { width:760px; margin:0 auto; } #header { height:200px; width:760px; margin:0; padding:0; } #banner { height:100%; width:100%; color:#cbd4e3; background:#000 url(images/header_bg.jpg) no-repeat top left; margin:0 auto; padding:0; } #banner h1 { font-size:400%; color:#CBD4E3; background-color:transparent; float:left; display:inline; margin:0; padding:70px 0 70px 280px; } #banner h2 { font-size: 12pt; color: #e9df55; background-color:transparent; text-indent: 200pt; vertical-align: text-bottom; } navigate{ color : #105BAC; background-color : transparent; height : 20px; font-size: 100%; border-top : 1px solid #999999; } #navigate ul { list-style-type: none; margin-top: 0px; margin-bottom: 0px; margin-left: 150px; margin-right: 0px; padding: 2px 0 0 0; } #navigate ul li { display: inline; } td { font-family: Arial, Helvetica, sans-serif; } th { font-family: Arial, Helvetica, sans-serif; } p { font-size: 14px; color: #FFFFFF; left: 50px; right: 50px; } #main { width: 660px; padding-right: 50px; padding-left: 50px; } #footer { font-family: "Times New Roman", Times, serif; font-size: 9px; color: #666666; height: 100px; width: 760px; vertical-align: text-bottom; text-align: center; } #SplashImage { float: left; } .image-left { clear: none; margin-bottom: 10px; float: left; margin-right: 20px; margin-left: 10px; } .image-right { clear: none; margin-bottom: 10px; margin-left: 10px; float: right; } Hey all, I have a small problem. In my webpage stylesheet I have set the <input> tag as having a solid border of 1 in black. Now when I do text boxes this is fine. But when i do checkboxes it looks stupid so how do it so that on some input tags it works and other input tags it doesn't. Thanks in advance. I have designed a site recently and have two small problems left to sort out. The first is that I have a div full of thumbnails, under some of these I have a small 'new' to show that this image is new. This works fine in Safari/Firefox/Mozilla, and also works in IE 5+ with help of the box model hack, however IE6 posistions the text in the middle of the thumbnails. You can see this at www.marcelbaker.com/portfolio.php A sample of the html for this is Code: <div id="container1"> <div id="float"> <div id="drinks"><a class="selected" href="/portfolio.php?page=1&old="><br /><p class="new">new</p></a> </div> </div> </div> The css for the thumbails is: Code: #float { margin: 0; padding: 0; list-style: none; display: inline; } #float a { width: 45px; float: left; padding: 0; margin: 0; height: 45px !important; height /**/:45px; /* for IE5/Win only */ } #float a:hover, #float a.selected { width: 45px; background-position: -45px 0; } #float a:active { width: 45px; background-position: 0 0px; } .new { text-align: center; font-size: 9px; color: #BB0000; text-align: center; margin-top: 41px; /* ie5win fudge begins */ voice-family: "\"}\""; voice-family: inherit; margin-top: 27px; } With each of the thumbnails having its own rule to show its image and create a rollover effect. ie Code: #drinks a { margin: 0px 17px 0px 0; background: url(path/to/image.jpg) top left no-repeat; margin: 0px 17px 0px 0; voice-family: "\"}\""; voice-family: inherit; margin: 0px 17px 10px 0; } html>body #drinks a{ margin: 0px 17px 10px 0; } Any ideas on this? My other problem is that on the clients section www.marcelbaker.com/clients.php All the thumbnails appear 4 across a row (if applicable) except for Group M, here it only displays 3 on a line although the html and css is the same for all the client pages. I've check to make sure the images aren't wider or anything like that. This is a real head scratcher, I've been trying to figure this out for days with no luck. I really appreciate your help on these problems. Many Thanks Kieran Man I love how my site works fine in just about every browser and even across platforms in macosx and windows and yet ie still manages to royally retard my site. http://www.unlimitedgamer.net/ Basically in IE6 there is a huge space between the search (top navigation area) and the header: wew. Second at the end ot the news the 2 last posts, the text in the news decides it wants to travel to the magically empty space to the left and not display correctly. I for one am beyond frustrated with trying to fix these errors, up until now i was on IE7 and just found out all these holes existed, not to mention ie6 was also pushing my navigation to the end of the page because it refuses to adhere to all the other browser standards of width and margin... Any help I am thankful for, cause right now I have an atomic headache like mostpeople i mademy site using FF and it worked fine till i tried it on IE. the URL is http://wakefieldfhs.co.uk/stu/snap/index.php the inital problem is in F the .main class shows at 100% but in IE it shows only to the scale of the text. also the links are in the wrong position too! any ideas? -----CSS------- Code: a:link { color:#0099FF; text-decoration:underline; font-weight:bold; font-family :Verdana, Tahoma, Arial ; } a:visited { color:#0099FF; text-decoration:underline; font-weight:bold; } a:hover { color:#0099FF; text-decoration:underline; } a:active { color:#0099FF; text-decoration:underline; } body { background-color:#CCCCCC; font-family: Arial, Helvetica, sans-serif; } .header { background-color:#000000; color:#FFFFFF; width:100%; height:15%; } .links { top:10%; float:left; } .status { width:30%; background-color:#FFFFFF; } .main { background-color:#FFFFFF; height:100%; } .logo { float:left; position:static; } .footer { background-color:#000000; width:100%; height:20px; margin: 0 auto; color:#FFFFFF; bottom:0px; } label { float: left; width: 120px; font-weight: bold; } input { width: 180px; margin-bottom: 5px; font: 11px Verdana, Sans-Serif; } #wrapper { width: 75%; height:70%; margin: 0 auto; background-color:#FFFFFF; border-color:#000000; top:0px; position:absolute; left:12.5%; } #login-box { float: right; } http://86.7.141.216/neoxios%202 Read that please. It's all explained there. since installing IE7 some of my images are appearing differently, for example the following is not displayed at all when i call it.. PHP Code: .bgright { background: url('images/br_logo.jpg') no-repeat fixed bottom right; } if i removed the "fixed" property, it works. why is this? thanks! I'm trying to build a menu with CSS and have some problems I can't figure out. Here's what I got so far: testsite So I need some kind of workaround for InternetExplorer cause it doesn't display the fonts correctly, what do I need to change to get that right? And is there a way to automatically adjust the width of the submenu fields according to the length of the text that's written within? Here's the stylesheet: Code: menutext { font-family:sans-serif; font-size:25px; } subtext { font-family:sans-serif; font-size:10px; color:#707070;} subtext2 { font-family:sans-serif; font-size:12px; color:#707070;} subtext2:hover { color:white;} ul{ list-style-type:none; padding:0px; position:relative; } a{ float:left; width:137px; text-decoration:none; color:#27251c; font-weight:bold; background:#e0e0e0; padding:5px; border-right:1px solid #FFFFFF; } li { display: inline;} a:hover { background:#27251c; color:white; } #navi { width:888px; position:absolute; margin-left:-444px; margin-top:-13px; left:50%; } #navi #aktuell a{ background:#27251c; color:white; } And here's the html: Code: <html> <head> <title>the artist crew</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <center> <img src="images/banner.png"> </center> <div id="navi"> <ul> <li><a href="index.html"> <menutext>home</menutext> </br> <subtext>news & announcements</subtext> </a></li> <li><a href="projects.html"> <menutext>habitat</menutext> </br> <subtext>who we are, what we do</subtext> </a></li> <li id="aktuell"><a href="flow.html"> <menutext>flow</menutext> </br> <subtext>exhibitions & other works</subtext> </a></li> <li><a href="nexus.html"> <menutext>nexus</menutext> </br> <subtext>downloads & free stuff</subtext> </a></li> <li><a href="swarm.html"> <menutext>swarm</menutext> </br> <subtext>friends & affiliates</subtext> </a></li> <li><a href="hive.html"> <menutext>hive</menutext> </br> <subtext>where to get our stuff</subtext> </a></li> </ul> <ul style="top:2px;"> <li><a href="projects.html" style="width:48px;"> <subtext2>projects</subtext2> </a></li> <li><a href="conceptart.html" style="width:67px;"> <subtext2>concept art</subtext2> </a></li> <li id="aktuell"><a href="urbanart.html" style="width:53px;"> <subtext2>urban art</subtext2> </a></li> <li><a href="paintdraw.html" style="width:120px;"> <subtext2>paintings & drawings</subtext2> </a></li> <li><a href="sketches.html" style="width:53px;"> <subtext2>sketches</subtext2> </a></li> </ul> </div> </body> </html> Thanks in advance! |