CSS - My Page Is Divided Into 2 Columns, One Fixed, And One Auto - Doesn't Work?
Hi,
My site is divided into 2 columns: The left column is 760px in width. I want the right column to take up the remaining space of the screen - no matter what resolution i'm on. Here's the page: http://www.3003online.com/demos/ecoceylon/ As you can see, the left column is 760px wide, but the right column (which is currently a simple background black colour) isn't filling up the rest of the space There's even a height problem - On IE, the width of that right column is 100% on the backgorund colour. But on Firefox, it isnt... Here's the code: Code: <div id="container"> <div id="logo"> <div class="hide">test</div> </div> <div class="spacer"> </div> </div> <div id="bgcolor_area"> </div> And the CSS: Code: body { color:#FFFFFF ; font-family: Trebuchet MS, Arial ; font-size:9pt ; font-weight:normal; line-height: 18px; background-color: #FFFFFF; margin:0px; width:100%; height:100%; } #bgcolor_area { background: #000000; height: 100%; width: auto; float: left; } #container { text-align: left; width: 760px; float: left; } #logo { height: 89px; width: 760px; background: url(../images/0_top.jpg) no-repeat; margin: 0; } Does anyone know what I'm doing wrong? Thanks a lot! Similar TutorialsHi... Not sure how to title this message, but here's the problem: I've got a site that has three columns of variable length text. Each column must have a 2px left border. No problem so far. Under each column of text, I must align a block of links. These blocks must align along the top link. The borders must continue from the top of the text to the bottom of the links. Does this make sense? The problem I have is the border is only solid on the column with the longest amount of text and breaks on the shorter ones. I can get this to work by setting a fixed height for the text, but that doesn't seem like a great solution as it would have to be changed as the text length changes. my CSS: Code: .box {border-left: 2px #CCCCCC solid; width: 254px; float: left; padding-left: 10px; padding-right: 10px;} .txt {font: verdana; font-size: 12px; color: #000000;} .linkscontainer {width: 853px; clear: both;} .linkbox1 {bottom: 0px; position: relative; border-left: 2px #CCCCCC solid; padding-left: 10px; padding-right: 10px; float: left; width: 254px;} .linkbox {bottom: 0px; position: relative; border-left: 2px #CCCCCC solid; padding-left: 10px; padding-right: 10px; float: left; width: 254px;} my html: Code: <html> <head> <link href="test.css" rel="stylesheet" type="text/css"> </head> <body> <div class="box"><div class="txt>">aldfjlaf lj ladfjklafj l flj adlj l <br /> <p>afljlaf lj fljf lf ljf lj dflj asdflj alf <br /> afljlaf lj fljf lf ljf lj dflj asdflj alfafljlaf lj fljf lf ljf lj dflj asdflj alfafljlaf lj fljf lf ljf lj dflj asdflj alfafljlaf lj fljf lf ljf lj dflj asdflj alf</p> </div> </div> <div class="box"><div class="txt>">aldfjlaf lj ladfjklafj l flj adlj l <br /> <p>afljlaf lj fljf lf ljf lj dflj asdflj alf <br /> afljlaf lj fljf lf ljf lj dflj asdflj alfafljlaf lj fljf lf ljf lj dflj asdflj alfafljlaf lj fljf lf ljf lj dflj asdflj alfafljlaf lj fljf lf ljf lj dflj asdflj alf</p> <p>afljlaf lj fljf lf ljf lj dflj asdflj alf <br /> afljlaf lj fljf lf ljf lj dflj asdflj alfafljlaf lj fljf lf ljf lj dflj asdflj alfafljlaf lj fljf lf ljf lj dflj asdflj alfafljlaf lj fljf lf ljf lj dflj asdflj alf</p> <p>afljlaf lj fljf lf ljf lj dflj asdflj alf <br /> afljlaf lj fljf lf ljf lj dflj asdflj alfafljlaf lj fljf lf ljf lj dflj asdflj alfafljlaf lj fljf lf ljf lj dflj asdflj alfafljlaf lj fljf lf ljf lj dflj asdflj alf</p> <p>afljlaf lj fljf lf ljf lj dflj asdflj alf <br /> afljlaf lj fljf lf ljf lj dflj asdflj alfafljlaf lj fljf lf ljf lj dflj asdflj alfafljlaf lj fljf lf ljf lj dflj asdflj alfafljlaf lj fljf lf ljf lj dflj asdflj alf</p> </div> </div> <div class="box"><div class="txt>">aldfjlaf lj ladfjklafj l flj adlj l <br /> <p>afljlaf lj fljf lf ljf lj dflj asdflj alf <br /> afljlaf lj fljf lf ljf lj dflj asdflj alfafljlaf lj fljf lf ljf lj dflj asdflj alfafljlaf lj fljf lf ljf lj dflj asdflj alfafljlaf lj fljf lf ljf lj dflj asdflj alf</p> </div> </div> <div class="linkscontainer"> <div class="linkbox1">link 1<br /> link 2<br /> link 3<br /> link 4<br /> </div> <div class="linkbox">link 1<br /> link 2<br /> link 3<br /> link 4<br /> </div> <div class="linkbox">link 1<br /> link 2<br /> link 3<br /> link 4<br /> </div> </div> </body> </html> Thanks for any help! :grimey Layout problem that works in IE but not in Firefox I have watered down the layout I intend to achieve, which is 2 columns that are dynamic, 33% and 67% of available width, and a third column that is 200 pixels. www[dot]cs[dot]lewisu[dot]edu/~ongni/usjournal/redesign/test3.htm The structure holds in IE, but totally breaks down in Firefox. Thanks in advance for the help. I have stumbled onto two issues with my layout. I have a fixed footer and I have my three columns and the problem I am having is that the content hides behind the fixed footer which is what I want. However when the content is just not enough it gets clipped behind the footer and what I'd like is to have i scroll up to the top of the footer in that situation. How would I do that in my css? The second issue is that when I have a lot of content it breaks out of the container div or at least it appears that way. I'd like it to push the columns down inside the container as needed. The css and xhtml arevalid. Here is the link: http://www.lonniebruhn.com/sitelab/ Thanks for your help LB Hello, im trying to make Fixed width 3 columns (each column have fixed width) layout 100% height with header and footer. -Well I see alot of examples around the web, but i dont see complete one and im really tired of searching, i made the Fixed width 3 comlumns layout, left and right are absolute position, and center is relative to the header -the problem is that all columns dont fill the whole height of the browser windows, the footer doesnot work good. so the whole thing is missed up, so please show 100% working example of what i need. Thanks in Advanced Samer Hello, I have been playing with this for a few days now and I am completely frustrated. The left side bar and the right side bar I need to auto stretch. I veiwed everything in several different browsers and screen resolutions. I orginally hade a body background picture and it worked perfectly except on firefox at 800x600. It was left aligned instead of centered. So.. I made the backrounds and border colors instead. Now the problem is I cannot get them to auto strech - I am very frustrated. It seems to be all messed up in IE5.5 at 800x600. Can anyone take a look and help me? Thanks in advance! If you need the html - I would be glad to provide it. Here is the css file: body { margin: 0px; padding: 0px; background: #666666 url(images/back.png) repeat-y center top; text-align: justify; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; color: #333333; } h1, h2, h3, h4, h5, h6 { font-family: Georgia, "Times New Roman", Times, serif; color: #3399FF; } a { font-weight: bold; text-decoration: none; color: #33CCFF; } a:hover { text-decoration: underline; color: #33CCFF; } /************* HEADER STUFF ************/ #header { width: 995px; height: 200px; margin: 0px auto; padding: 0px 0px; background: yellow; } #header2 { width: 995px; height: 10px; margin: 0px auto; padding: 10px 0px; background: yellow url(images/header.jpg); } #header h1 { margin: 0px; padding: 0px 0px 0px 10px; text-align: left; color: #3399FF; font-size: 3em; text-transform: uppercase; } #header h2 { margin: 0px; padding: 0px 0px 0px 20px; text-align: left; font-size: 1.5em; text-transform: uppercase; } /************* MENU ************/ #menu { width: 995px; margin: 0px auto; padding: 5px 0px 5px 0px; background-color: #000000; height: 28px; } #menu ul { margin: 0px; padding: 0px; list-style: none; text-align: center; margin-top: 12px; } #menu li { display: inline; } #menu a { padding: 5px 19px; text-transform: uppercase; text-decoration: none; font-size: 12px; font-weight: bold; color: #FFFFFF; } #menu a:hover { background-color: #333333; } /************* CONTENT ************/ #content { width: 995px; margin: 0px auto; padding: 0px 0px 0px 0px; } #content h2, #content h3, #content h4, #content h5, #content h6 { font-weight: normal; } #content p, #content ul, #content ol { line-height: 150%; } #left { float: right; width: 680px; padding: 0px 20px 40px 20px; } #right { float: left; width: 230px; padding: 0px 20px 40px 20px; color: #99CCFF; } /************* FOOTER ************/ #footer { clear: both; width: 995px; margin: 0px auto; border-top: 1px solid #666666; background: red repeat-y center top; font-size: 9px; text-align: center; padding: 2px; color: #333333; } #footer2 { clear: both; width: 995px; margin: 0px auto; border-top: 1px solid #666666; background: blue repeat-y center bottom; font-size: 9px; text-align: center; padding: 0px; color: #333333; height: auto; } I have a wrapper div 700px wide that is currently set to the following: Code: div.wrapper { width: 700px; height: auto; background-image: url(../local/images/content.gif); background-repeat: repeat; background-attachment: scroll; background-position: top left; text-align: left; padding: 0.05in; position: absolute; left: 50%; margin-left: -350px; border: 2px #000000 ridge; } It renders fine in IE, FF, and Opera. Since the height of the content varies, I am trying to accomplish a minimal fixed height of 700px OR larger if the content is longer than 700 px. Any ideas? Hi all, I'm trying to achieve the following: <div id="left">This column is of blue background, and stretches all the way to the left.</div> <div id="center"> THIS COLUMN IS FIXED WIDTH, 760px </div> <div id="right">This column is of red background, and stretches all the way to the right.</div> Hope that is self explanatory.. I've Googled all this but can only find solutions for fluid "center" columns with fixed width right/left columns. I'm trying to do the opposite. Could anyone let me know how I can do this? I've got some messy CSS that definitely needs to be corrected, I'm trying out different things so here's my 'trial& error' code: Code: #left { background-color: blue; float: left; margin: auto; position: absolute; } #center { background: #DFDFEB url(../images/body/top.jpg) no-repeat; width: 760px; margin: 0 auto; } #right { background-color: red; } Thanks in advance! Hi all, I need some help. I have implemented a fixed header on my site, but certain content is scrolling above the header while other is scrolling behind. I would like it all to scroll behind the fixed div's. Hi, I am trying to get a 2 column layout to work, but I can't seem to get it right. I have the following css: Code: body { margin: 0; padding: 0; border: 0; background: url(../../images/yellow_background.jpg); color: #000000; font: 12px Verdana, Helvetica, sans-serif; } /* Layout */ #siteDimention { text-align: left; width: 800px; height: 479px; background: url(../../images/main_background.jpg); background-repeat: no-repeat; margin-left: auto; margin-right: auto; } #mainMenu { float: left; padding-top: 170px; padding-left: 15px; } #content { width: 557px; padding-top: 100px; } #contentMiddle { background: url(../../images/content_middle.jpg); height: 550px; padding: 10px; } /* Menu */ #menu { margin-left: 0; padding-left: 0; list-style: none; } With the following layout: Code: <div id="siteDimention"> <div id="mainMenu"> <ul id="menu"> <li><img src="images/menu_thestore.jpg" width="195" height="35" border="0" alt=""></li> <li><img src="images/menu_steeltoe.jpg" width="195" height="35" border="0" alt=""></li> <li><img src="images/menu_locations.jpg" width="195" height="35" border="0" alt=""></li> <li><img src="images/menu_employment.jpg" width="195" height="37" border="0" alt=""></li> </ul> </div> <div id="content"> <p style="margin: 0px;"><img src="images/content_top.jpg" width="557" height="21" border="0" alt="" /></p> <div id="contentMiddle"> content </div> <img src="images/content_bottom.jpg" width="557" height="21" border="0" alt="" /> </div> </div> My problem is in Firefox the "content" div appears underneath the "mainMenu" div. It works in IE. Hi, there. I've created a simple tableless 3-column fixed-width layout within a 'wrapper' div#. The column displays exactly how I want it and where I want it in Firefox, Safari, Chrome... but not in IE7 - for some reason, IE7 repeats part of the content of the third column. courses.algarve-golf.co.uk/index.html courses.algarve-golf.co.uk/scripts/default.css (The site isn't yet finished, so while the CSS validates, the HTML is not completely validated as I have more content, nav-bars and so on to add.) I've double and triple-checked everything I know of, but as my CSS experience is somewhat limited, I'm hopeful that this is just the result of a known IE7 that i'm not yet aware of. Any help or advice that anyone can offer greatfully appreciated! I'm going mad with this, I tested the CSS a:hover function over FF 1.0.7 and IE6, and the style file is simple: PHP Code: h3 { margin:10px; color:#636500; font-family: Arial, Helvetica, sans-serif; font-style: normal; } p { margin:10px; color:#636500; font-family: Arial, Helvetica, sans-serif; font-style: normal; } a { text-decoration: none; } a:hover { color:#636500; } a:visited { color:#cecf9c; } a:link { color:#cecf9c; } searched through the forum but seems nobody has got this problem... I just want the link to change color, I imported the css file to my html and it worked for the first time. I clicked on the link and then use brower's "Back" button to test it again, but the hover feature is not working anymore. I think it may be affected by the a:visited style, but how do I make a:hover work all the time? Thanks for helping. Here's the page: http://ktd.sytes.net/files/index.html In Mozilla, on Windows and Linux, and Konqueror, the image of the donkey says fixed in the center of the screen. However, in IE, it scrolls on down. Not sure what I'm doing wrong here. I think it may have something to do with my layered divs. Any ideas? Here my style sheet: http://ktd.sytes.net/files/float3.css Thanks! Hi, there. I've created a simple tableless 3-column fixed-width layout within a 'wrapper' div#. The column displays exactly how I want it and where I want it in Firefox, Safari, Chrome... but not in IE7 - for some reason, IE7 repeats part of the content of the third column. courses.algarve-golf.co.uk/problem.htm courses.algarve-golf.co.uk/scripts/default.css (The site isn't yet finished, so while the CSS validates, the HTML is not completely validated as I have more content, nav-bars and so on to add.) I was told that the problem with IE is that I have a comment (necessary for the Dreamweaver Template to function) before the Doctype, which renders the page in 'quirks mode'. Removing that comment made the page display correctly, but the problem is that I need the pages to work on Dreamweaver Templates - so, fixing one problem presents another! Is there a work-around for the first issue that allows me to maintain the Template markup so that this (and many future pages) can be built on same Template? Any further help or advice that anyone can offer greatfully appreciated! I'm still fairly new with CSS. I cannot get margin: auto; to work in IE. Working fine in Mozilla. There was a brief bit where I got it to work, but I have no idea what I did, nor how to do it again...LOL(slightly sarcastic laughter). Anyway, it's making me crazy and maybe someone can help me out. I've stripped the code down to my CSS body and area div I've been setting my stuff in. Code: <html> <head> <title>Dude Work Web Page</title> <style type="text/css" media="screen"> body { background: #999; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; padding: 0; height: 100%; } #area { background: #FFFAFA; display: table; width: 776px; margin: 0 auto; border: 5px double black; height: 100%; text-align: center; } </style> </head> <body> <div id="area"> What is it that keeps this from having auto margins in IE??? </div> <!-- end area --> </body> </html> Much thanks, James (please note, i'm a noob).. What i have right now: ################ HTML: ################ <div id="aboutusimage"></div> ################ CSS: ################ #aboutusimage { width:400px; height:75px; background-image:url(/images/about.jpg); position:relative; left:189px; top: 4px; margin-bottom:30px; } ======================== What i'd like to have: ################ HTML: ################ <div id="banner" class="about"></div> ################ CSS: ################ #banner { width:400px; height:75px; position:relative; left:189px; top: 4px; margin-bottom:30px; } #banner.about { background-image:url(/images/about.jpg); } ====================== For some reason, the image disapears when i do this :\ Any advice? I'm wondering why does the padding doesn't work for the <p> tag... Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> p.pFrontPageTitle { margin: 0px; padding: 200px 0xp 200px 0px; color: #000000; font-weight: bold; font-family: verdana; font-size: 12pt; font-style: normal; background-color: #FF0000; } </style> </head> <body> <p class="pFrontPageTitle">What Our Customers Say .....</p> </body> </html> Hi, link to wesbite why doesn't the drop down menu, that works in IE6 not work in Firefox 0.8? It is pure CSS, no Javascript. OK, I know it doesn't validate and don't care too much about that. I know putting tables inside an anchor tag is frowned on but hey, it works and I didn't think it up. I thought IE was the worst when it came to CSS compliance? Any ideas how I can fix it? Thanks, John Hi guys, I've trying to achieve the following. I want to have a div element floating on the right 100px from the top and the rest of content is filled with text. PHP Code: <div>[image]</div><p>text 1</p><p>text 2</p> I could do this easily with simple float:right but then the image would at 0px from top and if I try to move it down (using margin or padding) the text wouldn't reach above it (would get cut off at the width of the image form the right) If I try to add another div with 100px height and 10px (for example) width above the image, the text overlaps over my image div Any ideas how to achieve this? Below is my full html code PHP Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> <html > <head> <title>float</title> <style type="text/css"> .content { width: 400px; background: #FFFF00; padding: 5px; } .floatright { float: right; height: 100px; border: 1px solid #000; } .offset { width: 10px; } .imgholder { width: 100px; clear: right; } </style> </head> <body> <div class="content"> <div class="floatright offset"></div> <div class="floatright imgholder"><h1>image</h1></div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ornare. Vestibulum a nulla id velit elementum imperdiet. Nam a purus. Suspendisse non enim. Nullam id sem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas aliquet varius tellus. Aliquam sed nunc eu tortor semper vulputate. Nunc risus. </p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ornare. Vestibulum a nulla id velit elementum imperdiet. Nam a purus. Suspendisse non enim. Nullam id sem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas aliquet varius tellus. Aliquam sed nunc eu tortor semper vulputate. Nunc risus. </p> </div> </body> </html> My site works fine with Opera 7 but refuses to work properly with IE6 and Firefox. There's definately a problem with how each browser renders my CSS. I for one cannot figure out what to change so that the site would work with all three browsers. That being said, would anyone be grateful enough to help me out? Thanks! URL: URL I've included some screenshots of how the site looks like on all three browsers. URL URL URL This is my CSS File: PHP Code: .linkbody { padding: 15px 15px 6px; color: white; font-family: Verdana; font-size: 10pt; width: 160px; background-color: #006EA1; } and this my html file: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML> <head> <title> Schmid </title> <link type="text/css" rel="stylesheet" href="css2.css"> </head> <body> <center> <table class="linkbody" width="800"> <tr> <td> ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd </td> </tr> </table> </center> </body> </HTML> In Firefox the padding works fine, but in the IE6 it doesn't work at all makes me angry thx for any help |