CSS - Float - Wrapper Issue - See Inside...
Ok so either I'm tired and not thinking straight or I'm going crazy... Never had this problem before... The top wrapper has a gap below it in IE6 so it's not flush with the middle wrapper... Any ideas... See my source code below... Thanks for the help.
PHP Code: <style type="text/css"> /* Structure */ /*-------------------------------------------------------------------- */ #Container { position:relative; margin:0 auto; width:920px; height:auto; min-height:100%; } #LeftSection { float:left; display:block; width:400px; height:200px; margin:0 0 0 2px; padding: 0 0 0 0; } #RightSection { float:left; display:block; width:400px; margin:0 0 0 0; padding: 0 0 0 0; height:200px; } #GreenTop { float:left; display:block; width:399px; height:30px; margin:0 0 0 0; padding: 0 0 0 0; background-color:#bdcdba; } #GreenTitle { float:left; display:block; font-family:Arial, Helvetica, sans-serif; font-size:11px; width:100px; margin:0 0 0 0; padding:0 0 0 11px; } #InnerControls { float:left; display:block; font-family:Arial, Helvetica, sans-serif; font-size:11px; width:295px; height:auto !important; min-height:100%; margin:0 0 0 0; padding:0 0 0 0; } #innerContainer { float:left; display:block; width:295px; height:auto; margin:0 0 0 7px; padding:0 0 0 0; } /* Wraps */ /*-------------------------------------------------------------------- */ #wrapTop { float:left; margin:0 0 0 0; padding:0 0 0 0; clear:both; display:block; width:908px; height:3px; background-image:url(images/topWrapper.gif); background-repeat:no-repeat; } #wrapMiddle { float:left; margin:0 0 0 0; padding:0 0 0 0; clear:both; display:block; width:908px; height:auto; background-image:url(images/middleWrapper.gif); background-repeat:repeat-y; } #wrapBottom { float:left; margin:0 0 0 0; padding:0 0 0 0; clear:both; display:block; width:908px; height:3px; background-image:url(images/bottomWrapper.gif); background-repeat:no-repeat; } #wrapInnerTop { float:left; display:block; width:295px; height:3px; margin:0 0 0 0; padding:0 0 0 0; background-image:url(images/innerTopWrapper.gif); background-repeat:no-repeat; } #wrapInnerMiddle { float:left; display:block; width:295px; height:auto; margin:0 0 0 0; padding:0 0 0 0; background-image:url(images/innerMiddleWrapper.gif); background-repeat:repeat-y; } #wrapInnerBottom { float:left; display:block; width:295px; height:3px; margin:0 0 0 0; padding:0 0 0 0; background-image:url(images/innerBottomWrapper.gif); background-repeat:no-repeat; } </style> <div id="Container"> <div id="wrapTop"></div> <!--// Start Auto-Middle Wrapper //--> <div id="wrapMiddle"> <div id="LeftSection"> <div id="GreenTop"> <div id="GreenTitle"><strong>Branch:</strong></div> </div> <div id="InnerControls"> <div id="wrapInnerTop"></div> <div id="wrapInnerMiddle"> <div id="innerContainer">TEST<br /> TEST<br /></div> </div> <div id="wrapInnerBottom"></div> </div> </div> <div id="RightSection"></div> </div> <!--// End Auto-Middle Wrapper //--> <div id="wrapBottom"></div> </div> Similar TutorialsI just noticed an issue I'm having related to the content on almost all the pages on my site. I have the code below for the body and the #page div. The #page div is supposed to be like a wrapper that encompasses everything. I just tried putting in a border (border: 1px solid #FFFF00 for the #page div so I could see how everything lined up within it (since I have the same background-color for the body and the #page div I can't normally see this). When I added this yellow border, I found only one page where the border went around everything. On all the other pages, the border seems to either not close or to only go around the content near the top of the page or to go around nothing. I think this means that all the code that I have in the #page div is not being applied to most of the content on each of those pages. I'm having a hard time understanding why that border I inserted does not go all the way around everything (why the #page div does not seem to be including everything). I have the div properly closed at the bottom of the page (</div></body></html>) and this is even happening on pages where I have no validation errors. body { background-color: #000000; margin: 0px; } #page { width: 960px; font-size: 14px; font-family: verdana, sans-serif; color: #26D578; background-color: #000000; margin-left: auto; margin-right: auto; margin-top: 16px; } Hello, I am having a problem with a client's site that I am sure is a CSS wrapper issue. It's happening in IE 7 for me - that is the version I have. It displays fine in Firefox, Opera & Netscape. I would give the link but am not allowed as a new user so I will describe what is happening. When viewing with IE the header starts 1/2 way down the page and the top of the page displays only the body background. If you refresh a few times "most of the time" it will right itself. Here is the CSS code I used: body { background: #240000 url(images/bg3.jpg) repeat-y center top; margin: 0; padding: 0; color: #CC9933; } #Wrapper { background:#240000 url(images/lbg.jpg) no-repeat scroll center top; height:399px; margin:0 auto; width:100%; } Admittedly I do not use CSS in it's pure form. My pages are still table-based layouts and not entirely W3C compliant. I am doing my best to learn how to ditch the tables but in the meantime I still have sites to complete and old habits die hard. I only design as a sideline and for a niche market. So I don't mean to offend any of you who are doing it the right way. This is the first time I have attempted a double background using the wrapper so any help is greatly appreciated. Thank you so much for your time! K Iv got my boxes sorted!!! but im quite newbie to CSS layout and stuff... so i want to put two boxes in side my container box side by side. i decided to use float... but they float outside my container box, which i suppose is what they are supposed to do. This is what im trying to achieve. Code: ---------------------------------------------------- | --------------------- --------------------- | | | | | | | | | | | | | | | Float Left | | Float right | | | | | | | | | | | | | | | --------------------- --------------------- | ---------------------------------------------------- sure i read an article on this somewhere but cant remember where, the problem is this Code: <div class="floated and cleared right"> stuff </div> <div class="fixed width" > <img class="floated left"> lots of text <div> related to my previous layout post. the problem is that the img (infact any floated element, cleared or not) falls below the right floated div! (red box in attatched gif) if i float and clear the first div left then the img is in the correct place within it but the div itseld drops below the right floated div help! Hello guys, I know this is asked several time, but this case is different and can't find a working solution. I'm creating a navbar using ul lists with items as images, and want to center it. I'm using the blueprint css framework, and the list items contains images instead of text. Here's the HTML code : Code: <body> <div class="container"> <div id="header" class="span-24"> <div id="header_wrapper"> <ul> <li><img src="images/nav_03.png" /></li> <li class="selected"><a href="#"><img src="images/nav_04.png" /></a></li> <li><a href="#"><img src="images/nav_05.png" /></a></li> <li><a href="#"><img src="images/nav_06.png" /></a></li> <li><a href="#"><img src="images/nav_07.png" /></a></li> <li><img src="images/nav_08.png" /></li> </ul> </div> </div><!--End Header--> </div> </body> Here's the CSS code : Code: #header{ padding-top:53px; border:#F00 solid 1px } #header_wrapper ul { text-align: center; } #header_wrapper ul li { display: inline; } I tried many code configurations but can't get it to work! a live preview is available here I tried to use height:auto, and put it into the main container, then I put it in the div that is floated. Nothing works in firefox for me. Ive tried searching on google but I cant find anything that works. Basically, its not just an issue with floats, in general, what is the correct way to set divs, to auto expand to cover what is inside and that works in IE, Firefox and safari, is there a way to ? Thanks in advanced. Hello i would like to know if there is any hacks or tips to resolve problem in IE6's rendering of Floated Boxes? It seems IE6 add extra padding or margin to some floated element, specially those near the borders of container... How do i get around this? heys all, im having an issue with text that is variable length. i want to float something in the bottom right corner of some text. that something which is floated should have a width of 100px and height of 100px. so for example text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text FLOATED HERE text text text text text text text text text FLOATED HERE text text text text text text text text text FLOATED HERE now the sample text above can be 1 line, or 100 lines. anyone have any ideas? i've been hammering away at this too long Thanks. Hi Guys, Ive got a serious'ish error on a site im responsible for and with it being the period between christmas and new years I cant find anyone to help me. So im coming asking for help with an IE6 error which is occuring on http://social.eyeforpharma.com/ It appears fine in every browser apart from IE6. IE7, FF, Safari etc work fine. With no decent debug tools for IE6 available im stuck. Help REALLY appreciated. Kevin. Edit - The error gets worse when you go to view an article. Hatchetradio.com/radio/ if you check this page it's fine in firefox if you check this page in I.E. the tab on the left hand side actually sits on top of the layout. I'm trying to get it to fit snug. I'm not sure why this is happening. hatchetradio.com/radio/wp-content/themes/reborn/style.css that's the css im using Having one last problem before the site goes beta live... I have rounded divs, and inside is a floated left menu element. If something in the menu expands the round corners pop out of place rather then shift down. Im not sure what to chage. The site is: adventurevalley.ca/jason/programs/prgSwim.cfm If you mouse over the birthday parties link you will see what I mean (IE7 issue). Thanks a mill! I have a section of 3 divs, 1 floated to the left, one to the right and one in the middle. IE 7 & Firefox are fine however in IE 6 it seems to display the left and right columns as a block pushing the middle column down to the bottom. see screenshot, the image is the middle div while the white side parts are the left and right columns. My code is as follows: CSS Code: Original - CSS Code #headerLeft { float: left; background-image: url('/media/images/040708_05.jpg'); background-repeat: no-repeat; width: 20px; height: 323px; } #headerRight { float: right; background-image: url('/media/images/040708_07.jpg'); background-repeat: no-repeat; width: 20px; height: 323px; } #flashMovie { background-color: #FFFFFF; margin-left: 20px; margin-right: 20px; width: 730px; }
hello. i am making a small, rough bar graph on the left side of my page. when i try it, the bar ends up going to a new line. what i'd like to do is have a colored div fill up 80% or 100% of the rest of the space to the right of the key. here is the code: Code: <div class="bar_graph"> <div class="key">signed: 8,000</div> <div class="bar signed" style="width: 80%"> </div> </div> ... .signatures { margin-top: 20px; } .signatures .bar_graph { overflow: auto; margin-top: 2px; } .signatures .key { float: left; font-size: 8px; text-align: right; width: 40px; } .signatures .bar { float: left; height: 17px; } .signatures .signed { background: #f3b400; } .signatures .goal { width: 100%; background: #e58728; } I seem to have an issue with the float parameter in Firefox. If you look at the following URL in IE, it should display fine, but in firefox the container doesn't expand to hold the div's within, as they're floated. I've seen other people use floats just fine in firefox, but it doesnt' seem to work for me.. http://www.arestaenterprise.com/enf/ Any help is appreciated Thanks! This page works fine in Firefox, but in IE, the float makes the content move off the page to the left. I figured out that without a background-color applied to the .textBox style (which is the DIV that contains the text and image I am floating) it works. However, I really would like the .textBox to have a background color. Anybody knows what to do? Here is the page: http://www.jbbdesign.com/wip/index4.html many thanks, Julia Heys, I have the following code: <html> <head></head> <body> <div style="width: 100px; height: 100px; border: 1px solid red;"> <div style="width: 200px; border: 1px solid green; float: left;">-</div> </div> </body> </html> In FF and IE7 it works the way I'm desiring; specifically, the child div (width: 200px is contained inside a box, however it breaks outside of it due to the width. ||||||||| ||||||||| |||||||||||| |||||||||||| ||||||||| ||||||||| That's how it should look; but I can't replicate it in IE6. Any ideas? Thanks In this header www.johnschureman.com I have an image, an h1 and a subtitle div. Code: <div id="header"> <img src="../images/jschu-crop150h.jpg"> <h1><a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('name'); ?>" >:<?php bloginfo('name'); ?></a></h1> <div id="subtitle"> <!-- Here's the tagline --> <?php bloginfo('description'); ?> </div> </div> I cannot figure out in my css how to make the subtitle appear below the h1. Code: #header { margin:0; padding:0; height:170px; padding: 0px; margin-top: 3px; /* padding-top:110px; padding-bottom:10px; padding-right:20px; padding-left:5px;*/ border-bottom: 1px solid #bab1b1; background: #404040; } #header img { float:left; display:inline; margin: 0 auto; padding: 10px 10px; border:none; } #header h1{ display: inline; float:right; padding:0px; margin: 0px; padding-top:100px; margin-bottom:3px; margin-right: 5px; font-size: 2.4em; letter-spacing:0.1em; } #subtitle { text-align:right; font-family:"Century Gothic", "Lucida Grande", "Lucida Sans Unicode", Verdana, Helvetica, Arial, sans-serif; margin-bottom:3px; margin-right: 5px; font-size: 0.9em; text-transform:uppercase; color:#bbb; } Hope this is enough info. I've been playing with clear, position, etc. Help? Thanks in advance. - Willi Ok, I have been pulling my hair out trying to figure out a workaround. I then have been searching the web for answers, but can't get any of the solutions to work in this case. Here is a stripped down version of the code: CSS: Code: ul { list-style: none; } li.leftform { clear: left; float: left; text-align: right; width: 121px; padding-right: 10px; font-size: 12px; font-family: Tahoma; color: #000000; line-height: 40px; } li input { width: 243px; height: 18px; line-height: 18px; margin: 0; margin-right: 3px; } li.middleform { float: left; width: 243px; padding:8px 0; padding-right: 10px; line-height: 18px; min-height: 24px; } li.rightform { float: right; width: 168px; padding-top: 10px; padding-right: 25px; line-height: 11px; } HTML: 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" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>IE Test</title> <link href="css/default.css" rel="stylesheet" type="text/css" /> </head> <body> <fieldset> <legend>Personal Information</legend> <ul> <li class="leftform"> <label for="FirstName">* First Name</label> </li> <li class="middleform"> <input name="FirstName" type="text" maxlength="20" id="FirstName" /> </li> <li class="leftform"> <label for="LastName">* Last Name</label> </li> <li class="middleform"> <input name="LastName" type="text" maxlength="30" id="LastName" /> </li> <li class="leftform"> <label for="Phone">Phone Number</label> </li> <li class="middleform"> <input name="Phone" type="text" maxlength="30" id="Phone" /> </li> <li class="rightform"> Saving a phone number helps us contact you if there's a problem. </li> <li class="leftform"> </li> <li class="middleform"> <a href="">Add a phone number</a> </li> <li class="rightform"> <a href="">Cancel</a> | <a href="">Save</a> </li> </ul> </fieldset> </body> </html> It displays fine in IE8, Firefox 2+, Safari, Google Chrome, Opera... the problem, as usual is IE6 and IE7. For some reason the clear: left works on the first element, but an element after goes as if there was never a clear before it. The HTML is like this for a reason, I know you can't see it now because I stripped everything out of it. Any help on a quick fix (don't mind if it's dirty ) Thanks! Hey all, I am just starting to develop a new site for my web design company, though i'm doing it in mac os x env using camino, so to my horror, when i finally got around to checking it in IE, I discovered that everything was horribly wrong. All of the div's that were supposed to be floated left are now overlapping the right float. I've read a few articles which all suggest different things, i.e. putting 'display: inline' in all the float styles. That didn't work. I don't have the time to figure it all out though I'm sure it's a simpleish solution. I'd really appreciate the help. Pete Please look at this page - http://www.eagletransmission.net/testimonials.asp In IE7 I have the main navigation alignment as I want it to be. BUt in Firefox the links do not align correctly. For example please look at the link for Affiliates. In Firefox it is pushed to the right instead of centered where it should be. Thanks. |