|
CSS - Dynamic And Fixed Columns In Firefox
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. Similar TutorialsI 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 Hi... 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 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 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! 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! I'm having a problem with my top Navigation. The top left has a search box, with a fixed width, but the other boxes across the top need to be dynamic width. Anyone have any suggestions on a good way to do this? I assumed I could set the boxes to a % width, and the % would be based on the container div, but this doesn't appear to be the case. Below is the skeleton of my code. I also have a problem with the main div. I cannot get it to float left of the side navigation bar when I put a sufficient amount of text in it. Thanks for the time to help me out! Code:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Welcome!</title>
<meta http-equiv="content-type"
content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<style TYPE="text/css">
#header {
color: #fff;
background-color: #000;
}
#topNav {
width: 100%;
min-width: 750px;
margin: 10px 0px;
padding: 0;
border: 1px solid #0f0;
}
#topNav:after {
content:".";
display:block;
clear:left;
height:0;
visibility:hidden;
}
/* Hides from IE-mac \*/
* html #topNav {height: 1%;}
/* End hide from IE-mac */
/* Search Box */
#searchBox {
float: left;
padding: 0;
margin: 0;
width: 150px;
height: 125px;
border: 1px solid #000;
background: #FFF;
text-align: center;
}
#nav, #nav ul {
list-style: none;
padding: 0;
margin: 0;
}
#nav li {
float: left;
margin-left: 8px;
padding: 0;
width: 18%;
height: 125px;
border: 1px solid #000;
background: #235;
color: #FFF;
}
#sideNav {
float: left;
width: 151px; /* 1px adjustment for no border */
margin-right: 10px;
border: 1px solid #0f0;
}
/* sideNav Boxes */
#sideNav .box {
margin-bottom: 10px;
padding: 5px 5px 5px 50px;
border: 1px solid #000;
height: 90px; /* add 10 for padding */
background: #235;
color: #fff;
background-repeat: no-repeat;
}
/* Main Content Container */
#main {
float: left;
padding: 10px;
border: 1px solid #000;
background: #fff;
}
/* Page Footer */
#footer {
clear: both;
background: #235;
border: 1px solid #000;
color: #aaa;
text-align: center;
margin: 10px 0px 0px 0px;
padding: 20px;
}
</style>
</head>
<body>
<div id="header">
Top Header Area
</div>
<div id="topNav">
<!-- Search Box -->
<div id="searchBox">
Fixed Size Search Box
</div>
<ul id="nav">
<li >Dynamic Sized Box in Top Nav</li>
<li>Dynamic Sized Box in Top Nav</li>
<li>Dynamic Sized Box in Top Nav</li>
<li>Dynamic Sized Box in Top Nav</li>
</ul>
</div>
<div id="sideNav">
<div class="box"> Fixed Size Box in Side Nav
</div>
<div class="box"> Fixed Size Box in Side Nav
</div>
<div class="box"> Fixed Size Box in Side Nav
</div>
</div>
<div id="main">
Main Content Area<br /><br />
Maecenas ut quam rutrum lacus tempus fringilla. Maecenas aliquam tempus libero. Mauris porttitor. Etiam at
risus a est sodales cursus. Cras ut ipsum. Vivamus at turpis ac lorem posuere rutrum. Vestibulum nisi nulla,
rhoncus a, rhoncus sit amet, placerat ac, justo. Nam consequat mauris ut orci. Etiam eleifend. Ut sem mauris,
imperdiet vitae, consectetuer a, ullamcorper non, nibh. Curabitur sapien. Fusce ultricies, ligula eget
scelerisque tempus, nisi nisl convallis dui, ut scelerisque magna est sit amet leo. Suspendisse facilisis
tortor faucibus elit. Sed diam. Duis imperdiet blandit mauris. Etiam cursus erat vel ligula.
</div>
<div id="footer">
Footer
</div>
</body>
</html>
I've run into a problem with a 3-column layout I'm making. The problem is to get the columns equally high. Previously I've just made the "illusion" of equally high columns by making a background image and repeating it in the y-direction (like this). This works fine as long as the page has a fixed with - in this case the left and right column have a fixed width but the center column is dynamic. So, how can I make all the columns look equally high? (without using tables, obviously) Btw, I can't show you an example of the page, but hopefully you'll get the picture and could point me to an article or something about the subject. EDIT: Never mind! I found an example and it worked! http://www.pixy.cz/blogg/clanky/css-3col-layout/ <-- thats the one. URL Hi all, I got stuck on my site using background fixed attributes.. Although everything works fine for me in ie , in firefox , when I scroll the content, the background and everything flickers ... Does anyone know how to fix this ? I have been bothering with that at least one wekend and cant figure out where the problem is...???? Thanx in advance The main body text in IE stays within the width I gave it, but in Firefox, it just goes off the div, its all not showing becasue I have the containing div overflow:hidden, but why won't it stay in the fixed width div, 603px, in Firefox like it does in IE? mediacontour.com/TCS/frequently-asked-questions.php I am trying to create a very basic div and css template with 3 columns. I want 3 columns visible, and want to give a backgroundcolor to the container. When my columns gets higher (the left, middle or the right column), I want the div wich contains these 3 columns to get higher (and reveiling this by the background color). All goes well in Internet Explorer 6, and even 7... but Firefox seems to have problems with it. Can anybody help me out? The following code is used: PHP 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> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Test</title> <style type="text/css"> .container{ width:600px; background-color:#660066; height:auto; } .kolomlinks{ /*COLUMNLEFT*/ float:left; width:80px; background-color:#66FF33; padding:10px; } .kolommidden{ /*COLUMNMIDDLE*/ float:left; width:380px; border:dotted 10px; background-color:#FFFFCC; } .kolomrechts{ /*COLUMNRIGHT*/ float:left; width:80px; margin:10px; background-color:#FF0000; } </style> </head> <body> <center> <div class="container"> <div class="kolomlinks">Left</div> <div class="kolommidden">Middle<br /> <br /> The background color of the overall container doesn't get extended in firefox. </div> <div class="kolomrechts">Right</div> </div> </center> </body> </html> Join Date: May 2008 Posts: 2 Firefox bug combining absolute and fixed positioning Hey helpful people. I am designing a site which has a floating toolbar (position: fixed) with popup menus. The popup menus are using nested lists and position: absolute to display. JavaScript is dealing with the transition. The problem is that in firefox alone the fixed toolbar jumps when the popup menus show and hide. Removing either position: fixed or the offset (bottom: 27px) removes this problem. However these need to be present in the design. Anyone know a workaround? (webpage and css below) Code: <div class="toolbar_O">
<div class="toolbar_I">
<!-- top page info -->
<div class="pageInformation cf">
<!-- Page Status Info Start -->
<div class="pageStatus">
<h4 class="statusLabel">Status: </h4>
<span class="status">Live</span> </div>
<!-- Page Status Info End -->
<div class="RHS cf">
<div class="toolbarMenu">
<ul>
<li class="publicationDates"><a href="#" title="Publication dates">Publication dates<span class="moreArrow"><span class="wai">^</span></span>
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<ul class="popup">
<li>
<form>
<p>
<label for="email" class="expiryDate">Set expiry date</label>
</p>
<input type="text" class="inputTextbox" name="expiryDate" id="expiryDate"/>
<p>
<label for="email" class="liveDate">Set live date</label>
</p>
<input type="text" class="inputTextbox" name="liveDate" id="liveDate"/>
</form>
</li>
</ul>
</li>
<li class="dateAction"><a href="#" title="Last published">Last published 29/01/08<span class="moreArrow"><span class="wai">^</span></span>
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<ul class="popup">
<li>
<p class="cf"><span class="label">Author:</span><span class="value">Anne Light</span></p>
<p class="cf"><span class="label">Approver:</span><span class="value">John Smith</span></p>
<p class="cf"><span class="label">Review date:</span><span class="value">21/06/07</span></p>
</li>
</ul>
</li>
<li class="versions"><a href="#" title="Other versions">Other versions (#)<span class="moreArrow"><span class="wai">^</span></span>
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<ul class="popup">
<li>
<p>Ann Light's version sent for approval on 24/12/07 at 10.03am</p>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<!-- bottom user functions -->
<div class="userFunctions cf">
<!--Left Hand Side Buttons Start -->
<div class="btnLHS"> <a id="#" class="btnHelp" title="Help" href="#">Help</a>
<div class="toolbarMenu pageActions">
<ul>
<li class="otherPageActions"><a href="#" title="Other page actions">Other page actions<span class="moreArrow"><span class="wai">^</span></span>
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<ul class="popup">
<li>
<ol>
<li><a href="pa001a_delete_page.html" class="lbOn modal:{width:450}" title="Delete page">Delete this page</a></li>
<li><a href="pa002_set_date.html" class="lbOn" title="Set date">Set publication/expiry date</a></li>
<li><a href="pa003_page_permissions.html" class="lbOn modal:{width:450}" title="See page permissions">See page permissions</a></li>
<li><a href="pa004_add_subpage.html" class="lbOn" title="Create sub page">Create sub page</a></li>
<li><a href="pa005_page_history.html" class="lbOn modal:{width:450}" title="See page history">See page history</a></li>
<li><a href="#">Preview</a></li>
<li><a href="link_1d.html" class="lbOn modal:{width:450}" title="Save a copy">Save a copy</a></li>
</ol>
</li>
</ul>
</li>
</ul>
</div>
</div>
<!-- Left Hand Side Buttons End -->
<!-- Right Hand Side Buttons Start -->
<div class="btnRHS"><a href="st016_page_notes.html" class="lbOn pageNotes" title="page notes">See page notes</a> <a id="#" class="btnReject" title="Do Not Approve" href="#"><span class="buttonText">Don't Approve</span></a> <a id="#" class="btnApprove" title="Approve" href="#"><span class="buttonText">Approve</span></a> </div>
<!-- Right Hand Side Buttons End -->
</div>
</div>
</div>
Code: div.toolbar_O {
background: #eaf1f9 url(../images/interface/toolbar_bg.gif) 0 0 repeat-x;
border: 1px solid #3a8ea8;
padding: 9px 0px;
width: 729px;
color: #0a3b3f;
font-size: 0.9em;
position: fixed;
bottom: 20px;
left: 100px;
height: 82px;
}
body.editMode div.toolbar_O {
position: relative;
left:0;
bottom: 0;
float:right;
}
.toolbar_O .toolbar_I {
border: 1px solid #073f58;
background: url(../images/interface/toolbarinner_bg.gif) #54b4cc;
margin: 0px 9px;
}
.toolbarMenu ul li a,
.toolbarMenu ul li a:visited {
font-weight: bold;
color: #77aeb5;
border: 1px solid #287e95;
text-decoration: none;
padding: 4px 5px 6px 5px;
background: #e6f4f5;
color: #0a3b3f !important;
display: -moz-inline-box;
display: inline-block;
height: 13px;
}
.toolbarMenu ul {
padding:0;
margin:0;
list-style-type: none;
margin: 0;
}
.toolbarMenu ul li {
float:left;
position:relative;
margin: 0 0 0 10px;
}
.toolbarMenu ul li ul li {
margin: 0;
font-size: 0.9em;
}
.toolbarMenu ul li ul {
visibility: hidden;
position:absolute;
bottom: 27px;
left:0;
padding: 5px;
background: #ebf6f8;
border: 1px solid #2e869c;
margin: 0;
z-index: 1000;
font-size: 1em;
text-align: left;
}
.toolbarMenu ul .moreArrow {
display: -moz-inline-box;
display: inline-block;
padding: 6px 8px;
width: 1px;
margin-left: 10px;
border-left: 1px solid #89abb7;
background: url(../images/interface/morearrow.gif) 3px 0 no-repeat
}
.toolbarMenu ul li.open ul {
visibility: visible;
}
.toolbarMenu ul li.versions.open ul {
width: 250px;
}
div.toolbar_O .toolbarMenu ul li.open a {
color: #4594A5 !important;
}
div.toolbar_O .toolbarMenu ul li.open .moreArrow{
background: url(../images/interface/closearrow.gif) 3px 0 no-repeat;
}
/* top part of toolbar */
.toolbar_O .pageInformation {
padding: 6px;
height: 25px;
}
.toolbar_O .pageInformation .pageStatus {
color: #FFF;
font-size: 1.3em;
width: 170px;
float: left;
}
.toolbar_O .pageInformation .RHS {
float: right;
}
h4.statusLabel {
height: 100%;
display: inline;
text-transform: uppercase;
}
div.toolbar_O div.pageInformation .label,
div.toolbar _O div.userFunctions .label {
width: 75px;
float: left;
text-align: left;
}
div.toolbar_O div.pageInformation .value,
div.toolbar _O div.userFunctions .value {
font-weight: bold;
text-align: left;
float: right;
vertical-align: top;
width: 75px;
}
div.toolbar_O div.pageInformation .inputTextbox {
width: 80%;
}
/* bootom part of toolbar */
.toolbar_O .userFunctions {
padding: 8px 0;
height: 25px;
}
div.toolbar_O div.userFunctions div.btnRHS {
float: right;
margin: 0px 10px 0px 0px;
}
div.toolbar_O div.userFunctions .btnLHS {
float: left;
margin: 0px 0px 0px 10px;
}
div.toolbar_O div.userFunctions div.btnLHS a.btnHelp,
div.toolbar_O div.userFunctions div.btnLHS a.btnHelp:hover {
padding: 5px 5px 5px 25px;
margin: 1px 5px 0 0;
background: #e6f4f5 url(../images/interface/icon_help.gif) 3px 3px no-repeat !important;
float: left;
border: 1px solid #287e95;
text-decoration: none;
font-weight: bold;
color: #0a3b3f;
height: 12px
}
.toolbarMenu.pageActions {
float: left;
}
.toolbarMenu ol {
margin: 0;
padding: 0;
width: 320px;
height: 60px;
list-style: none;
}
.toolbarMenu ol li,
.toolbarMenu ol li a {
margin: 0;
padding: 0;
float: left;
width: 150px;
min-height: 8px;
display: inline-block;
border: none !important;
color: #0a3b3f !important;
font-size: 1.2em;
background: none;
}
div.toolbar_O div.toolbar_I a.pageNotes {
font-weight: bold;
color: #0a3b3f;
}
div.toolbar_O div.toolbar_I a.pageNotes:hover {
color: #FFF;
}
/* approve/reject btns */
div.toolbar_O div.userFunctions div.btnRHS a.btnApprove,
div.toolbar_O div.userFunctions div.btnRHS a.btnReject {
border: 1px solid #287e95;
border-bottom: 2px solid #06465f;
border-right: 2px solid #06465f;
text-decoration: none;
height: 12px;
padding: 5px 15px 5px 0;
background: #fffeff url(../images/interface/icon_approve.gif) 95% 3px no-repeat;
display: -moz-inline-box;
display: inline-block;
color: #0a3b3f;
}
div.toolbar_O div.userFunctions div.btnRHS a.btnApprove:hover,
div.toolbar_O div.userFunctions div.btnRHS a.btnReject:hover {
background-color: #135d82;
border: 1px solid #FFF;
border-bottom: 2px solid #06465f;
border-right: 2px solid #06465f;
color: #FFF;
}
div.toolbar_O div.userFunctions div.btnRHS a.btnReject {
background: #fffeff url(../images/interface/icon_reject.gif) 95% 3px no-repeat;
}
li.otherPageActions ul,
li.otherPageActions ul li{
margin: 0;
padding: 0;
list-style: none;
}
The link to my page is: crowncontainer.com/dev/activity_test.php you'll have to post the www. in front, i'm a new user and can't post URL???? I have validated both the CSS and the XHTML. If you open in IE, the width starts out at 200px, which is what I've defined in CSS. If you open it in Firefox, it is wider and I don't know why? Also - when you click on the submit button, the program will return data in an AJAX call and the data will load in a div directly underneath the form. When the data is returned in IE, the width of the left nav will increase to the same width that displays in Firefox. Because of this, I have to believe that there is some buggy code that causes it to 'sort of' work in IE but not in Firefox? Can someone take a stab at this and help me? I want to keep my left nav width to 200px; I am newbie in CSS but I do not want to surrender to use tables. In Explorer it is seen OK but is wrong in Firefox. Why? URL URL www.lekunberri.com/focesdelcamino/mapa.asp?id=31 There is div called "mapaaundi" with relative positioning that contains images as fragments of a map. Inside there are some images (arrows) of the class "boloaundi", with absolute positioning. I have previously tried something similar to this and works well. Thanks in advance! Hi, I'm still new to CSS and have been learning for the past couple of days now. I'm having trouble getting a two-column layout working correctly. Using the faux method, I have a background set so the right-column has a different background color. This works fine. But I'm having trouble placing the elements inside of the container to work correctly. When the left-column has more content than the right, instead of the container (and thus the background) moving to fit it, the column just extends down by itself. However if the right column has more content than the left, it works correctly. I think it might be because of the float: left, but I'm still new and not exactly sure what the problem is. The URL to view this is http://serve5.net/extend/ - the CSS is right in the source for you to look at. Could someone point me in the right direction as far as getting the left-column to extend down correctly? It seems to work fine in Internet Explorer - but I use Mozilla Firefox and it's having this issue. However, in Mozilla, the left-column's background extends to the border fine, but in IE, it overlaps it. What can I do to fix this also? Thanks. Hello, I'm working now on div layout that contains 3 sections (header, body, footer) in one centered wrapper with border (divs with background imgs). My problem is: - divs that are in fact borders (id="l_outerborder_b" and id="r_outerborder_b") don't stretch when main container (id="body_content_text") grows. Here is a html code: Code: <!--BEGIN TEMPLATE HEADER -->
<!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>
<link href="template.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="template.js" />
</head>
<body onload="onloadprocedures()">
<div id="main_container">
<div id="template_header">
<div id="tl_outerborder"></div>
<div id="t_outerborder"></div>
<div id="tr_outerborder"></div>
<div id="l_outerborder_h"></div>
<div id="header_content">
<div id="logo"><img src="img/logo.png" alt="" /></div>
<div id="slogan"><img src="img/slogan.png" alt="Centrum zdrowia" /></div>
</div>
<div id="r_outerborder_h"></div>
</div>
<!-- END TEMPLATE HEADER -->
<!-- BEGIN TEMPLATE BODY -->
<div id="template_body">
<div id="l_outerborder_b"></div>
<div id="body_content">
<div id="body_content_text">
<p>TEST</p>
</div>
</div>
<div id="r_outerborder_b"></div>
</div>
<!-- END TEMPLATE BODY -->
<!-- BEGIN TEMPLATE FOOTER -->
<div id="template_footer">
<div style="clear:both"></div>
<div id="l_outerborder_f"></div>
<div id="footer_content"></div>
<div id="l_outerborder_f"></div>
<div id="bl_outerborder"></div>
<div id="b_outerborder"></div>
<div id="br_outerborder"></div>
</div>
</div>
</body>
</html>
<!-- END TEMPLATE FOOTER -->
and CSS: Code: @charset "utf-8";
/* CSS Document */
body {
background-color:#FFFFFF;
font-family:Tahoma, Verdana, "Times New Roman", Arial;
font-size:12px;
}
a:link {text-decoration: none} /* unvisited link */
a:visited {text-decoration: none} /* visited link */
a:hover {text-decoration: none} /* mouse over link */
a:active {text-decoration: none} /* selected link */
#main_container {
position:relative;
margin:auto;
width:960px;
height:auto;
}
#template_header {
float:left;
position:relative;
width:960px;
height:300px;
}
#header_content {
float:left;
position:relative;
width:900px;
height:270px;
}
#logo {
width:310px;
height:130px;
position:relative;
float:left;
top:0px;
left:0px;
}
#slogan {
width:580px;
height:100px;
position:relative;
float:left;
top:0px;
left:0px;
}
#tl_outerborder {
float:left;
position:relative;
background-image:url(img/tl_outerborder.png);
width:30px;
height:30px;
}
#t_outerborder {
float:left;
position:relative;
background-image:url(img/t_outerborder.png);
width:900px;
height:30px;
}
#tr_outerborder {
float:left;
position:relative;
background-image:url(img/tr_outerborder.png);
width:30px;
height:30px;
}
#l_outerborder_h {
float:left;
position:relative;
background-image:url(img/l_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:270px;
}
#r_outerborder_h {
float:right;
position:relative;
background-image:url(img/r_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:270px;
}
#body_content {
float:left;
position:relative;
width:900px;
overflow:hidden;
}
#body_content_text {
float:left;
position:relative;
width:600px;
margin: auto;
overflow:hidden;
}
#l_outerborder_b {
float:left;
position:relative;
background-image:url(img/l_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:inherit;
}
#r_outerborder_b {
float:right;
position:relative;
background-image:url(img/r_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:inherit;
}
#l_outerborder_f {
float:left;
position:relative;
background-image:url(img/l_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:inherit;
}
#r_outerborder_f {
float:right;
position:relative;
background-image:url(img/r_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:inherit;
}
#template_body {
float:left;
position:relative;
width:960px;
overflow:hidden;
}
#bl_outerborder {
float:left;
position:relative;
background-image:url(img/bl_outerborder.png);
width:30px;
height:30px;
}
#b_outerborder {
float:left;
position:relative;
background-image:url(img/b_outerborder.png);
width:900px;
height:30px;
}
#br_outerborder {
float:left;
position:relative;
background-image:url(img/br_outerborder.png);
width:30px;
height:30px;
}
Thanks in advance for info how to stretch those doomed divs EDIT: Here is layout concept. URL hTTp://qsrc.pl/layout.jpg How can I fix a Div a set distance below another Div without a set height? 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 all, I'm trying to do a div at the bottom of the screen as being a fixed position but the problem with this it does not work in IE. So then how would i go about doing this? css Code: Original - css Code .footerBar { background-color:#CCCCCC; margin: 0 auto 0 auto; width:100%; height:40px; position:fixed; color:#FFFFFF; left:0px; bottom:0px; }
html Code: Original - html Code <div class="footerBar"> Hello World </div> <div class="footerBar"> Hello World </div> I am desperate. I think I found a bug in Firefox, and I'm not sure how to work around it. The following code works in everything (IE 8, Chrome, Safari, Opera) except Firefox (version 3.6.3). Am I doing something wrong, or is this a bug in Firefox? You can look what happens to the drop-down menu's on Menu 2 and 3 live by going to my site (deenfoxx dot com slash firefox-bug dot html). css Code: Original - css Code #main-nav { background-color: black; height: 40px; } #nav { position: relative; margin: 0; padding: 0; } #nav li { position: relative; float: left; display: table; width: 99px; height: 40px; border-right: 1px solid white; text-align: center; font-size: 10px; } #nav li:hover { background-color: darkred; } #nav a { display: table-cell; vertical-align: middle; line-height: 11px; font-weight: bold; text-decoration: none; color: #fff; } #nav li ul { position: absolute; padding: 0; background-color: gray; top: 40px; left: 0px; } #nav li ul li { width: 98px; border: 0; border-top: 1px solid white; } #main-nav html4strict Code: Original - html4strict Code <div id="main-nav"> <ul id="nav"> <li id="m1"><a href="#1">Main Menu 1</a></li> <li> <a href="#2">Main Menu 2</a> <ul> <li><a href="#2a">Sub-Category 1</a></li> <li><a href="#2b">Sub-Category<br/>with multiple lines</a></li> </ul> </li> <li> <a href="#3">Main Menu 3 with multiple lines</a> <ul> <li><a href="#3a">Sub-Category 2</a></li> </ul> </li> <li><a href="#4">Main Menu item which has a really long name on it</a></li> </ul> </div> <div id="main-nav"> The problem appears to be that "#nav li" happens to have position:relative; and a display:table; and "#nav li ul" is position:absolute;. Normally, absolute positioning requires its parent or ancestor position to be set, but when used with the table display, it doesn't work normally on Firefox--but it does on other browsers. Can someone help me with a workaround that does not involve altering the HTML? If I must, I will accept a workaround that requires changing the HTML, but I'll have to do some heavy duty recoding of Magento's core menu generation. Anyone that knows Magento knows I want to avoid that like the plague--my example is a very simplified version of the problem. Notice on NZBMatrix.com on the left hand side, it looks as if there were multiple boxes where normally just one navigation box would exist in a three-column layout. I already know how to do a three-column layout, but my question is, are there several different columns on the left of this website, or is it just one column with several sections defined by borders? Thank you for any advice. |
|||||||