CSS - Nesting Floats - Haslayout

Hi all

I'm stumbling over the oddities of IE's hasLayout again and again, and often I can fix it using the properties overflow:auto and display:inline-block:

Code:

div#container {
  overflow: hidden; /* For clearing floating inner elements */
  display: inline-block; /* For regarding margins of inner elements etc. */
}

(Of course I only assign the display value to IE only.)

As far as I could see so far, assigning these properties does not affect the expected behavior of the element in any negative way.

Now I thought: why not assign them to all div elements as default?

Code:

div {
  overflow: auto;
  display: inline-table;
}

I didn't test this yet, but as long as the whole website's other CSS and the whole XHTML structure are clean (speak: the elements are only used for purposes they are intended to be used), this shouldn't have any negative consequences, should it?

Thanks for your opinion,
Josh

hey!

I am having trouble putting a footer on a website because for some reason 2 of my divs are not sticking in the larger 'content' box. I think it has to do with the float definition but cant seem to figure it out.

Here is the basic structure i have. is this wrong?
Code:

<div wrapper>
       <div header>
                <div logo></div>
                <div menu></div> 
      </div>       
      <div content>
                 <div splash></div>
                 <div float left> </div>
                 <div float right></div>
      </div>
</div>

The issue is that <float left> and <float right> are not staying inside the <content> div and my footer ends up in the middle of the page. I wish i could post the webpage but im a new user.

Thanks for your help

Hey.

While I know some basics of css and html, I generally get bored after the design process lol, so have very little experience actual coding.

Basically this is what the end product im looking is forl

img266.imageshack.us/img266/8638/helpjj1.jpg

The only problem is, I have no idea how to nest (?) that in there, with the text in there as well.

I'm also looking for it to stay in the middle on the right there, with the box going larger or smaller.


Heh... I would appreciate it soooo much is someone could point me in the right direction. Thanks for your time

Tom

hi!
please can some one help me with followin...
i would like to have 2 blocks in line (like one row, 2 colums). First one (left one) have background which is 285px wide. i tried with 2 divs like this:

<div style="display:inline; width:285px ; background-image: url(bg.gif);">left content</div>
<div style="text-align:right; display:inline; width:200px>right content</div>

and IE renders it ok (for me) but firefox ignores "width" of divs and outputs "right content" right after "left content" text.
thanks in advance!!

Tomislav

Hi all

I'm learning how to do things in DIVs rather than tables. One thing I'm slowly realising is that DIVs don't naturally nest like tables do.

Please see he http://www.mitya.co.uk/csstest

As you can see the master DIV (grey border) doesn't surround the inner DIVs naturally as a table would. Presumably this isn't the nature of DIVs and I just have to set heights instead?

Thanks in advance

Basically, what i'm trying to work out is if the following is possible.

Code:

.mainBodyColor {
background-color : #FFFFFF ;
color: #000000;
}

.mainBodyFont10pt {
font-size: 10pt;
<mainBodyColor>
}

.mainBodyFont14pt {
font-size: 14pt;
<mainBodyColor>
}

where <mainBodyColor> is a nested call to the style in some way.

etc etc etc

How do i go about nesting/including the mainBodyColor styling within the mainBodyFont10pt style?

I know that the following doesn't work

Code:

<font class="mainBodyFont10pt" class="mainBodyColor ">
Some text to go in here</font>

What I'm trying to do is have in one place the colour and include it into many styles, so if i want to change the colour scheme of the site i just have to change it in one spot and i know that the whole site will change.

Thanks in advance.

This is driving me crazy and I can't figure it out. I have a "content" div that is a container for 2 other div's (a sidebar and a main content area). For some reason it isn't rendering in the proper place; it's rendering at the top of the page instead of under the navigation (if I don't assign a height to it it doesn't render at all). It also isn't extending past the end of the other 2 div's to reach the footer. I have tried adding overflow hidden to it but it just makes the other 2 divs not render at all. Any help is greatly appreciated.

Here is the HTML and the CSS is below it.

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSS Portal - Layout Generator</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
 <div id="wrapper">
    <div id="header">
		 
		       <p>This is the Header</p>		 
			   
	 </div><!-- /#header -->
 	 <div id="navigation">
		 <ul>
			<li><a href="#" >Home</a></li>
			<li><a href="#" >About</a></li>
			<li><a href="#" >Contact</a></li>
			<li><a href="#" >Links</a></li>		 
		 </ul>		 
	 </div><!-- /#navigation -->
	 <div id="content">
		 <div id="leftcolumn">
			<div class="box_blue">
				<div class="box_header_blue">Hello, World!</div><!-- /.box_header_blue -->
				<div class="box_content_blue">
		 			<ul>
						<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
						<li>Aliquam scelerisque eros at est lobortis eget adipiscing felis sodales.</li>
						<li>Sed faucibus hendrerit ante, vitae volutpat tellus suscipit sit amet.</li>
						<li>Quisque rutrum arcu non ipsum fringilla dapibus.</li>
						<li>Aliquam aliquam arcu sit amet nisi viverra facilisis.</li>
					</ul>
				</div><!-- /.box_content_blue -->
		 	</div><!-- /.box_blue -->
		 </div><!-- /#leftcolumn -->
		 <div id="main">
		      
			  <p>This is the main content</p><br /><br /> 
              <p><a href="layouts/121836.htm">

              <img border="0" src="layouts/html.png" width="16" height="16"> HTML File</a></p>
              <p><a href="layouts/121836.css">
              <img border="0" src="layouts/css.png" width="16" height="16"> CSS File</a></p>
	          <p>To download, right click and choose 'Save Target as...'</p>
	          <p>&nbsp;</p>
	          <p>If you use one of these layouts, please consider linking to CSS Portal.<br />
                http://www.cssportal.com</p>
                
              
	          		 
		 </div><!-- /#main -->
	 </div><!-- /#content -->
	 <div id="footer">
		       
			   <p>This is the Footer</p>		
			    
	 </div><!-- /#footer -->  
 </div><!-- /#wrapper -->
</body>
</html>

Code:

* { padding: 0; margin: 0; }

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

a{
	text-decoration: none;
	color: inherit;
	}
	
ul {
	list-style: none;
	}

body {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 13px;
 background: url('images/bg.png') fixed;
}

p {
 padding: 10px;
}

#wrapper { 
 margin: 0 auto;
 width: 1000px;
}

#header {
 color: #333;
 height: 200px;
 background: url('images/header.png') fixed;
}

#footer { 
 height: 100px;
 clear: both;
 color: #333;
 background: #6B6659;
}

#navigation {
 float: left;
 width: 1000px;
 height: 35px;
 color: #333;
 background: #6B6659;
 background: #b5bdc8; /* old browsers */
 background: -moz-linear-gradient(top, #b5bdc8 0%, #828c95 36%, #28343b 100%); /* firefox */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b5bdc8), color-stop(36%,#828c95), color-stop(100%,#28343b)); /* webkit */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5bdc8', endColorstr='#28343b',GradientType=0 ); /* ie */
 line-height: 35px;
}

#navigation li {
	display: inline;
	float: left;
	padding: 0 10px;
	color: #dddddd;
	}

#content {
	background: #f6f9fa repeat;
	color: #545454;
	margin: 0 auto;
	box-shadow: 2px 0px 3px rgba(0,0,0,.8), -2px 0px 3px rgba(0,0,0,.8);
	 -moz-box-shadow: 2px 0px 5px rgba(0,0,0,.8), -2px 0px 5px rgba(0,0,0,.8);
	 -webkit-box-shadow: 2px 0px 3px rgba(0,0,0,.8), -2px 0px 3px rgba(0,0,0,.8);
	 position: relative;
	} 

#leftcolumn { 
 color: #333;
 background: #EBE3CD;
 width: 200px;
 float: left;
 padding: .5em;
}

#main { 
	color: #333;
	background: #fff;
	width: 770px;
	float: right;
	padding: 8px;
}

.box_blue {
	-moz-border-radius: 1.2em 1.2em 1.2em 1.2em;  
	-moz-box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.6); 
	margin: 1.6em 0;
}

.box_header_blue {
	background-color: rgb(23, 71, 115); 
	color: rgb(255, 255, 255); 
	font-weight: bold; 
	line-height: 3em; 
	text-align: center; 
	font-size: 1.2em; 
	-moz-border-radius-topleft: 1.2em; 
	-moz-border-radius-topright: 1.2em; 
	border-right: 1px solid rgb(0, 0, 50); 
	border-width: 1px; border-style: solid; 
	border-color: #86B1E3 rgb(0, 0, 50) rgb(0, 0, 50); 
	text-shadow: 1px 1px 1px rgb(16, 16, 16); 
	background-image: -moz-linear-gradient(center top , rgb(45, 90, 141), rgb(71, 93, 167) 50%, rgb(43, 75, 128) 51%, rgb(45, 93, 138));
	}
	
.box_content_blue {
	padding: .5em;
   background: -moz-linear-gradient(top, #f1f1f1, #fff 75%) #fff;
	display: inline-block; 
	border-right: 1px solid rgb(0, 0, 50); 
	border-width: 1px; 
	border-style: solid; 
	border-color: rgb(152, 208, 237) rgb(0, 0, 50) rgb(0, 0, 50); 
	-moz-border-radius-bottomleft: 1.2em;
	-moz-border-radius-bottomright: 1.2em;
	}
	
.box_content_blue li {
	padding: 10px 0;
	border-bottom: 1px dotted #cccccc;
	}

I'm having a problem with the way my div tags are behaving in a page I am trying to build. I have all the div's nested properly (I think) but the problem is is that the footer is appearing right below the top banner. The footer is not nested in the div that contains the rest of the pages content it appears behind everything else actually. I have been messing with my style sheet and moving everything around to no avail. For some reason the div that contains all the content has a height of zero when it shouldn't. I have used similar page structure before on other pages but this is the first time im using two columns of free floating boxes as opposed to one solid column divided in two. I'm leaving the style sheet and the mark up below if you can figure it out that would be great. There is only one image and it shouldn't have anything to do with this problem. I will be eternally grateful to whoever can help me as this has made me seriously consider hitting my computer with a brick.

Code:

// here's the stylesheet
body{ 
	background: url('../images/mainbackground.jpg/') repeat fixed;
	font-family: calibri, helvetica, 'sans serif';
	line-height: 130%;
	margin: 0px;
	padding: 0px;
	}
	
#banner{ 
	background: #b34150 repeat-x 50% 100%;  
	border-bottom: 3px solid white;
   padding: 0px 0px 0px 0px;
	margin: 0px 0px 27px 0px;
	height: 100px;
	}
		
#nav{
	float: right;
	height: 100px
	width: 90px;
	margin: 0 auto;
	padding:0;
	}
	
#nav ul{
	list-style: none;
	display: inline;
	line-height: normal;
	}
	
#nav li{
	background: #b34150;
	float: left;
	margin: 65px 10px 0px; 
	padding: 5px 20px 0px;
	-moz-border-radius:0px;
	-webkit-border-radius:0px;
	width: 50px;
	height: 30px;
	text-align: center;
	font-size: 14pt; 
	}
	
#nav li a{
	text-decoration: none;
	color: white;
	font-weight: bold;
	text-shadow: 0px 3px 3px #000;
	}
	
#nav li:hover{
	background: #ec9aa5;
	-moz-border-radius:0px;
	border: 0px solid #eccdcd;
	-moz-box-shadow: 0px 0px 35px #fff;
	}
	
#content{
	width: 900px;
	margin: 0 auto;
	background: none no-repeat;

	}
	
#left_column {
	float: left;
	width: 700px;
	margin: 0 auto;
	}
	
#main{
	background: url('../images/banner-back-top.jpg/') repeat-x top center #fff;
	-moz-border-radius:0px;
	-webkit-border-radius:0px;
	-moz-box-shadow: 3px 3px 3px #888;
	-webkit-box-shadow: 3px 3px 3px #888;
	width: 650px;
	padding: 8px 5px;
	float: left;
	}
	
#right_column {
	float: right;
	width: 175px;
	margin: 0 auto;
	}
	
#sidebar{
	background: #fff;
	-moz-border-radius:0px;
	-webkit-border-radius:0px;
	-moz-box-shadow: 3px 3px 3px #fff;
	-webkit-box-shadow: 3px 3px 3px #fff;
	width: 175px;
	margin: 0 auto;
	padding: 8px;
	float: left;
	}
	
#footer{
	background: #b34150 repeat-x 50% 100%;  
	border-bottom: 3px solid white;
   padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	height: 100px;
	}
	
#footer_info {
	background: #91323f;
	text-align: left;
	font: normal normal normal 75%/normal calibri, helvetica, sans-serif;
	color: white;
	float: left;
	}

//And here is the mark up
<html>
<head>
<title>SL | Clothing</title>
<meta name="description" content="description" >
<link rel="stylesheet" type="text/css" href="resources/style.css">
<script type="text/javascript" src="resources/dropdown.js" ></script>
<link rel="canonical" href="">
</head>
<body>
 <div id="banner"><img src="images/top.jpg" alt="" >
  <div id="nav">
   <ul>
    <li style="background: #ec9aa5;"><a href="">Home</a></li>
    <li><a href="" >Shirts</a></li>
    <li><a href="" >Hats</a></li>
    <li><a href="" >About</a></li>
    <li><a href="" >Contact</a></li>
   </ul>
  </div>
 </div>
 <div id="content">
  <div id="left_column">
   <div id="main">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec urna nunc. Etiam eleifend massa sed orci bibendum iaculis. Donec pharetra mauris vitae odio porta pretium. Sed cursus lorem quis risus laoreet posuere vitae a turpis. Etiam porttitor venenatis velit, a interdum quam mattis vel. Donec in tortor sed felis commodo blandit. Integer vel mauris odio, tincidunt dapibus magna. Sed orci libero, dapibus ac bibendum vel, fermentum a augue. Cras lobortis viverra massa ac placerat. Praesent id lectus ante, sed volutpat felis. Fusce eget dolor a est pellentesque pharetra. Praesent malesuada, ligula at interdum consequat, nunc magna sagittis risus, id pellentesque libero ante id nisl. Fusce pretium, turpis sit amet ornare congue, metus nunc mollis dui, quis cursus tortor est eu lorem. Duis id erat erat. Aliquam eu nunc vel sem scelerisque venenatis in nec diam. Praesent tincidunt, mauris ut sollicitudin tincidunt, augue nunc condimentum tortor, sed tincidunt velit risus vel nisl. Vestibulum tincidunt consectetur libero, aliquet consectetur nulla hendrerit a.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec urna nunc. Etiam eleifend massa sed orci bibendum iaculis. Donec pharetra mauris vitae odio porta pretium. Sed cursus lorem quis risus laoreet posuere vitae a turpis. Etiam porttitor venenatis velit, a interdum quam mattis vel. Donec in tortor sed felis commodo blandit. Integer vel mauris odio, tincidunt dapibus magna. Sed orci libero, dapibus ac bibendum vel, fermentum a augue. Cras lobortis viverra massa ac placerat. Praesent id lectus ante, sed volutpat felis. Fusce eget dolor a est pellentesque pharetra. Praesent malesuada, ligula at interdum consequat, nunc magna sagittis risus, id pellentesque libero ante id nisl. Fusce pretium, turpis sit amet ornare congue, metus nunc mollis dui, quis cursus tortor est eu lorem. Duis id erat erat. Aliquam eu nunc vel sem scelerisque venenatis in nec diam. Praesent tincidunt, mauris ut sollicitudin tincidunt, augue nunc condimentum tortor, sed tincidunt velit risus vel nisl. Vestibulum tincidunt consectetur libero, aliquet consectetur nulla hendrerit a.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec urna nunc. Etiam eleifend massa sed orci bibendum iaculis. Donec pharetra mauris vitae odio porta pretium. Sed cursus lorem quis risus laoreet posuere vitae a turpis. Etiam porttitor venenatis velit, a interdum quam mattis vel. Donec in tortor sed felis commodo blandit. Integer vel mauris odio, tincidunt dapibus magna. Sed orci libero, dapibus ac bibendum vel, fermentum a augue. Cras lobortis viverra massa ac placerat. Praesent id lectus ante, sed volutpat felis. Fusce eget dolor a est pellentesque pharetra. Praesent malesuada, ligula at interdum consequat, nunc magna sagittis risus, id pellentesque libero ante id nisl. Fusce pretium, turpis sit amet ornare congue, metus nunc mollis dui, quis cursus tortor est eu lorem. Duis id erat erat. Aliquam eu nunc vel sem scelerisque venenatis in nec diam. Praesent tincidunt, mauris ut sollicitudin tincidunt, augue nunc condimentum tortor, sed tincidunt velit risus vel nisl. Vestibulum tincidunt consectetur libero, aliquet consectetur nulla hendrerit a.</p>   
   </div>
  </div>
  <div id="right_column">
   <div id="sidebar">
    Content Goes Here!
   </div>  
  </div>
 </div>
 <div id="footer">
  <div id="footer_info">Copyright 2010 SL CLothing LLC. Web Design and Layout by : Ian Auld</div>
 </div>
</body>
</html>

Hi all - This is a continuted discussion from this thread. I won't bother re-explaining, but I'm restarting this thread in the hopes to simplify the situation.

I have to write out data from Coldfusion in columns rather than rows. This is a schedule with Time down the left side and Days across the top. In order to get this to display correctly, I'm using a nested tables method I found on goolge. Each Row is actually a Table within a table, where the nested table acts as a data cell, and the cells in the outer table are columns.

In all my fiddling, I've ended up stumped with the following. I need this to display correctly in at least IE 5.5 and up, Netscape 7, and Firefox.

A condensed version of the output is included below. Note that the tables do not end lined up. I need to be able to scale everything up or down and have it all line up (thus, everything is EMs).

I originally tried to work with css borders, but found that it was even worse with that - i.e. each top or bottom border was adding pixels to the height of the cells, so where one row would have five items, it would appear "shorter" than another row with 10 items.

I also tried using pixels throughout the script. I CAN get it to work when I do this, where everything lines up correctly, but I can't get it to scale!

I have since moved to using an image at the top of each data output. Its closer, but still doesn't line up. The image is nothing more than a 1 pixel high gif - Just like this one. As you move down, they get further and further out of sync of the left most column.


How can I get this working? I really don't understand CSS well enough, especially across browsers, in order to finish this. Again, here is the 1pixel high gif I used for the following code.


Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
<!--
TABLE {
	padding: 0em;
	font-size: .9em;
	width: 9em;
}
TABLE.time-header {
    table-layout: fixed;

}
TABLE.time {
    table-layout: fixed;
}
TABLE.data {
    table-layout: fixed;
}
TD {
	vertical-align: top;
}
DIV {
    overflow: hidden;
}
-->
</style>
</head>

<body>
<table cellpadding="0" cellspacing="0">
  <tr>
        <td> 
          <table class="time-header" style="border-top:1px solid black; border-left:1px solid black; border-right:1px solid black;" cellpadding="0" cellspacing="0">
            <tr>
		      <td>
			    <div style="height: 1em;"> 
			    </div>
		      </td>
		    </tr>
          </table> 
        </td>

        <td> 
          <table class="time-header" style="border-top:1px solid black; border-left:1px solid black; border-right:1px solid black;" cellpadding="0" cellspacing="0">
            <tr>
		      <td>
			    <div style="height: 1em;">Monday 6/27
			    </div>
		      </td>
		    </tr>
          </table> 
        </td>

        <td> 
          <table class="time-header" style="border-top:1px solid black; border-left:1px solid black; border-right:1px solid black;" cellpadding="0" cellspacing="0">
            <tr>
		      <td>
			    <div style="height: 1em;">Tuesday 6/28
			    </div>
		      </td>
		    </tr>
          </table> 
        </td>
  </tr>

  <tr>
    <td> 

      <table class="time" style="border-left:1px solid black; border-right:1px solid black;" cellpadding="0" cellspacing="0">
	    <tr><td>
			<div style="height: 2em;">
			  <div  style="height: .1em;">
			    <img src="table-horiz.gif"><br>
			  </div>
		          09:00 AM
			</div>

			<div style="height: 2em; "></div>
          
			<div style="height: 2em;">
			  <div  style="height: .1em;">
			    <img src="table-horiz.gif"><br>
			  </div>
		          09:30 AM
			</div>
        
			<div style="height: 2em; "></div>

			<div style="height: 2em;">
			  <div  style="height: .1em;">
			    <img src="table-horiz.gif"><br>
			  </div>
		          10:00 AM
			</div>

			<div style="height: 2em; "></div>

			<div style="height: 2em;">
			  <div  style="height: .1em;">
			    <img src="table-horiz.gif"><br>
			  </div>
		          10:30 AM
			</div>
			
			<div style="height: 2em; "></div>

			<div style="height: 2em; border-bottom: 1px solid black;">
			  <div  style="height: .1em;">
			    <img src="table-horiz.gif"><br>
			  </div>
		          End
			</div>
        
	    </td></tr>
      </table> 

    </td> 

    <td>
      <table class="data" style="border-left:1px solid black; border-right:1px solid black;" cellpadding="0" cellspacing="0">
	    <tr><td>
			<div style="height: 8em;">
			  <div  style="height: .1em;">
			    <img src="table-horiz.gif"><br>
			  </div>
		          1 hour
			</div>
			<div style="height: 2em;">
			  <div  style="height: .1em;">
			    <img src="table-horiz.gif"><br>
			  </div>
		          15 min - topborder
			</div>
			<div style="height: 2em;">
		          15 min - notopborder
			</div>
			<div style="height: 4em;">
			  <div  style="height: .1em;">
			    <img src="table-horiz.gif"><br>
			  </div>
		          30 minutes
			</div>
			<div style="height: 2em; border-bottom: 1px solid black;">
			  <div  style="height: .1em;">
			    <img src="table-horiz.gif"><br>
			  </div>
		          End
			</div>
	    </td></tr>
      </table> 
    </td> 

    <td>
      <table class="data" style="border-left:1px solid black; border-right:1px solid black;" cellpadding="0" cellspacing="0">
	    <tr><td>
			<div style="height: 4em;">
			  <div  style="height: .1em;">
			    <img src="table-horiz.gif"><br>
			  </div>
		          30 minutes
			</div>
			<div style="height: 4em;">
			  <div  style="height: .1em;">
			    <img src="table-horiz.gif"><br>
			  </div>
		          30 minutes
			</div>
			<div style="height: 4em;">
			  <div  style="height: .1em;">
			    <img src="table-horiz.gif"><br>
			  </div>
		          30 minutes
			</div>
			<div style="height: 4em;">
			  <div  style="height: .1em;">
			    <img src="table-horiz.gif"><br>
			  </div>
		          30 minutes
			</div>
			<div style="height: 2em; border-bottom: 1px solid black;">
			  <div  style="height: .1em;">
			    <img src="table-horiz.gif"><br>
			  </div>
		          End
			</div>
	    </td></tr>
      </table> 
    </td>
  </tr>
</table>
</body>
</html>

Hi,

I'm trying to create a full CSS layout. It's basically a three column design:
http://www.definitedigital.com/bookfair/
http://www.definitedigital.com/bookfair/style.css

However, on Mozilla the blue border around the main content area with the Copyright disclaimer at the bottom of the page doesn't show correctly. On IE it shows just fine.

I'd be really thankful if someone could take a look at my CSS. I'm quite new at designing completely with CSS and don't really know if the approach I just took is the best for what I'm trying to achieve.

Thanks,
Ralph

Okay, so here's the issue... I've designed a site using css, and to get the flow I was looking for I had to use "absolute positioning" on some of the page elements. Every thing looks fine except I can't get the page to center in the browser window. I created a div that I used as a wrapper, centered the wrapper... and most everything works fine... the exceptions are the elements that are absolutely positioned... they won't nest within my wrapper div. If I change the type of positioning of ALL the elements on the page to relative then they nest... but I don't want to have to use relative positioning for all my elements. Any words of wisdom?

I am having problems trying to set up a 2 columns inside an existing 2 column layout. The reason why I am doing it that way is because the 2 col layout is part of a template and most pages will be 2 col, but for some there is actually 3 columns, so I need to split the mainColumn into 2 columns.

The problem is they are not showing up side by side. If I do display: inline; everything within the id displays that way and that is a problem.

So here is what I am trying to accomplish

Here is the css: Code:

/*Main Section two columns under top section*/

#wrapper{
	padding: 10px 10px 10px 0px;
	width: 100%;
	height: 100%;
}

#sideColumn {
	float:left;
	width:155px;
	height: 78%;
	background-color: #5094F9;
	padding-top: 50px;
	padding-left:10px; 
	padding-bottom:10px;
	pading-right: 10px;
	margin-right: 10px;
	text-align: left;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	font-weight: bold;
	line-height: 20px;
}

.category {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	font-size: 16px;
	font-weight: bold;
	letter-spacing: 5px;
}

#sideColumn a:link, #sideColumn a:visited {
	background-color: transparent;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #FFFFFF;
	font-size: 12px;
	font-weight: bold;
}

#sideColumn a:hover, #sideColumn a:active {
	background-color: #FFFFFF;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #5094F9;
	font-size: 12px;
	font-weight: bold;
}

#sideColumn ul {
	list-style: none;
	padding: 15px 0px 15px 10px;
	margin: 0px;
}

#mainColumn {
	padding: 0px;
}

/*customer support*/

#csupportWrapper {
	padding: 90px 20px auto 185px;
	text-align: left;
}

#csupportWrapper span {
	color: #000099;
	font-weight: bold;
}

#csupportWrapper .large {
	margins: 40px auto 20px auto;
}

#csupportWrapper ul {
	list-style: none;
	padding: 10px 0px 0px 10px;
	margin: 0px;
}

#csupportWrapper a:link, #csupportWrapper a:visited {
	background-color: transparent;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #5094F9;
	font-size: 12px;
	font-weight: bold;
}

#csupportWrapper a:hover, #csupportWrapper a:active {
	background-color: transparent;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #990099;
	font-size: 12px;
	font-weight: bold;
}

#column1 {
	padding: 40px 10px 0px 185px;
	clear: none;
}

#column2 {
	padding: 40px 0px 0px 382px;
	clear: none;
}

Thanks!

Here is the xhtml starting after the heading part (I can add it too if needed): Code:

	<!--begin wrapper-->
  	<div id="wrapper">
  
  	<!--begin side column -->
  	<div id="sideColumn">
        <span class="category">Products</span>
    <ul>
		<li><a href="../products/spirometers.html">Spirometers</a></li>
		<li><a href="../products/clinical_trials.html">Clinical Trials</a></li>
		<li><a href="../products/asthma_copd.html">Asthma & COPD</a></li>
		<li><a href="../products/smoking_cessation.html">Smoking Cessation</a></li>
		<li><a href="../products/resuscitaion.html">Resuscitation</a></li>
	</ul>
	
	<span class="category">Resources</span> 
    <ul>
        <li><a href="customer_support.html">Customer Support</a></li>
	  <li><a href="training_services.html">Training & Services</a></li>
      <li><a href="exhibitions.html">Exhibitions</a></li>
      <li><a href="newsletters.html">Newsletters</a></li>
      <li><a href="downloads.html">Downloads</a></li>
      <li><a href="useful_links.html">Useful Links</a></li>
      <li><a href="industry_information.html">Industry Information</a></li>
	  <li><a href="industry_information.html">Sitemap</a></li>
	</ul>
  </div>
  <!--end of side column -->
  
  <!--begin main column -->  
  <div id="mainColumn">
  
  	<!-- InstanceBeginEditable name="Main_Section" -->
	
	  <div id="csupportWrapper">
	  
	  	<div id="column1">
		
			<span class="large">Customer Support</span>
			
				<ul>
				<li>Vitalograph Ltd</li>
				<li>Maids Morton, Buckingham</li>
				<li>MK18 1SW</li>
				<li>England</li>
				</ul>
			
				<ul>
				<li><span>Phone:</span> +44(0) 1280 827110</li>
				<li><span>Fax</span>: +44(0) 1280 823302</li>
				</ul>
				
				
          		<ul>
		  		<li><span>Email: </span> <a href="mailto:sales@vitalograph.co.uk">sales@vitalograph.co.uk </a></li>
		       	<li><a href="/enquiry_forms/customer_support_form.htm">On-Line Enquiry Form</a></li>
          		</ul>
			
		</div>
		
	  	<div id="column2">
			<span class="large">Technical Support</span>
			
				<ul>
				<li>Vitalograph Ltd</li>
				<li>Maids Morton, Buckingham</li>
				<li>MK18 1SW</li>
				<li>England</li>
				</ul>
			
				<ul>
				<li><span>Phone:</span> +44(0) 1280 827110</li>
				<li><span>Fax</span>: +44(0) 1280 823302</li>
				</ul>
				
				
          		<ul>
		  		<li><span>Email: </span> <a href="mailto:techsupport@vitalograph.co.uk">techsupport@vitalograph.co.uk </a></li>
		       	<li><a href="/enquiry_forms/technical_support_form.htm">On-Line Enquiry Form</a></li>
          		</ul>
		
		</div>
		
	  </div>
	
	<!-- InstanceEndEditable -->
  
  </div>
  <!--end of main column -->
  
  </div> 
  <!--end of wrapper--> 

Below is a simple test page that fails to load properly on the Mozilla browser. It appears to work properly in IE. Any suggestions to getting the span width to set properly, based upon the content of the span would be a great help.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Span test</title>
<style TYPE="text/css">

.submenu {
background-color: #FFFFFF;
color: #D4BA6B;
border-top: 0px solid #000000;
border-left: 0px solid #000000;
border-right: 0px solid #000000;
border-bottom: 0px solid #000000;
position: absolute;
margin: 0px;
padding: 0px;
min-width: 100px;
visibility: visible;
z-index: 1;
}


.submenuItem {
background-color: #FFFFFF;
color: #000000;
border-left: 2px solid #ff0000;
border-right: 2px solid #ff0000;
border-bottom: 2px solid #ff0000;
border-top: 2px solid #ff0000;
font-family: "arial narrow", arial, verdana, sans-serif;
font-weight: normal;
font-size: 12pt;
padding-top: 2px;
padding-bottom: 2px;
padding-right: 5px;
padding-left: 5px;
position: absolute;
z-index: 1;
cursor: pointer;
cursor: hand;
}


</style>
<SCRIPT LANGUAGE="javascript">
function getWidth() {
oSpan = document.getElementById("testSpan");
iWidth1 = oSpan.offsetWidth;
alert ("Width1 = " + iWidth1);
}
</SCRIPT>
</head>
<body onload="getWidth()">
<div class="submenu">
<span class="submenuItem" id="testSpan">This is the item that I am testing today.</span>
</div>
</body>
</html>

Hi All,

I am almost tearing he little hair I have left out!

I can't get the div in the middle to clear the floats. Works just lovely in FF, but that IE thing won't work!!! Grrree

http://www.tuxdiscs.com/sscp7b/

Any advice would be appreciated!

Thanks