CSS - Firefox Layout Correct, Ie No.
Well, I'm redesigning my site because the current php management system was thrown together in a hurry just to get it up there. Now I've got time to redo it and I want to do it right. It's a webcomic site.
Currently, the site has an XML layout that serves XHTML after a serverside transformation. What I want to do is lay the site out now so I can define my xsl. The basic "gist" of the situation is, i want it to be as accessible as possible(even though blind people may not be able to see the images, they deserve to surf my website.). With that, I want my content to show up before my link area, so they can easily get to the content without listening to a long list of links first. So what I've done in firefox was repositioned the div tags that held the content above the div section that held the link boxes. That's fine and dandy, where's my point? I still want the linkboxes to appear on the lefthand side of the page and the content on the right. In firefox, I used float:right;margin-right:5%; for the content and float:left on the link boxes. It works fine in firefox. The boxes appear on the left and content on the right. However, in IE the content appears on the right, but the link boxes appear on the left of the next line. Here is relelvant code: html Code: Original - 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"> <head> <title>AdrienComix</title> <style type="text/css"> #body{ margin:0; } .header{ margin-bottom:10px; width:100%; height:15%; color:#000000; background-color:#00BBFF; background:url(http://www.adriencomix.com/res/head.jpg); border:1px dashed; text-align:center; font-size:20pt; } .box{ border:1px dashed; margin-bottom:30px; margin-left:2px; padding-left:5px; width:100%; background-color:#00BBFF; color:#000000; } .left{ width:15%; height:85%; float:left; } .content{ width:74.6%; height:100%; margin-left:5%; float:right; padding-right:5%; } .comic{ text-align:center; padding-top:15px; padding-bottom:15px; } .emp{ text-align:center; padding-top:20px; font-size:150%; font-weight:bold; } </style> </head> <body id="body"> <div class="header"><p>AdrienComix</p></div> <div class="content"> <div class="emp">Happy New Year!</div> <div class="comic"><img src="http://adriencomix.com/res/comics/01012006.JPG" alt="Happy New Year!"/></div> <div class="comments">Happy New Year! It's 2006 now. In a few short days, school starts back up.</div> <div class="copyright">Copyright 2005-2006 Adrien J. Howard of Underscore, Inc. Some images are property of Sega as well as SQUARE ENIX.</div> </div> <div class="left"> <div class="box"> <center><h3>Links</h3></center><br/> <a href="http://www.sluggy.com">Sluggy Freelance</a><br/> <a href="http://www.nuklearpower.com">8-bit Theater</a><br/> <a href="http://www.slackware.com">Slackware Linux</a><br/> <a href="http://www.gnu.org">GNU</a><br/> <a href="http://www.kernel.org">Linux Kernel</a><br/> <a href="http://www.google.com">Google</a> </div> <div class="box"> <center><h3>Archive</h3></center><br/> <a href="http://www.adriencomix.com/index.php?comic=10">#10</a><br/> <a href="http://www.adriencomix.com/index.php?comic=9">#9</a><br/> <a href="http://www.adriencomix.com/index.php?comic=8">#8</a><br/> <a href="http://www.adriencomix.com/index.php?comic=7">#7</a><br/> <a href="http://www.adriencomix.com/index.php?comic=6">#6</a><br/> <a href="http://www.adriencomix.com/index.php?comic=5">#5</a><br/> <a href="http://www.adriencomix.com/index.php?comic=4">#4</a><br/> <a href="http://www.adriencomix.com/index.php?comic=3">#3</a><br/> <a href="http://www.adriencomix.com/index.php?comic=2">#2</a><br/> <a href="http://www.adriencomix.com/index.php?comic=1">#1</a><br/> </div> </div> </body> </html> <!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"> <head> <title>AdrienComix</title> <style type="text/css"> #body{ margin:0; } .header{ margin-bottom:10px; width:100%; height:15%; color:#000000; background-color:#00BBFF; background:url(http://www.adriencomix.com/res/head.jpg); border:1px dashed; text-align:center; font-size:20pt; } .box{ border:1px dashed; margin-bottom:30px; margin-left:2px; padding-left:5px; width:100%; background-color:#00BBFF; color:#000000; } .left{ width:15%; height:85%; float:left; } .content{ width:74.6%; height:100%; margin-left:5%; float:right; padding-right:5%; } .comic{ text-align:center; padding-top:15px; padding-bottom:15px; } .emp{ text-align:center; padding-top:20px; font-size:150%; font-weight:bold; } </style> </head> <body id="body"> <div class="header"><p>AdrienComix</p></div> <div class="content"> <div class="emp">Happy New Year!</div> <div class="comic"><img src="http://adriencomix.com/res/comics/01012006.JPG" alt="Happy New Year!"/></div> <div class="comments">Happy New Year! It's 2006 now. In a few short days, school starts back up.</div> <div class="copyright">Copyright 2005-2006 Adrien J. Howard of Underscore, Inc. Some images are property of Sega as well as SQUARE ENIX.</div> </div> <div class="left"> <div class="box"> <center><h3>Links</h3></center><br/> <a href="http://www.sluggy.com">Sluggy Freelance</a><br/> <a href="http://www.nuklearpower.com">8-bit Theater</a><br/> <a href="http://www.slackware.com">Slackware Linux</a><br/> <a href="http://www.gnu.org">GNU</a><br/> <a href="http://www.kernel.org">Linux Kernel</a><br/> <a href="http://www.google.com">Google</a> </div> <div class="box"> <center><h3>Archive</h3></center><br/> <a href="http://www.adriencomix.com/index.php?comic=10">#10</a><br/> <a href="http://www.adriencomix.com/index.php?comic=9">#9</a><br/> <a href="http://www.adriencomix.com/index.php?comic=8">#8</a><br/> <a href="http://www.adriencomix.com/index.php?comic=7">#7</a><br/> <a href="http://www.adriencomix.com/index.php?comic=6">#6</a><br/> <a href="http://www.adriencomix.com/index.php?comic=5">#5</a><br/> <a href="http://www.adriencomix.com/index.php?comic=4">#4</a><br/> <a href="http://www.adriencomix.com/index.php?comic=3">#3</a><br/> <a href="http://www.adriencomix.com/index.php?comic=2">#2</a><br/> <a href="http://www.adriencomix.com/index.php?comic=1">#1</a><br/> </div> </div> </body> </html> Is there any way that I can make it appear on the same line in IE without breaking the layout in firefox and keeping the page accessible? Similar Tutorialsok i have a 2 column layout, nothing special but i finally looked at it in IE and the left colum doesn't start until the bottom of the right column. i'm almost sure i'm missing something thats causing this, so i'm askin for a lil assistance. my page: URL css: URL The website Quote: downloadwarez.org CSS Quote: /* default styles */ body { padding: 5px 0 0 0; margin: 0; font: .7em Tahoma, Arial, sans-serif; line-height: 1.7em; background: #fff url(images/bg.gif) repeat-x; color: #454545; } a { color: #2F637A; background: inherit; } a:hover { color: #808080; background: inherit; } p { margin: 0 0 5px 0; } h1 { font: bold 2.2em Arial, Sans-Serif; padding: 8px 0 0 0; margin: 0; letter-spacing: -1px; } h2 { margin: 0; padding: 0; font: bold 1.8em Arial, Sans-Serif; letter-spacing: -1px; } h1 a, h2 a { color: #000; background: inherit; text-decoration: none; } ul { margin: 0; padding : 0; list-style : none; } img { border: 0; } /* layout */ #content { margin: 10px auto; width: 960px; } #logo { margin: 0 0 10px 0; } #slogan { font-size: 0.9em; margin: 0 0 10px 2px; padding: 0; color: #808080; background: #fff; } #top_info { line-height: 27px; float: right; color: #808080; background: #fff; margin: 12px 5px 7px 0; text-align: right; height: 74px; } /* round blue login button */ #loginbutton a { text-decoration: none; width: 24px; padding: 7px 12px; margin: 0 0 0 8px; height: 28px; background: #fff url(images/lb.gif) no-repeat; color: #000; } #loginbutton a:hover{ background: #fff url(images/lbhover.gif) no-repeat; color: #000;} /* main horizontal menu */ #tablist{ padding: 3px 0; margin: 0; float: left; } #tablist li{ list-style: none; display: inline; margin: 0; } #tablist li a{ text-decoration: none; padding: 4px 22px; margin-right: 2px; background: #808080 url(images/corner.gif) no-repeat top right; font-weight: bold; color: #fff; } #tablist li a:hover{ background: #6495AB url(images/corner.gif) no-repeat top right; color: #fff; } #tablist li a.current{ background: #9FC7D8 url(images/corner.gif) no-repeat top right; color: #2F637A; padding: 6px 22px; } #tablist .key { text-decoration: none; } /* main menu topics */ #topics { clear: left; float: left; width: 640px; background: #B0D0DC url(images/topicsbg.gif) repeat-x left bottom; padding: 8px 5px; margin: 0 0 5px 0; color: #fff; height: 59px; } #topics li a { background-image: url(images/bullet.gif); background-repeat: no-repeat; background-position: center left; padding: 0 0 0 12px; } /* main menu search */ #search { float: right; text-align: right; background: #fff url(images/searchbg.gif) no-repeat; color: #000; padding: 32px 20px 12px 20px; min-height: 32px; /* FF height */ height: 25px; /* IE height */ width: 270px; } /* search form styling */ form, form p { margin: 0; padding: 0; line-height: 25px; } .search { width: 170px; border: 1px solid #357994; background: #fff; color: #478F36; padding: 4px; margin: 0; font-weight: bold; font-size: 1.3em; } .button { padding: 4px; font: bold 1em Arial, Sans-Serif; } /* left side */ #left { float: left; width: 635px; margin: 0 0 10px 0; } .subheader { margin: 0 0 10px 0; padding: 8px; background: #f4f4f4 url(images/bgshade.gif) repeat-x; color: #808080; border-bottom: 1px solid #ccc; } .left_articles { margin: 0px 0 10px 0; background: #fff url(images/bgshade.gif) repeat-x; color: #454545; padding: 15px 15px 5px 10px; } .date { font-size: .9em; padding: 0 0 0 12px; background: #fff url(images/news.gif) no-repeat center left; color: #808080; } .bigimage { float: left; clear: left; border: 1px solid #ccc; background: #eee; color: #000; width: 200px; height: 150px; margin: 0 15px 10px 0; } .left_box { background: #f4f4f4; color: #808080; border-top: 1px dotted #ccc; border-bottom: 1px dotted #ccc; padding: 15px; margin: 0 0 15px 0; } .thirds { float: left; width: 186px; padding: 0 10px 0 15px; } /* right side */ #right { float: right; width: 310px; margin: 0 0 10px 0; } .right_articles { border: 1px solid #ccc; padding: 8px; margin: 0 0 10px 0; background: #eee; color: #454545; } .image { float: left; margin: 0 9px 3px 0; } .notes { border-top: 1px dotted #ccc; border-bottom: 1px dotted #ccc; padding: 17px 10px 17px 80px; margin: 0 0 10px 0; background: #fff url(images/notes.gif) no-repeat center left; color: #454545; } /* footer */ #footer { clear: both; color: #808080; background: #FFF; padding: 10px 15px; border-top: 1px solid #ccc; } #footer .right { float: right; } The page bar should be below the software table, like it is displayed in FireFox. But it shows wrong in Internet Explorer and Opera. The code looks ok, so i think it must be CSS. Can anyone help Hi, I'm having a problem with a layout in Firefox. http://26990.vws.magma.ca/press-room.cfm As you can see the content area is all shifted down and lines up with a block in the menu. It doesn't do this in IE and I need it to work the same way in Firefox. Can anyone offer some suggestions as to what I can change to get it to work? Ok I have been trying to read and search and fiddle - but im getting to my wits end here. Trying a 2 column layout from scratch and in IE it views fine but firefox is not so fine. www.chroma-zone.net css: www.chroma-zone.net/new.css Any idea's? -Thanks I have been pulling my hair out on this one because for the life of me I cannot make it work. Here is my page: www.nova-dataonline.com Notice that in IE, the "Featured Products" section displays nicely and when you mouseover "Cisco Systems" the filler text displays well within the grey box. The entire "Featured Products" section apart from the manufacturer logos, is one image and the mouseover text is padded to appear correctly within the grey box which is part of the image. Now notice in firefox that the entire layout breaks. The div displays much larger than I intended and the padded text does not display correctly. I have found that if I remove the padding from the div containing the background image, the div displays fine, but this leaves me without a way to style the content of the div in the correct place. So it appears that firefox is expanding the div based on the padding here is the relevant markup: PHP Code: <div class="featured" id="feat_1" onmouseover="toggleDiv('feat_1',1)" onmouseout="toggleDiv('feat_1',0)"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc. </div> and css: Code: .featured{ visibility:visible; width:410px; height:350px; position:absolute; top:250px; left:340px; border:1px solid #999999; border-left:none; background-repeat:no-repeat; background-position:center; background-image:url(images/message/feat.jpg); font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; font-style:normal; padding:102px 27px 29px 29px; } #feat_1{visibility:hidden;} and javascript (if it is even relevant to the problem): PHP Code: <script language="javascript" type="text/javascript"> <!-- function toggleDiv(id,flag) { if (flag == "1") { if (document.layers) document.layers[''+id+''].visibility = "show" else if (document.all) document.all[''+id+''].style.visibility = "visible" else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "visible" } if (flag == "0") { if (document.layers) document.layers[''+id+''].visibility = "hide" else if (document.all) document.all[''+id+''].style.visibility = "hidden" else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "hidden" } } --> </script> any idea? Ive got a simple layout that is centered on a page, and it works fine in Firefox. The problem comes in loading it in IE, where everything works fine but the menu section isnt centered with the rest of the page. Code: body { margin:0; padding:0; background: url("bg.gif") top center; } #title { position:relative; top:4px; width:629px; height:130px; padding:0; display: table-cell; background-color: #EDEDED; } #banner { position:relative; top:8px; width:494px; height:84px; padding:0; display: table-cell; background: url("banner.gif") top center; } #menublock { position:absolute; top:99px; left:0px; width:454px; height:31px; padding:0; display: table-cell; background: url("menu1.gif") top left; } #menucontact { position:absolute; top:99px; left:454px; width:60px; height:31px; padding:0; } #menucontact a { display:block; width:60px; height:31px; background: url("menucontact.gif") 0 0 no-repeat; } #menucontact a:hover { background-position: -60px 0; } #menuprofile { position:absolute; top:99px; left:514px; width:61px; height:31px; padding:0; } #menuprofile a { display:block; width:61px; height:31px; background: url("menuprofile.gif") 0 0 no-repeat; } #menuprofile a:hover { background-position: -61px 0; } #menudesign { position:absolute; top:99px; left:575px; width:54px; height:31px; padding:0; } #menudesign a { display:block; width:54px; height:31px; background: url("menudesign.gif") 0 0 no-repeat; } #menudesign a:hover { background-position: -54px 0; } There is all my CSS code, and here are the divs in the html file: Code: <div id="title"> <div id="banner"></div> <div id="menublock"></div> <div id="menucontact"><a href="contact.htm"></a></div> <div id="menuprofile"><a href="profile.htm"></a></div> <div id="menudesign"><a href="design.htm"></a></div> </div> http://uweb.txstate.edu/~CW1182/new/ Theres a link to the page, so you can see it happening in both browsers. Also, for some reason, in IE, when the rollover buttons are used, it reloads the image each time the mouse hits it. It shouldnt need to since I just used one image, so whats going on? Sorry this is such a long and complex post, but I figured someone here could help me get this working. hi, I wonder if anyone can help with my layout problems in Firefox, i have tried to have vertically alignment on the whole page, its looks ok in IE but not FF. Im fairly new to CSS so if anyone can spot what i have done wrong that would be great link to layout here thanks Hello, I have this layout in CSS for my website www.websitemeester.nl , in Firefox it looks perfect, but IE ****s the whole thing up. Who knows why that is? How can I make it a lil better for IE? Thx, Jules #top { margin: 0px 0px 0px 0px; padding: 10px; border-bottom: 0px solid black; background: #efefef; height: 100px; voice-family: "\"}\""; voice-family:inherit; height: 40px; } html>body #top { height: 40px; } #left { position: absolute; top: 60px; left: 0px; margin: 0px; padding: 10px; border-right: 0px dotted black; border-bottom: 5px solid yellow; background-color: orange; width: 170px; voice-family: "\"}\""; voice-family:inherit; width: 150px; } html>body #left { width: 150px; } #middle { padding: 10px; border-top: 5px solid orange; background: white; margin: 0px 150px 0px 170px; } #right { position: absolute; top: 60px; right: 0px; margin: 0px; padding: 10px; border-left: 5px solid orange; border-bottom: 15px solid orange; background: #efefef; width: 150px; voice-family: "\"}\""; voice-family:inherit; width: 130px; } html>body #right { width: 130px; } Hi Guys, I'm having a bit of an issue with the layout of my new site. I have got it working in FF3, ie 6 and 7 using conditional comments, but now I have a problem where FF2 is giving me the same problems as what ie was giving me. As far as I know you can't use conditional comments to differentiate between FF 2 and 3. I wish I could narrow down the problem further, but I am just completely lost. Please could you guys have a look at http://www.action-figure-world.com/index.html and tell me what I could do to fix the problem. Thanks a ton! I developed a site and finally thought about opening it in IE... everything lays out perfectly in firefox and looks great. i opened it in IE and my sidebar that should be on the right, is showing up under the main content area vs on the right of it.. any suggestions? you can see the site in development he rurdesign dot com / OffRoadSolutions/ I'm trying to make a 2 column layout, using multiple divs, but no wrapper divs. I cannot use wrappers around either column. This works fine in IE7, but in FireFox the fisrt right column element isn't top aligned; it starts on the same line as the last left column element. Does anyone have any ideas? Thanks! .left { float:left; clear:left; margin-left:25px; width:605px; text-align:left; } .right { float:right; clear:right; margin-right:25px; width:285px; } <div id="one" class="left">left</div> <div id="two" class="left">left</div> <div id="three" class="right">right</div> <div id="four" class="right">right</div> <div id="five" class="right">right</div> my goal is this: left___right left___right ______right Hi COuld someone take a look at http://www.sussexfind.co.uk/test/ if you view it in Firefox the layout breaks and I don't know why. If someone could explain why i would be very grateful as I need to get this done soon!! Thanks I'm a pretty new CSS coder, and primarily use Firefox so I designed my website based on that browser, and now when I try opening it in IE it looks completely wrong and different. Does it have to do with my margins? I have no idea--if someone can just point me in the right direction to even figure out where the problem lies (and even better if you know how to fix it!) that would be fabulous. The website is www.yarniapdx.com and it looks exactly how I want it to in Firefox, but in IE it's a mess! Thank you so much in advance, -lindsey I created what I thought was a simple layout using css, but I have some odd space above my layout in Firefox that I can't get rid of. The background peeks through above the text at the top so it's easy to see: http://sundaysermons.heikou.net/brickaday/ As you can see, the layout should be flush against the top of the browser. I renders correctly in IE but not in Firefox. I checked my code and both the html and css validate so I'm assuming there's something wrong with my css: Code: body { margin: 0px; padding: 0px; font-family: Arial, Verdana, sans-serif; font-size:12px; color: #000000; background: #FFFFFF url(images/bg.gif) repeat-y left; } #heading { height: 44px; } #heading h1 { font: bold 18px "Trebuchet MS", Tahoma, Arial, "Microsoft Sans Serif"; color: #E77F04; text-align: left; } #banner { height: 73px; background-color: #E29722; border-top: 1px solid #9D3E1F; border-bottom: 1px solid #9D3E1F; } #tagline{ height: 17px; background-color: #F0DCA2; border-bottom: 1px solid #9D3E1F; } #leftcontent{ width: 210px; background-color: #FCF1D0; padding-top: 20px; } #leftcontent ul { margin-left:0; padding-left:0; display:inline; } #leftcontent ul li { margin-left: 0; list-style: none; padding-left:10px; line-height:26px; } #rightcontent{ width: 470px; float:left; } Any help you guys could give me would be greatly appreciated. Thanks. Hi There, For the last year I've been using a standard CSS layout with 2 columns held within a container. The problem is (and I know this is certainly a common problem) that the left column MUST be longer than the right column or else it flows over and following DIV elements in Firefox. Internet Explorer has no problems with the right column being longer than the left. An example of this is here (to be viewed in Firefox): hosteltrail.com/colombia/example/ Thus far, I've had to manually increase the length of the left column in the instances when it is shorter than the right by simply adding an empty div box. Below is the setup for the page container. #columncontainer { position:relative; margin:auto;width:750px; } #rightcolumn { float:right;width:355px; } #leftcolumn { width:355px; } Does anyone know of a solution to the firefox problem other than adding a div box as a fix? Dear All, I have a problem with viewing my page in firefox. The Tree Div moves to the right and pushes the other divs down. Please check this temporary URL page. It works fine with IE 7 but FF it creates problems. http://82.147.208.5/MapsoluteTest/Default.aspx The css file is given below Code: #hdr { height:80px; padding-top : 5px; padding-left : 5px; background:#FFFFFF; border-color: #EEEEEE; border-width : 1px; color: #333333; text-align:center; } #body_block { position:relative; background: white; color: #333333; height:500px; padding : 200px; } .TopBar { height:84px; padding-top : 5px; padding-left : 5px; background:#C9E2FF; border-bottom-color:#EEEEEE; border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom-width: 1px; } .TreePanel { float:left; width:220px; height:700px; border-color : Navy; background-color:#FFFFFF; padding : 10px; overflow:scroll; } .mapView { height:600px; float:left; text-align :center; padding-left:150px; padding-top: 40px; } .mapView1 { height:600px; float:left; text-align :center; padding-left:60px; padding-top: 40px; } .mapView2 { height:470px; float:left; text-align :center; padding-left:150px; padding-top: 40px; } .gridView { width: 950px; height:200px; float:left; left:25px; text-align:center; overflow: auto; padding-top: 10px; border : solid 1px black; } .roundedPanel { text-align:center; padding-top:5px; padding-bottom:5px; background-color:#e4e4e4; } .brDefinition { text-align:center; width:500px; min-height : 750px; border-right : solid 1px black; float:left; padding-left:20px; padding-right:20px; } .brAssignment { text-align:center; width:757px; float:left; height : 500px; border-right : solid 1px black; border-left : solid 1px black; } .brPanel { float:left; width:220px; height:500px; border-color : Navy; background-color:#FFFFFF; padding : 10px; overflow:scroll; } .BRTreePanel { float:left; width:220px; height:500px; border-color : Navy; background-color:#FFFFFF; padding : 10px; overflow:scroll; } .BRGrid { height:300px; padding : 10px; text-align: center; border-top : solid 1px black; } #dhtmltooltip{ position: absolute; left: -300px; width: 150px; border: 1px solid black; padding: 2px; background-color: lightyellow; visibility: hidden; z-index: 100; /*Remove below line to remove shadow. Below line should always appear last within this CSS*/ filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135); } #dhtmlpointer{ position:absolute; left: -300px; z-index: 101; visibility: hidden; } #UpdateProgress1, #UpdateProgress2, #UpdateProgress3, #UpdateProgress4 { width: 300px; background-color: #FFC080; bottom: 0%; left: 0px; position: absolute; } I am not good in CSS. Please help. Thanks in advance. Regards, Noorul I have a basic layout as follows: Code: <div id="wrapper"> <div id="header"> <!--#include virtual="/siteadmin/includes/inc_header.asp" --> </div> <!-- Begin Left Column - Menu --> <div id="leftcolumn"> <!--#include virtual="/siteadmin/includes/inc_admin_menu.asp" --> </div> <!-- End Left Column - Menu --> <!-- Begin Right Column - Content --> <div id="rightcolumn" align="left"> <!--#include virtual="/siteadmin/includes/inc_menu_page.asp" --> </div> <!-- End Right Column - Content --> <!-- Begin Footer --> <div id="footer"> <!--#include virtual="/siteadmin/includes/inc_footer.asp" --> </div> <!-- End Footer --> </div> Which uses the following css Code: body { margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; font-family: "trebuchet ms", Arial, Helvetica, sans-serif; background-color:#FFFFFF; } #wrapper { margin: 0px; width: 100%; padding: 0px; } #header { color: #333; width: 100%; float: left; border: 0px solid #ccc; height: 100px; background-image: url('/media/images/headerBackground.gif'); } #leftcolumn { color: #333; border: 0px solid #ccc; background: White; padding: 10px; width: 195px; float: left; padding-left: 10px; padding-right: 10px; } #rightcolumn { float: left; color: #333; border: 0px solid #ccc; background: White; padding: 10px; height: 100%; display: inline; padding-left: 10px; padding-right: 20px; } #footer { width: 100%; height:27px; clear: both; color: #333; border: 0px solid #ccc; background-image: url('/media/images/footer_bg.jpg'); background-repeat:repeat-x; } Anyway the problem is, IE will display as it needs to while firefox will put the right colum down below the left column, header and footer are in the correct spot. Am I doing something wrong here? (very new to layout css) I've been working with this issue for the better part of the day, and I think whatever the issue is, is one I'm not seeing because I've been doing just that. So I'm hoping to get a little guidance from those of you who're far superior to me in the world of CSS. On this site ianrobinett.com/designwork/SAMPO/Sitev1/ I've been working on, in Mozilla, the fullwidth div I put below my other divs (in the main body content area), is appearing off to the right of the Twitter widget. In Chrome and IE, funny enough, it's right, and it's Mozilla having the fit. I honestly figure this is something small, and something I'm just missing because I've been looking at the code all day. |