|
CSS - Help - 3 Column Layout Problem - Body Content Pushed To Bottom Of Page
Hi, I'm working on a website for a church and we're near completion, but I'm having trouble getting the site to display properly in IE7 on Windows XP and a few other browsers according to browsershots.org. CSS and XHTML both validate at w3c.org. I've ripped this thing apart and put it back together with no luck. The really weird thing is the Home page looks fine, but in the rest of the pages the body content gets pushed below the left and right navigation bars. Is it a CSS float problem? Margins or paddings???
Home page: Looks OK in IE7, at least on my machine - http://www.stlukeslutheran.com/index_temp.php Ministry page: Content is pushed to bottom of page - http://www.stlukeslutheran.com/mini...ns_ministry.php The CSS files are at http://www.stlukeslutheran.com/css/main.css and http://www.stlukeslutheran.com/css/common.css. Would anyone be willing to take a look? Thanks in advance. Similar TutorialsI have a 3 column layout which is working fine so far except for one thing: the content in the 3rd column is pushed down, and starts at the horizontal level where the content in the center column finishes. How do I prevent that from happening, and make the 3rd column content start at the top like the other 2 columns? This is the CSS: Code: /*container div*/
#container {
width: 770px;
margin-right: auto;
margin-left: auto;
margin-bottom: 0; margin-top: 0;
padding: 0px;
text-align: left;
font-size: 11px;
}
#contentleft {
width: 180px;
background: #fff;
float: left;
margin: 0;
border-left: 1px solid #000; border-right: 1px solid #000;
}
#contentcenter {
width: 454px;
padding: 0px;
float: left;
margin: 0;
}
#contentright {
width: 136px;
padding: 0px;
float: right;
margin: 0;
border-left: 1px solid #000; border-right: 1px solid #000;
}
IE CSS Problem. sidebar getting pushed to bottom... I'm working on my new blog. Moding a template from wpdesigner.com http://www.mymovetoeurope.com/ The sidebar menu that is suppose to be on the right gets slipped to the bottom, but it's only for IE 6.0, don't have 7.0 installed. I tried using absolute positioning for the right bar, but it didn't do anything. When there were a lot of content in the sidebar and I increased the container size, it did push the menu back up, but the menu started at the edge of the header. I want to have it so the first right sidebar is under the header. Can someone tell me what's wrong? Thanks. Hello, My first CSS site was going fine; I was learning as I went and drawing from different resources. My code and CSS probably isn't very pretty ( I validated it, I know it needs to be cleaned up) but things were working. Then I went back and made some adjustments concerning the widths of my column divs. Now I find that Firefox is respecting the rightcolumn div (specifically: <div id="contentright">)but IE keeps kicking it to the bottom left. I've tried messing with the column lengths so everything fits accordingly as specified in the frame div width. Can anyone please take a look and offer a suggestion? thanks. http://www.brinjac.com/test/binnspark.html Hi, hopefully you enjoyed the title, I had a good laugh thinking of it in that split second it took me to write it. So, I found a 3 column css layout on a CSS generator website, because I got sick of trying to hack up layouts I've made in the past that didn't work. Anyhow, it was working fine with one line of content in each column when I tested it out, however, once content in the middle column was added, and stretched vertically beyond a certain point, it will drag the left columns content down with it. The right column is not affected in any way. I have spent a few hours trying to look for reasons as to why it would happen, but I had no luck. I would appreciate any help... so thank you in advance if you take a stab at it. Here's the html: Code: <body> <div id="pagewidth"> <div id="header"></div> <div id="wrapper" class="clearfix" > <div id="twocols" class="clearfix"> <div id="maincol">Main Text, woot. (aka hi hi hi)</div> <div id="rightcol">Sidebar, yippee.</div> </div> <div id="leftcol"> <div id="navigation">test</div> </div> </div> <div id="footer"></div> </div> </body> and the CSS: Code: html, body
{
background: #333399;
margin:0;
padding:0;
text-align:center;
font-family: Verdana, Arial, Tahoma;
font-size: 12px;
font-weight: normal;
color: black;
}
#pagewidth
{
width: 750px;
text-align:left;
margin-left:auto;
margin-right:auto;
background: #333399 url('images/bodycontent.gif') repeat-y center top;
}
#header
{
position:relative;
height:138px;
background: url('images/header.gif') center;
width: 100%;
}
#leftcol
{
width: 118px;
float: left;
left: 25px;
position: relative;
background-color: transparent;
margin:0; padding:0;
}
#twocols
{
width: 700px;
float: right;
position: relative;
}
#rightcol
{
width:180px;
right: 25px;
float:right;
position:relative;
background-color: transparent;
}
#maincol
{
background-color: transparent;
float: left;
left: 100px;
display: inline;
position: relative;
width: 390px;
}
#footer
{
text-align: center;
height:39px;
background: url('images/footer.gif');
clear:both;
}
.clearfix:after
{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix{display: inline-table;}
/* Hides from IE-mac \*/
* html .clearfix{height: 1%;}
.clearfix{display: block;}
/* End hide from IE-mac */
/*printer styles*/
@media print{
/*hide the left column when printing*/
#leftcol{display:none;}
/*hide the right column when printing*/
#rightcol{display:none;}
#twocols, #maincol{width:100%; float:none;}
}
Again, thank you in advance if you can come up with anything. Hi, I have been having trouble fixing the coding on my site to be able to withhold the same content size while the window is being re-sized. Before I added min-width: 800px to my main content, it was being squeezed by the sidebar to force the letters/images to the left. Now with the code implemented, the sidebar reacts differently. It is being forced to the bottom as it meets the min-width of the content. Site: Diablo 3 Kore - Please google it - [can't link yet] CSS: /* Content */ #fw-bigcontain {padding: 3px; min-width: 800px; float:right;} #fw-columnContainer {} #fw-mainColumn {margin: 0px;} #fw-paragraph {} .fw-paragraphtop {} .fw-text {} h3.fw-title {background: url(()) no-repeat scroll;color: white; font-size: 17pt; font-family: 'Clarendon Cn BT';} /* Sidebar */ #fw-sidebar h3.fw-title {background: url(() no-repeat left center; font-size: 14px; margin-bottom: -8px; height: 13px;} #fw-sidebar {min-width: 245px; float: right; background:black; padding: 7px;} #fw-sidebar li {} .hasSidebar #fw-sidebar .fw-title {font-size: 12pt; font-family: 'SonicCutThru Hv BT';} /* end sidebars */ I haven't seen any css code I implemented that I could carry over to the sidebar code that could do the same thing. Well, please help me resolve this issue. Thank you. Alrighty, I'm trying to produce a layout similar to that of what is shown in the attached image. Please ignore the image being the rainbox colors, but I had to differentiate sections. I can get the banner/search line to appear properly, but the rest will not. Left menu gets positioned fine, the content does as well (more or less), but the right column is displaced, and shifted down to the very bottom of the window -- far right, though. I can't explain much better than that, so without further ado: CSS: Code: .columns-float{
float : left;
width : 80%;
}
.column-one
{
width : 75%; /* NOTE: This needs to be dynamic! THIS is what I'm
inquiring about. The above problem assumes this attribute
is set to "auto". */
float : right;
}
.column-two
{
width : 25%;
float : left;
}
.column-three{
width : 20%;
float : right;
}
.box-footer{
clear : both;
}
.column-one-content{
margin-left: 1px;
margin-right: 1px;
}
/*Hack below:*/
.box-wrap, .columns-float, .column-one, .column-two, .column-three, h2{
p\osition: relative;
}
(Above was borrowed from here, albeit with modifications.) HTML: Code: ... <div class="columns-float"> <div class="column-one"> <div class="column-one-content"> <h2>column 1</h2> <p>column filler</p> <p>column filler</p> <p>column filler</p> <p>column filler</p> <p>column filler</p> <p>column filler</p> <p>column filler</p> <p>column filler</p> <p>column filler</p> <p>column filler</p> <p>column filler</p> <p>column filler</p> <p><a href="#" title="fake link for testing">test link</a></p> </div> </div> <div class="column-two"> <div class="column-two-content"> <h2>column 2</h2> <p>column filler</p> <p>column filler</p> <p>column filler</p> <p><a href="#" title="fake link for testing">test link</a></p> </div> </div> <div class="box-clear"> </div><!-- # needed to make sure column 3 is cleared || but IE5(PC) and OmniWeb don't like it --> </div><!-- close boxbody --> <div class="column-three"> <div class="column-three-content"> <h2>column 3</h2> <p>column filler</p> <p>column filler</p> <p>column filler</p> <p><a href="#" title="fake link for testing">test link</a></p> </div> </div> <div class="box-clear"> </div><!-- # needed to make sure column 3 is cleared || but IE5(PC) and OmniWeb don't like it --> <div class="box-footer">Footer </div> Do not link me to Position Is Everything. Been there already, and it wasn't helpful; the used terminology was too abstruse for me. Any help would be appreciated, and I thank you very much for your time. This is driving me batty. example is at http://bluewebpages.com/arch.php I am fairly proficient at coding css and think it's about time to clean(organize) it all up, even though it does validate. Anyway I was wondering if someone could please help me with the overlap problem for the right (smaller) column. I want the entire main content of the page, the part before the footer, to extend down when there is more content to side, not just the left/main content side. EDIT: Fixed .. thanks! The `clear:both;` was what it needed I've spent the last two days struggling, trying to get the footer to stay at the bottom of the window and the two right most columns in my layout to stretch to the footer. I've search this site thorough for answers, and yes, there were many of them. But still, after implementing everyone I came across, I can't get the layout to do the above criteria in both IE and Firefox. 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>Mall</title> <link href="css/template.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="wrapper"> <div id="main"> <div id="header"> <div id="ecommerce"> <div id="logo"><img src="images/logo.jpg" width="188" height="18" alt="Mall" title="Mall" border="0" /></div> <div id="text"><a href=""><img src="images/cart.gif" width="16" height="16" alt="Master Basket" title="Master Basket" border="0" /> Basket</a> | <a href="">Register</a> | <a href="">Login</a></div> </div> <div id="content"> <div id="searchform"> <form> <fieldset> <legend>Search Shopping Mall</legend> <div id="search_btn"><input type="submit" value="Search" class="button" /></div> <div id="search_type"> <select> <option>Products</option> <option selected="selected">Stores</option> </select> </div> <div id="search_input"><input type="text" name="query" id="query" value="" size="22" maxlength="200" /></div> </fieldset> </form> </div> <!-- end searchform --> </div> <!-- end content --> </div> <!-- end header --> <div id="mall"> <!-- top navigation --> <div id="topnav"> <div id="nav-container"> <ul id="nav"> <li id="nav-home"><a href="index.html" accesskey="1">Home</a></li> <li id="nav-browse"><a href="browse.html" accesskey="2">Browse Mall</a></li> <li id="nav-getastore"><a href="getastore.html" accesskey="3">Get A Store</a></li> <li id="nav-featstore"><a href="featstore.html" accesskey="4">Featured Store</a></li> <li id="nav-featitem"><a href="featitem.html" accesskey="5">Featured Item</a></li> <li id="nav-aboutus"><a href="aboutus.html" accesskey="6">About Us</a></li> <li id="nav-contactus"><a href="contactus.html" accesskey="7">Contact Us</a></li> <li id="nav-help"><a href="help.html" accesskey="8">Help</a></li> </ul> </div> </div> <!--<div id="topnav"> <div id="menu"><a href="index.html">Home</a><span id="sp"><img src="images/navsp.gif" align="absmiddle" /></span><a href="browse.php">Browse Mall</a><span id="sp"><img src="images/navsp.gif" align="absmiddle" /></span><a href="">Get A Store</a><span id="sp"><img src="images/navsp.gif" align="absmiddle" /></span><a href="">Featured Stores</a><span id="sp"><img src="images/navsp.gif" align="absmiddle" /></span><a href="browse.php">Featured Items</a><span id="sp"><img src="images/navsp.gif" align="absmiddle" /></span><a href="">About Us</a><span id="sp"><img src="images/navsp.gif" align="absmiddle" /></span><a href="">Contact Us</a><span id="sp"><img src="images/navsp.gif" align="absmiddle" /></span><a href="">Help</a></div> </div>--> <!-- banner image --> <div id="banner"><img src="images/banner.jpg" width="764" height="150" alt="Welcome to the Mall!" title="Welcome to the Mall!" border="0" /></div> <div id="midspacer"></div> <div id="mallbody"> <!-- left navigation --> <div id="leftnav"> <div class="menu_topleftcorner"><img src="images/menu_topleftcorner.jpg" width="6" height="6" border="0" /></div> <br/> <div class="sections">Mall Categories</div> <div id="navcontainer"> <ul id="navlist"> <li id="active"><a href="#" id="current">Home</a></li> <li><a href="">Books, Music & Movies</a></li> <li><a href="">Clothing & Apparel</a></li> </ul> </div> <br/> <div class="sections">Shop by Store</div> <ul id="navlist"> <li id="active"><a href="#">Salsa Products</a></li> </ul> <div class="menusp"></div> <div class="menu_bottomleftcorner"><img src="images/menu_bottomleftcorner.jpg" width="6" height="6" border="0" /></div> </div> <!-- content --> <div id="content"> <p><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/></p> </div> <!-- right navigation --> <div id="rightnav"> <p></p> </div> </div> </div> <!-- end mall --> </div> <!-- end main --> </div> <!-- end wrapper --> <div id="footer"> <div id="bg"> ads ad ad a </div> <div id="compliant"> <a href="http://validator.org/check/referer" target="_blank"><img src="images/compliant/w3cxhtml10.png" width="80" height="15" alt="W3C XHTML 1.0 Validated" title="W3C XHTML 1.0 Validated" border="0" /></a> <a href="http://jigsaw.w3.org/check/referer" target="_blank"><img src="images/compliant/w3ccss.png" width="80" height="15" alt="W3C CSS 1.0 Validated" title="W3C CSS 1.0 Validated" border="0" /></a> <a href="http://www.mozilla.org" target="_blank"><img src="images/compliant/mozilla.png" width="80" height="15" alt="Mozilla Firefox Browser Compatible" title="Mozilla Firefox Browser Compatible" border="0" /></a> </div> </div> <!-- end footer --> </body> </html> PS - Kravitz, I've check alot of the links you have posted. While they were helpful, I wasn't successful in implemented many of the techniques suggested in them to solve my problems. Hello! I'm new to CSS, so any help would be greatly appreciated! I'm working on this page: sugarhooker[dot]com/testing/index2.html *The CSS is included in the head The right column is suppose to start where it says 'Are you hooked...' It should be right underneath the navigation bar. Anyone know what I'm doing wrong? Thanks in advance! Hi all, this is my first post and hope I get help in a hear-tearing problem that I face at this link: (URL address blocked : See forum rules) ie show the complete page fine but firefox obscure the bottom content, no need for more explanation since it is obvious from looking at the page, I have the same problem when page content get much long as in the above link. any help would be greatly appreciated. sorry for my bad english hi, I am fairly new to css and working on a website with a complete css layout for the first time, one I got from dreamweaver. I thought things were going great because I did all my testing in Firefox (like a good boy) but then I tried to test it in Internet Explorer 6 and alot if not all of my webpages have the text positioned at the bottom instead of the top of a page. Here is a link: http://www.jcstrategies.com/jeff/featured_listings.php CSS CODE ----------------------------------------------------------- /***********************************************/ /* emx_nav_left.css */ /* Use with template Halo_leftNav.html */ /***********************************************/ /***********************************************/ /* HTML tag styles */ /***********************************************/ body{ font-family: Arial,sans-serif; color: #333333; line-height: 1.166; margin: 0px; padding: 0px; background: #cccccc url(./images/bg_grad.jpg) fixed; } /******* hyperlink and anchor tag styles *******/ a:link, a:visited{ color: #005FA9; text-decoration: none; } a:hover{ text-decoration: underline; } /************** header tag styles **************/ h1{ font: bold 120% Arial,sans-serif; color: #334d55; margin: 0px; padding: 0px; } h2{ font: bold 114% Arial,sans-serif; color: #006699; margin: 0px; padding: 0px; } h3{ font: bold 100% Arial,sans-serif; color: #334d55; margin: 0px; padding: 0px; } h4{ font: 100% Arial,sans-serif; color: #333333; margin: 0px; padding: 0px; } h5{ font: 100% Arial,sans-serif; color: #334d55; margin: 0px; padding: 0px; } /*************** list tag styles ***************/ ul{ list-style-type: square; } ul ul{ list-style-type: disc; } ul ul ul{ list-style-type: none; } /********* form and related tag styles *********/ form { margin: 0; padding: 0; } label{ font: bold 1em Arial,sans-serif; color: #334d55; } input{ font-family: Arial,sans-serif; } /***********************************************/ /* Layout Divs */ /***********************************************/ #pagecell1{ position:absolute; top: 112px; left: 2%; right: 2%; width:95.6%; background-color: #ffffff; } #tl { position:absolute; top: -1px; left: -1px; margin: 0px; padding: 0px; z-index: 100; } #tr { position:absolute; top: -1px; right: -1px; margin: 0px; padding: 0px; z-index: 100; } #masthead{ position: absolute; top: 0px; left: 2%; right: 2%; width:95.6%; } #pageNav{ float: left; width:178px; padding: 0px; background-color: #F5f7f7; border-right: 1px solid #cccccc; border-bottom: 1px solid #cccccc; font: small Verdana,sans-serif; } #content{ padding: 5px 10px 5px 5px; margin:0px 0px 0px 179px; border-left: 1px solid #ccd2d2; } /***********************************************/ /* Component Divs */ /***********************************************/ #siteName{ margin: 0px; padding: 16px 0px 8px 0px; color: #ffffff; font-weight: normal; } /************** utility styles *****************/ #utility{ font: 75% Verdana,sans-serif; position: absolute; top: 16px; right: 0px; color: #919999; } #utility a{ color: #ffffff; } #utility a:hover{ text-decoration: underline; } /************** pageName styles ****************/ #pageName{ padding: 0px 0px 14px 10px; margin: 0px; border-bottom:1px solid #ccd2d2; } #pageName h2{ font: bold 175% Arial,sans-serif; color: #000000; margin:0px; padding: 0px; } #pageName img{ position: absolute; top: 0px; right: 6px; padding: 0px; margin: 0px; } /************* globalNav styles ****************/ #globalNav{ position: relative; width: 100%; min-width: 640px; height: 32px; color: #cccccc; padding: 0px; margin: 0px; background-image: url(./images/glbnav_background.gif); } #globalNav img{ margin-bottom: -4px; } #gnl { position: absolute; top: 0px; left:0px; } #gnr { position: absolute; top: 0px; right:0px; } #globalLink{ position: absolute; top: 6px; height: 22px; min-width: 640px; padding: 0px; margin: 0px; left: 10px; z-index: 100; } a.glink, a.glink:visited{ font-size: small; color: #000000; font-weight: bold; margin: 0px; padding: 2px 5px 4px 5px; border-right: 1px solid #8FB8BC; } a.glink:hover{ background-image: url(./images/glblnav_selected.gif); text-decoration: none; } .skipLinks {display: none;} /************ subglobalNav styles **************/ .subglobalNav{ position: absolute; top: 84px; left: 0px; /*width: 100%;*/ min-width: 640px; height: 20px; padding: 0px 0px 0px 10px; visibility: hidden; color: #ffffff; } .subglobalNav a:link, .subglobalNav a:visited { font-size: 80%; color: #ffffff; } .subglobalNav a:hover{ color: #cccccc; } /*************** search styles *****************/ #search{ position: absolute; top: 5px; right: 10px; z-index: 101; } #search input{ font-size: 70%; margin: 0px 0px 0px 10px; } #search a:link, #search a:visited { font-size: 80%; font-weight: bold; } #search a:hover{ margin: 0px; } /************* breadCrumb styles ***************/ #breadCrumb{ padding: 5px 0px 5px 10px; font: small Verdana,sans-serif; color: #AAAAAA; } #breadCrumb a{ color: #AAAAAA; } #breadCrumb a:hover{ color: #005FA9; text-decoration: underline; } /************** feature styles *****************/ .feature{ padding: 0px 0px 10px 10px; font-size: 80%; min-height: 200px; height: 200px; } html>body .feature {height: auto;} .feature h3{ font: bold 175% Arial,sans-serif; color: #000000; padding: 30px 0px 5px 0px; } .feature img{ float: left; padding: 0px 10px 0px 0px; } /*************** story styles ******************/ .story { padding: 10px 0px 0px 10px; font-size: 80%; } .story h3{ font: bold 125% Arial,sans-serif; color: #000000; } .story p { padding: 0px 0px 10px 0px; } .story a.capsule{ font: bold 1em Arial,sans-serif; color: #005FA9; display:block; padding-bottom: 5px; } .story a.capsule:hover{ text-decoration: underline; } td.storyLeft{ padding-right: 12px; } /************** siteInfo styles ****************/ #siteInfo{ clear: both; border-top: 1px solid #cccccc; font-size: small; color: #cccccc; padding: 10px 10px 10px 10px; margin-top: 0px; } #siteInfo img{ padding: 4px 4px 4px 0px; vertical-align: middle; } /************ sectionLinks styles **************/ #sectionLinks{ margin: 0px; padding: 0px; } #sectionLinks h3{ padding: 10px 0px 2px 10px; border-bottom: 1px solid #cccccc; } #sectionLinks a:link, #sectionLinks a:visited { display: block; border-top: 1px solid #ffffff; border-bottom: 1px solid #cccccc; background-image: url(./images/bg_nav.jpg); font-weight: bold; padding: 3px 0px 3px 10px; color: #21536A; } #sectionLinks a:hover{ border-top: 1px solid #cccccc; background-color: #DDEEFF; background-image: none; font-weight: bold; text-decoration: none; } /************* relatedLinks styles **************/ .relatedLinks{ margin: 0px; padding: 0px 0px 10px 10px; border-bottom: 1px solid #cccccc; } .relatedLinks h3{ padding: 10px 0px 2px 0px; } .relatedLinks a{ display: block; } /************* relatedLinks2 styles **************/ .relatedLinks2{ margin: 0px; padding: 10px 0px 10px 1px; border-bottom: 1px solid #cccccc; } .relatedLinks h3{ padding: 10px 0px 2px 0px; } .relatedLinks a{ display: block; } /**************** advert styles *****************/ #advert{ padding: 10px; } #advert img{ display: block; } /********************* end **********************/ ANY IDEAS???? Hello - I'm having trouble with the layout of a site I'm working on. Here's the site in question: http://www.americanidiotsband.com/ If you look at it in anything up to 1024x768, it's fine. But if you go higher than that (say, 1280x1024 resolution), then the main (black) part of the page goes only as far down as the content that is filling it. What SHOULD happen is that the black background should span all the way to the bottom, no matter how much content is inside it... Here is a link to the stylesheet that I made up: http://www.americanidiotsband.com/styles.css I'm sure I'm doing something wrong, and I'm hoping that someone could help me correct this. Thanks in advance for any help that can be offered!... i want 2 columns side by side:css is as below. it seems the 2nd column is displayed below the first column.wat can be done to avoid this. div#column1 { margin-left: 150px; width: 70px; height: 500px; background: #CCCCFF; color: blue;} div#column2 { margin-left: 250px; color: black; background: blue; } Hello I would be really grateful if anyone can help me - I'm struggling with a 3 column layout using css. It seems to work well in all except IE6 (I'm looking at it on a Mac using Safari and Firefox, I've got different browser screen shots from a website and all seem OK except IE6, which puts the center column under the other two, instead of at the same height. If anyone has any ideas, they'd be much appreciated - I don't really know what I'm doing with css, and I have tried several different 3 col layouts that I've found on the web: this is the only one that has worked in almost all browsers for me. This is the style sheet: body {background: #003366; } a { font-family: Verdana, Arial, sans-serif; text-decoration:none; font-size: medium; color: #de8600;} h1 { font-family: Verdana, Arial, sans-serif; font-size: x-large; font-weight: bold; background: #FFFFFF; color: #DE8600} h2 { font-family: Verdana, Arial, sans-serif; font-size: large; font-weight: bold; color: #003366} h3 { font-family: Verdana, Arial, sans-serif; font-size: medium; font-weight: bold; color: #003366} h4 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: medium; font-weight: bold; background: #003366; color: #DE8600} h5 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: medium; font-weight: normal; background: #FFFFCC; color: #000033} p { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: medium; color: #003366;} a:visited {font-family: Verdana, Arial, sans-serif; font-size: medium; color: #de8600;} a:hover { font-family: Verdana, Arial, sans-serif; text-decoration:underline; font-size: medium; color: #DE8600;} body { padding: 0px; border:0; background: #003366; } div#wrapper { width: 780px; margin: 0 auto; } div#header { background-image: url("header.jpg"); background-repeat: no-repeat; color: #FFFFFF; margin-left:auto; margin-right:auto; margin-top: 0; width:780px; height: 200px } #header .slogan { text-align: left; padding-left: 20px; padding-right: 20px; color: #003366; font-size: 0.8em; } p.slogan { text-align: left; padding-left: 20px; padding-right: 20px; color: #003366; } div#navcontainer { background: #003366; margin: 0px 0px 0px 0px; padding: 1em 0 0 0; font-size: 0.8em; text-align: center text-transform: lowercase; border-top: 2px solid #de8600; } /* to stretch the container div to contain floated list */ #navcontainer:after { content: "."; display: block; line-height: 1px; font-size: 1px; clear: both; } ul#navlist { list-style: none; padding: 0; margin: 0 auto; display: inline; width: 100%; font-size: 0.8em; } ul#navlist li { display: block; float: left; width: 20%; text-align: center margin: 0; padding: 0; } ul#navlist li a { display: block; width: 100%; padding: 0.5em; border-width: 1px; border-color: #ffe #aaab9c #ccc #fff; border-style: solid; color: #666666; text-decoration: none; background: #cccccc url(nav.gif); } #navcontainer>ul#navlist li a { width: auto; } ul#navlist li#active a { background: #cccccc url(nav.gif); color: #996600; } ul#navlist li a:hover, ul#navlist li#active a:hover { color: #996600; background: transparent; border-color: #aaab9c #fff #fff #ccc; } #container { position: relative; display:block; background:#0ac; border-left:200px solid #003366; border-right:200px solid #003366; } #inner { display:block; margin-left:-200px; margin-right:-200px; padding:5px; } #left { float:left; position: relative; width:200px; left:0px; } #right { float:right; position: relative; width:200px; right:0px; } #center { margin-left:200px; margin-right:200px; position:relative; display:block; height:1%;} .clear {clear:both;} /* Just to extend each column */ #inner a:visited, a {text-decoration:none; cursor:default;} #inner a span {display:none;} #inner a:active, #inner a:focus {color:#fff; text-decoration:none; background:transparent; cursor:default;} #inner a:active span, #inner a:focus span {display:block;} .menu { width:150px; height:150px; position:relative; margin:0; font-size:11px; margin:0px 0; z-index:100; } .menu ul li a, .menu ul li a:visited { display:block; text-decoration:none; color:#003366; width:150px; height:25px; text-align:center; border:1px solid #fff; border-width:1px 1px 0 0; background:#003366 url(nav.gif); line-height:19px; font-size:11px; } .menu ul { padding:0; margin:0; list-style-type: none; } .menu ul li { float:left; margin-right:1px; position:relative; } .menu ul li ul { display:none; } /* specific to non IE browsers */ .menu ul li:hover a { color:#996600; background:#cccccc; } .menu ul li:hover ul { display:block; position:absolute; top:0; left:150px; width:150px; } .menu ul li:hover ul li a.hide { background:#ffffff; color:#003366; } .menu ul li:hover ul li:hover a.hide { width:150px; } .menu ul li:hover ul li ul { display: none; } .menu ul li:hover ul li a { display:block; background:#cccccc; color:#996600; width:200px; } .menu ul li:hover ul li a:hover { background:#dfc184; color:#666666; } .menu ul li:hover ul li:hover ul { display:block; position:absolute; left:151px; top:0; color:#003366; } .menu ul li:hover ul li:hover ul li a { display:block; width:200px; background:#dfc184; color:#003366; } .menu ul li:hover ul li:hover ul li a:hover { background:#bd8d5e; color:#fff; } div#fla { position:relative; text-align: center; font-size: 10px; margin: 20px 0 20px 0; } p.fla { text-align: center; font-size: 10px; color: #ffffff; margin: 0; } p.date { text-align: right; font-size: 0.8em; color: #ffffff; margin: 0; } div#guardian { height:60px; margin: 10px 0 10px 0; align: right; } div#banner { width:200px; margin:20px 0 20px 0; background:#ffffff; padding:10; color:#003366; font-size:10px; text-align: center; border:1px solid #de8600; } #banner a:hover { color:#996600; font-size:10px; text-align: center; background:#cccccc; } p.banner { color:#003366; font-size:10px; text-align: center; } div#google { width:180px; height:120px; margin:10px 0 0 0; background:#003366; padding:5px; color:#ffffff; } div#search { width:180px; margin:20px 0 20px 0; background:#ffffff url("search.gif"); background-repeat: no-repeat; padding:10px; color:#003366; border:1px solid #de8600; } p.search { color:#003366; font-size:11px; text-align: center; } a.search { color:#003366; font-size:11px; text-align: center; } #search a:hover { color:#996600; font-size:11px; text-align: center; } div#edit { width:250px; margin:20px 0 0 0; background:#ffffff url("edit-box.jpg"); background-repeat: no-repeat; padding:20px; color:#003366; border:1px solid #de8600; } p.edit { color:#003366; font-size:11px; text-align: center; } a.edit { color:#003366; font-size:11px; text-align: left; } #edit a:hover { color:#996600; font-size:11px; text-align: left; } .gallerycontent{ width: 250px; border: 1px solid #de8600 background-color: #fffFFF; text-align: center; display: block; } div#footer { clear:both; position:relative; align:center; color: #FFFFFF; margin-left:auto; margin-right:auto; margin-top: 20px; width:780px; height: 160px } p.footer { color:#ffffff; font-size:10px; text-align: left; } I am apparently not allowed to post the URL of the page, but I hope that someone may be able to make some suggestions anyway. Thanks for your time! Frances I have this problem on 2 sites I'm working on. I can't seem to nest 2 divs in a content div to create a 2 column layout. In FF it seems to work fine but IE is pushing the left column content down below the right column content. I've tried many things and I'm stuck. Am I going about the whole concept the wrong way or is there some small hack I'm missing somewhere? Any help would be great. link Thanks, Brad [/CODE]I have a 2 column css layout. I am having a problem with getting the vertical line that separates the left and right column to go the length of the page. It grows with the content in the right column. Here is an example: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "(URL address blocked: See forum rules)"> <html xmlns="(URL address blocked: See forum rules)"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>xyzTrader.com</title> <link rel="stylesheet" type="text/css" href="css/main.css" media="screen" /> </head> <body id="type-b"><!----> <div id="wrap"> <div id="header"> <div id="site-name">xyzTrader.com</div> <div id="search"> <form action=""> <label for="searchsite">Site Search:</label> <input id="searchsite" name="searchsite" type="text" /> <input type="submit" value="Go" class="f-submit" /> </form> </div> </div> <div id="content-wrap"> <div id="login"> <form method="post" action="/test/header.php"> Username <br /> <input name="uname" type="text" id="uname"> <br /> Password<br /> <input name="pword" type="password" id="pword"> <br /> <input name="Login" type="submit" id="Login" value="Login"> </form> </div> <div id="utility"> <ul id="nav-secondary"> <li class="first"><b>Catagories</b></li> <li><a href="#">Books</a></li> <li><a href="#">Books</a></li> <li><a href="#">Books</a></li> <li><a href="#">Books</a></li> <li><a href="#">Books</a></li> <li><a href="#">Books</a></li> <li><a href="#">Books</a></li> <li><a href="#">Books</a></li> <li><a href="#">Books</a></li> <li><a href="#">Books</a></li> <li><a href="#">Books</a></li> </div> <div id="content"> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> <p>hello<br>sfafssf</P> and here is the css file: Code:
/* THE BIG GUYS */
* {margin:0;padding:0}
html {min-height: 100%; min-width: 100%;}
body {padding: 0 0 20px;background: #fff url("images/body_bg.gif") repeat-x 0 100%;color:#333;font:83%/1.5 arial,tahoma,verdana,sans-serif}
/* LINKS */
a,a:link,a:link,a:link,a:hover {background:transparent;text-decoration:underline;cursor:pointer}
a:link {color:#c00}
a:visited {color:#999}
a:hover,a:active {color:#069}
/* FORMS */
input {font-family: arial,tahoma,verdana,sans-serif;margin: 2px 0}
/* FORMS - general classes */
input.f-submit {padding: 1px 3px;background:#666;color:#fff;font-weight:bold;font-size:96%}
/* TYPOGRAPHY */
p, ul, ol {margin: 0 0 1.5em}
h1, h2, h3, h4, h5, h6 {letter-spacing: -1px;font-family: arial,verdana,sans-serif;margin: 1.2em 0 .3em;color:#000;border-bottom: 1px solid #eee;padding-bottom: .1em}
h1 {font-size: 196%;margin-top:.6em}
h2 {font-size: 136%}
h3 {font-size: 126%}
h4 {font-size: 116%}
h5 {font-size: 106%}
h6 {font-size: 96%}
.highlight {color:#E17000}
.subdued {color:#999}
.error {color:#c00;font-weight:bold}
.success {color:#390;font-weight:bold}
.caption {color:#999;font-size:11px}
.date {font: bold 82% arial;color:#bbb;display:block;letter-spacing: 1px}
small {font-size:11px}
/* LISTS */
ul {margin: .3em 0 1.5em 0;list-style-type:none}
ul.related {margin-top: -1em}
ol {margin: .5em .5em 1.5em}
ol li {margin-left: 1.4em;padding-left: 0;background: none; list-style-type: decimal}
li {line-height: 1.4em;padding-left: 25px;background: transparent url("images/sprites.gif") no-repeat 0 0}
li.doc {background-position: 3px -500px}
ul.nomarker li {background:none;padding-left:0}
dl {margin: 0 0 1em 0}
dt {font-weight:bold;margin-top: 1.3em}
dl dl {margin: 0 0 1.5em 30px}
/* GENERAL */
img {border:none}
hr {margin: 1em 0;background:#f2f2f2;height:1px;color:#f2f2f2;border:none;clear:both}
.clear {clear:both;position:relative;font-size:0px;height:0px;line-height:0px}
/* LAYOUT - HEADER */
#header {background: #666 url("images/sprites.gif") repeat-x 0 100%;margin: 0 0 25px;padding: 0 0 8px}
#header #site-name {font: 265% arial;letter-spacing: -.05em;margin:0 0 0 40px;padding:3px 0;color:#ccc;border:none}
/* SEARCH */
#search {color:#fff;font-weight:bold;position:absolute;top:10px;right:50px;left:auto;width:18em}
#search form {margin:0}
#search input {width:8em;margin: 0 0 -1px;height:1.2em}
#search label {padding:5px 0 0;display:inline}
#search input.f-submit {width:auto;font-size:81%;margin:0 0 -.15em;height:1.95em}
/* LAYOUT - main body of page */
#wrap {min-width:770px;max-width:100%;margin:0 auto;position:relative; }
#content-wrap {position:relative;width:100%;}
#login {position:absolute;top:0;left:25px;width:165px;border-top: 5px solid #999;padding-bottom: 40px}
#utility {position:absolute; top:125px;left:25px;width:165px;border-top: 5px solid #999;padding-bottom: 40px}
#sidebar {position:absolute;top:0;right:25px;width:20%;border-top: 5px solid #999;padding-top: 1px;padding-bottom: 40px}
#content {margin: 0 50px}
#content #breadcrumb {margin-top:-5px;font-size:93%;font-weight:bold}
#content #breadcrumb a:link, #content #breadcrumb a:visited {text-decoration:none}
#content #breadcrumb a:hover, #content #breadcrumb a:active {text-decoration:underline}
/* LAYOUT TYPE B */
#type-b #content-wrap {background: url("images/content_wrap_bg.gif") repeat-y 30px 0;min-height:98%;}
#type-b #content {margin: 0 23px 0 235px}
/* SECONDARY NAVIGATION - vertical navigation */
#nav-secondary, #nav-secondary ul {position:static}
#nav-secondary, #nav-secondary li {list-style: none;margin:0;padding:0;background:#fff}
#nav-secondary {padding-top:0;border-top: 1px solid #ccc;margin-top: 1px}
#nav-secondary a {line-height:1.8;padding: 5px 0 5px 23px;background: #fff url("images/sprites.gif") no-repeat 10px -695px;font: bold 86% arial;display:block}
#nav-secondary a, #nav-secondary a:link, #nav-secondary a:visited, #nav-secondary a:hover, #nav-secondary a:active {text-decoration:none;cursor:pointer}
#nav-secondary a:link {color:#000}
#nav-secondary a:visited {color:#000}
#nav-secondary a:hover {color:#c00;background: #fee url("images/sprites.gif") no-repeat 10px -695px}
#nav-secondary li.active a:link, #nav-secondary li.active a:visited, #nav-secondary li.active a:hover, #nav-secondary li.active a:active {color:#c00}
#nav-secondary li {border-top: 1px solid #fff;border-bottom: 1px solid #ccc}
/* SECONDARY NAVIGATION - 2nd TIER */
#nav-secondary ul {margin: 0 0 1em 23px;padding:0}
#nav-secondary li.active li a, #nav-secondary li.active li a:link, #nav-secondary li.active li a:visited {line-height:1.5;background: #fff url("images/sprites.gif") no-repeat 0 -798px;padding:0 0 0 12px;font-weight:normal;width:auto;color:#000;width:130px;display:block}
#nav-secondary li.active li a:hover, #nav-secondary li.active li a:active {color: #c00}
#nav-secondary li.active li {border: none;margin:0}
#nav-secondary li.active li.active a:link,
#nav-secondary li.active li.active a:visited,
#nav-secondary li.active li.active a:hover,
#nav-secondary li.active li.active a:active {font-weight:bold}
/* SECONDARY NAVIGATION - 3rd TIER */
#nav-secondary ul ul {margin: 0 0 1em 13px;padding:0}
#nav-secondary li.active li.active li a, #nav-secondary li.active li.active li a:link, #nav-secondary li.active li.active li a:visited {width:117px}
#nav-secondary li.active li.active li a:link,
#nav-secondary li.active li.active li a:visited,
#nav-secondary li.active li.active li a:hover,
#nav-secondary li.active li.active li a:active {font-weight:normal}
#nav-secondary li.active li.active li.active a:link,
#nav-secondary li.active li.active li.active a:visited,
#nav-secondary li.active li.active li.active a:hover,
#nav-secondary li.active li.active li.active a:active {font-weight:bold}
/* SECONDARY NAVIGATION - 4th TIER */
#nav-secondary ul ul ul {margin: 0 0 1em 13px;padding:0}
#nav-secondary li.active li.active li.active li a, #nav-secondary li.active li.active li.active li a:link, #nav-secondary li.active li.active li.active li a:visited {width:104px}
#nav-secondary li.active li.active li.active li a:link,
#nav-secondary li.active li.active li.active li a:visited,
#nav-secondary li.active li.active li.active li a:hover,
#nav-secondary li.active li.active li.active li a:active {font-weight:normal}
#nav-secondary li.active li.active li.active li.active a:link,
#nav-secondary li.active li.active li.active li.active a:visited,
#nav-secondary li.active li.active li.active li.active a:hover,
#nav-secondary li.active li.active li.active li.active a:active {font-weight:bold}
/* LAYOUT - FOOTER */
#footer {clear:both;border-top: 1px solid #E3E8EE;padding: 10px 0 30px;font-size:86%;color:#999}
#footer p {margin:0}
#footer a:link {color:#999}
Can anyone give me some advice or what to do to make this line go the length of the page?? Thanks in advance, Mike |
|||||||