|
CSS - Help: Collapsing Column
This is the first site I have attempted to layout using CSS and have ran into a slight problem that I can't figure out so I am looking to the expertise of others.
I have a layout that contains a sidebar (used for sub-nav) and a content area all inside of a wrapper. When there is content in the sidebar all is fine in IE and Firefox; however when I include no content in the sidebar IE looks fine but Firefox collapses the space where the sidebar was and begins the content there. Here are some of the links; Appearing correctly due to content in sidebar: http://www.jaycutler.com/Eumyotheria/the_program/the_program_index.html Appearing incorrectly due to no content in sidebar: http://www.jaycutler.com/Eumyotheria/contact/contact.html The CSS file can be found he http://www.jaycutler.com/Eumyotheria/css/stylesheet.css Any advice that can be offered would be greatly appreciated. Thank you for your time, Brian Similar TutorialsHi, I have a border around the content of my page which is limited in width but not height. Some of the pages have more content then others so the height adjusts. I also have a left column and a black background with and image in this column but I have 2 problems 1. In IE I can't seem to get this black column(div) to extend to the full height of the column so that it reaches the border. 2. In Firefox this left column extends all the way down the page and the border doesn't surround the text it sort of collapses The column is left floated and in a div and the content is right floated and in a div as well which is all surrounded by a div with a border. I would appreciate any help that you might offer. Thanks the contentWrapper div section collapse prematurely in mozilla, but displays fine in IE. Anyone know why? http://www.mgan.net/work/10-06-04/layout1.html Is there a css rule I don't understand in firefox that IE is overlooking? Hi I have site where I am forced to set my content div <div id="content"> min-height with jquery on each page.Site Link This is because the content div keeps collapsing and ignoring the content it has. Can someone teach me how to fix this please. I thought I had this worked out before with the help of this forum, but it seems to be back again! In IE 6 (and maybe others, who knows. I am running Ubuntu =/ ) there is a big gap between the top horizontal nav and the comic. http://www.jjsunshines.com/ Any help would be greatly appreciated! I'll even trade you php help! So... I have two versions of this page, one that validates, and another that doesn't. Problem is that the invalid one looks correct! This is because I got the css working before i discovered the invalid code... The offending code involves a nested ul in my nav. The invalid, looking good version looks like this: Code: <ul> li / li / <ul> li / li / </ul> li / </ul> To make it valid, I have to wrap li tags around the nested ul. I've spent gobs of time trying to figure out how to get my styles to work with this new code, but I must be missing something very simple. Here are the urls: invalid & valid Here's the css: Code:
#nav {
width:180px;
background-image:url(/images/moraga_logo.png);
background-repeat:no-repeat;
float:left
}
#nav ul.l1 {
width:179px;
position:relative;
top:100px;
margin:0;
padding:0;
}
#nav ul.l2 {
width:179px;
margin:0;
padding:0;
}
#nav ul.l1 li {
list-style:none;
border-top:1px solid #FFFFFF;
height:21px;
font-family:geometric, lucida, verdana, sans-serif;
font-size:.8125em;
font-weight:normal;
text-transform:uppercase;
letter-spacing:.125em;
text-align:right
}
#nav ul.l2 li {
text-transform:lowercase;
border:none;
font-size:.6875em;
}
#nav li.active a {
color:#A22B38;
text-decoration:none
}
#nav li.active a:hover {
color:#FFFFFF;
text-decoration:none
}
#nav a:link {
color:#000000;
text-decoration:none
}
#nav a:visited {
color:#000000;
text-decoration:none
}
#nav a:hover {
color:#FFFFFF
}
#nav a:active {
color:#000000;
text-decoration:none
}
Thank, in advance, for your generous help! -BBD I am just being scripting and have been messing with this problem for several hours and still have gotten no where at all so I was hoping for some assistance. I am attempting to make my stacked links open upon mouseover to display all the sublinks beneath the main ones and then close one the mouse is moved away from that area. I have the main ones working, as that is easy, it is those others that have me stumped. I am using outset and inset boarders to make it appear as if a drawer is being pulled out to reveal the sub-links. Any advice would be great, thank you. Hi. Please see the code below. I basically have a two column layout placed inside a container div(id="productDiv"). Each column is floated left, followed by an empty div that is set to clear:both. However, the productDiv collapses over the floated divs in Mozilla. It works as expected in IE. If I place a border on productDiv, it will expand as desired. This seems like buggy behavior for Mozilla. Has anyone ever seen this? Code:
<!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>Testpage</title>
<style type="text/css">
body{
background-color: #eeeeee;
color: #000000;
margin: 20px auto auto auto;
}
#content{
position: relative;
background-color: #ECEADD;
font-size: 8pt;
padding: 0;
}
#productDiv{
position:relative;
margin-left: 12em;
background-color: #00ff00;
/*border: 1px solid black;*/
padding:0;
}
#category{
position:relative;
color:#000000;
font-size: 18pt;
margin: .5em 0 .5em 0;
}
#productInfoLeftCol{
position: relative;
float: left;
}
#productImage{
position: relative;
height: 360px;
width: 310px;
display:block;
}
#productInfoRightCol{
position:relative;
float: left;
margin-left: 1em;
}
.clearer{
clear:both;
}
</style>
</head>
<body>
<div id="content">
<div id="productDiv">
<h2 id="category">Category</h2>
<div id="productInfoLeftCol">
<img id="productImage" src="http://www.google.com/intl/en/images/logo.gif" alt="Some Product Image"/>
some text here
</div>
<div id="productInfoRightCol">
rightcol
</div>
<div class="clearer"></div>
</div>
</div>
</body>
</html>
Hi all, I am trying to collapse columns on double click by changing the style visibility of a col class from visible to collapse. Nice idea idea but it is not supported on IE and , although Firefox claims it does, with Firefox doesn't work either. sooo, do you know of any alternative to using the collapse thingie? 'hidden' is not an option as it leaves the space of the column on the table layout. I am checking the display prop now but I am not understanding it very well if it's a solution for me. many thanks in advance. Or really in this case their not collapsing like the should be. I have extra white space above each heading link in the gallery: http://www.sonicparke.com/skydev/gallery/ I'm also guessing that the same issue is causing the whitespace above the single column pages across the site like these: http://www.sonicparke.com/skydev/about.php http://www.sonicparke.com/skydev/about.php But it's weird that it's not happening on these: http://www.sonicparke.com/skydev/news.php I know that the zen.css file is a mess but I plan on cleaning it up a little later once I've worked through figuring out what I need and don't need. Maybe that's part of my problem but I'm still having the issue on the single column pages which don't even use the zen.css stylesheet. Thanks for the help. Hi, I want to make something that works like this: dhtmlgoodies.com/scripts/slidedown-menu2/slidedown-menu2.html# (cant post proper urls as I'm new) Whereby each link has a number of sub-links under it, and when you click a main link, the sub links for the previous one shut and the new one opens. But the tutorial on that site is not much help. It just gives you a load of code to copy into your editor, and when I've done that it didn't work anyway. Could someone point me in the direction of a tutorial to do this or let me know what I should be doing, as I can't seem to find anything on how to do it. Thanks! Hi I am trying to make a table to display some stuff within a fix sized window. I want to have 5 columns of fixed width and one column that spans the rest of the remaining space. The Idea is to allow the widths of the first 5 columns to be changed by a script and having the last one adapting as needed... html Code: Original - html Code <div class="container"><table cellspacing="0"> <colgroup> <col width="40" /> <col width="220" /> <col width="120" /> <col width="65" /> <col width="40" /> </colgroup> <thead> <tr> <th>A</th> <th>B</th> <th>C</th> <th>D</th> <th>E</th> <th style="width: 100%;></th> </tr> </thead> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td style="width: 100%;></td> </tr> </tbody> </table></div> <div class="container"><table cellspacing="0"> <colgroup> <col width="40" /> <col width="220" /> <col width="120" /> <col width="65" /> <col width="40" /> </colgroup> <thead> <tr> <th>A</th> <th>B</th> <th>C</th> <th>D</th> <th>E</th> <th style="width: 100%;></th> </tr> </thead> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td style="width: 100%;></td> </tr> </tbody> </table></div> css Code: Original - css Code div.container { height: 400px; width: 800px; overflow: scroll; } table { width: 100%; } td { border-style: solid; border-color: silver; border-width: 0px; padding: 1px 3px; } th { border-style: outset; border-color: silver; border-width: 2px; background: silver; padding: 1px 3px; }
It really does fill the entire space but the last column crushes all the other into their minimal width resulting in linebreaks between words inside the cells... Please help me Hi all, I've tried searching around for this issue, but I've not found any help so far and it's driving me nuts. I hope someone here can advise. This is an abridged version of the site's code for example: Code: <style type="text/css">
<!--
#main1 {
padding: 0px;
margin: 0px;
}
#left {
width:260px;
margin:0;
padding:0;
float: left;
}
#left-top {
background-image: url(../images/panel-top-left.gif);
background-repeat: no-repeat;
background-position: center top;
height: 16px;
margin: 0px;
padding: 0px;
}
#left-middle {
background-image: url(../images/panel-middle-left.gif);
background-repeat: repeat-y;
padding-right: 20px;
padding-left: 20px;
padding-bottom: 2px;
}
#left-bottom {
background-image: url(../images/panel-bottom-left.gif);
background-position: center;
height: 18px;
}
#logo {
background-image: url(../images/swalingslogo.gif);
background-position: center top;
width: 260px;
height: 120px;
background-repeat: no-repeat;
}
/* Navigation List */
#navlist
{
padding-left: 0;
margin-bottom:10px;
width: 217px;
}
#navlist li
{
list-style: none;
margin-bottom:4px;
padding: 0;
font-size:1.2em;
line-height:1.8em;
width:217px;
height:32px;
background-image:url(../images/nav2.gif);
background-repeat:no-repeat;
margin-top: 0;
margin-right: 0;
margin-left: 0;
}
#navlist li a:link, #navlist li a:visited {
display:block;
text-decoration: none;
color:#039;
width:207px;
height:32px;
font-weight:bold;
padding-top: 2px;
padding-right: 5px;
padding-bottom: 2px;
padding-left: 5px;
}
#navlist li a:hover {
text-decoration: none;
color:#FF6600;
}
/* Testimonials */
div#fscroller {
width:200px;
height:200px;
background-image:url(../images/bg-testimonials.gif);
background-repeat:no-repeat;
margin-left:8px;
}
div#fscroller p {
margin-left: 10px;
margin-right: 10px;
margin-top: 10px;
margin-bottom: 5px;
}
/* Middle Column */
#middle {
margin-top: 0;
margin-right: 0px;
margin-bottom: 0;
padding-right: 0px;
padding-left: 0px;
padding-top: 0px;
text-align: justify;
margin-left: 260px;
}
#middle #top-left {
background-image: url(../images/panel-top-rightleft.gif);
height: 16px;
font-size: 2px;
background-repeat: no-repeat;
}
#middle #top-right {
float: right;
margin-top: -16px;
background-image: url(../images/panel-top-rightright.gif);
height: 16px;
width: 20px;
font-size: 2px;
}
#middle a {
color: #003399;
}
#middle a:hover {
text-decoration: none;
}
/** Country Titles **/
#middle h2#unitedkingdom {
background-image: url(../images/title-unitedkingdom.gif);
background-repeat: no-repeat;
height: 26px;
width: 201px;
margin-bottom: 6px;
}
#middle h2#antigua {
background-image: url(../images/title-antigua.gif);
background-repeat: no-repeat;
height: 26px;
width: 128px;
margin-top: 16px;
margin-bottom: 6px;
}
/* Minisite Links */
div.minisite {
float: left;
}
div.minisite span {
display: none;
}
div.minisite a {
background-position: top;
background-repeat: no-repeat;
height: 168px;
width: 190px;
display: block;
}
div.minisite a:hover {
background-position: bottom;
}
a#minisite-swimminglessons {
background-image: url(../images/swimming-lessons-uk.jpg);
}
.clear {
clear:both;
}
.hidden {
display: none;
}
.notopgap {
margin-top: 0;
}
.nobottomgap {
margin-bottom: 0;
}
.inside {
background: #EFEFEF;
padding-left: 10px;
padding-right: 10px;
}
-->
</style>
<div id="main1">
<div id="left">
<!-- Logo -->
<div id="logo"></div>
<div id="left-top"></div>
<div id="left-middle">
<!-- Navigation -->
<!--#include file="../inc/nav2.asp" -->
<!-- Testimonials -->
<!--#include file="../inc/testimonials.asp" -->
<!--#include file="../inc/special-offers.asp" -->
</div>
<div id="left-bottom"></div>
</div>
<!-- Middle Column -->
<a name="skipnav" class="hidden"></a>
<div id="middle">
<div class="top-left"></div><div class="top-right"></div>
<div class="insideleft"><div class="insideright"><div class="inside"><div class="gap-saver"></div>
<!-- UK Sites -->
<h2 id="unitedkingdom"><span class="hidden">United Kingdom</span></h2>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swimming Lessons</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Training</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Residential Courses</span></a></div>
<div class="clear"></div>
<!-- Antigua Sites -->
<h2 id="antigua"><span class="hidden">Antigua</span></h2>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Soccer</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Parties and Events</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings International School of Swimming</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Babysitting and Nanny Agency</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings School of Rugby</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings School of Volleyball</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Training</span></a></div>
<div class="clear"></div>
<div class="gap-saver"></div>
</div></div></div>
<div class="bottom-left"></div><div class="bottom-right"></div>
</div>
<!-- End Middle Column -->
</div>
I've placed the Country Title in an H2 tag, then beneath that, each anchor is enclosed in a DIV, and is set as a left-floated block. Then I placed a spacer DIV (clear: both) to create a new line, then repeated with H2 and links. This all works fine in Firefox, IE7 and Opera, but of course IE6 is being a pig as usual. The spacer DIV is pushed to sit alongside the bottom of the left column, and I can't figure out how to (or if I can) stop this. I can't add in links properly, so I hope this is acceptable under the rules -- The site in question is: www.swalings .com/swalings/index4.asp and here's a screenshot of IE6 behaviour: www.swalings .com/images/swalings-ie6-troubleshoot.jpg Hopefully that's enough information to go on, please let me know if there's something I missed out. Thanks a lot! Rob Hey, So I have a three column layout being implemented as such: html: Code:
<div class="content">
<div class="col1 column"></div>
<div class="col3 column"></div>
<div class="col2 column">
<div class="header">Header</div>
</div>
</div>
CSS: Code:
.column {
padding: 10px;
position:relative;
}
.header {
background:#cfe6f5;
color:#416383;
font-size:11px;
font-family:Arial;
font-weight:300;
padding-left:15px;
}
.col1 {
float: left;
width:250px;
}
.col2 {
margin-left: auto;
margin-right: auto;
}
.col3 {
float:right;
width:250px;
}
The problem is that the width of the header div extends all the way to the left and right of the page when it's in the middle column, but behaves the way I want it to (extends to the left and right of the column) when it's in the left or right column. Any ideas? Thanks. --Surgery Question title: A 2 column layout, let only the second column scroll horizontally and let them both scroll vertically Hello I did try several idea's, but all failed. Then I did search the web but found a list of > 400.000 in google. If someone is willing to tell me if it is possible and give me some directions, please do. Everything is welcome. I got a list with 3 columns ( basically you could say I have only two columns because 2-3 could be concatenated to together, but they have a different style and justification, but I could live to start with a two column sample) f.e line 1 : value_one - ( some_text - value_two (right justified) ) line 2 : value_one - ( some_text - value_two (right justified) ) line 99:.... e.t.c Column one has a fixed width of 32px. 'some text' can be longer then the wide available and value_two is with 3 spaces appended to column 2. I want that column one is fixed horizontal and that the second and the third column can scroll horizontally. Of course when there are more line's then the height of the container is should be posable to scroll vertically. Finally I need the color behind column one be different then the column 2 and 3. So what I did create is a container with two containers where the left one has a different colour then the right one and above those a container with the list. I have overflow on auto, so I get scroll-bars when necessarily. But my problem is that when I scroll horizontally that my first column scrolls away to the left. Basically my question is. How can I get a 2 column layout, let only the second column scroll horizontally ( first is locked in horizontal place ) and let them scroll both vertically? Everyone knows about collapsing margins, but not everyone knows that inline blocks never collapse. So it would appear that IE treats tables as block elements (so margins collapse) and firefox treats them as god-knows-what (but akin to inline elements - so they do not collapse). Now, whether its right or wrong, I want the firefox behaviour - so I tried to display the tables as inline. This fixes IE.... but breaks firefox - the tables "loose" their width parameter so they don't display with correct widths. Does any CSS guru know a nice solution to this dilema (I know a couple of dirty solutions). To elaborate further on what is going in: There are a number of tables one after the other in the normal flow of the document that need to be seperated by certain margins. can i make my left column, the same height as my right column? or infact, if the left is taller than the right, the right extends to it and if the right is taller than the left the left extends to it? is this possible, cheers heres my css: left column, is #leftNav and the right column is #contentMain PHP Code: #content { margin:0px auto; padding: 0; width: 760px; } #contentMain { padding: 0; margin: 0; float: right; width: 632px; } #leftNav { color: #000; float: left; margin: 0; padding: 0; width: 128px; } Hello, I am having difficulty with the center column on the following page: http://cbo4edu.org/index2.html I want to widen the center column so that the CBO NEWS heading touches the blue line which divides the center and right column. When I try to add width to the style sheet the left column moves out of alignment. Any help is much appreciated, thanks! 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. |
|||||||