CSS - Tables -> Divs

Hi Folks,
I'm still struggling to make table-less pages - CSS layout is NOT easy at
all, even with a good book. This page however has a table for displaying
images in amongst text [it's in the Content Management System - I have to
work with it].

http://www.johniwhite.com/tests/indextest.html

The trouble is: the table is longer than its container DIV at some browser
dimensions, so it breaks out of the bottom of it - overlapping it, ALSO:
pushing the following DIV out of the way. I don't know either (A): Why the
table doesn't just stay in the containing DIV or (B): why the containing DIV
doesn't stretch with it.

Can anyone help?
Thanks
John

Hi all,

I know there are certain tricks to vertically center texts or images in a div area.

And I have read somewhere there are plans to avoid current complexity compared with tables.

For example, provided I use same CSS...

Code:

div,table{
  width: 250px;
  height: 100px;
  border: 1px solid red;
  text-align: center;
}

...we optain well vertically centered text in this table...

Code:

<table>
  <tr><td>this IS vertically centered</td></tr>
</table>

...but not in this div based one...

Code:

<div>this IS NOT vertically centered</div>

I ask, do you know an easy way to acomplish the same we get with tables?

Thanks!

I haven't tried this before, so if I'm way off beat, I'll take directions.
What I'm trying to do is take a psd file and make a webpage from it.
So far, I think I've got the images cut correctly.
I tried using divs to begin with, but found I had to apply position:relative to compensate for extra spacing coming after images and divs. I'm placing an image then a div then an image. The spacing between the two are different. I've tried padding:0 and margin:0 just about everywhere I could think of putting it, but that didn't fix it.
So, I used RP. But, after getting it to look right in Safari, but not Firefox [just checked before posting here], I found that making the text bigger caused the divs and images to overlap. So, I thought about tables.
Yeah, same thing, so I figure I must not know something pretty basic and was wondering if anyone could help.
Both pairs of files validate.
Here are the links for the:
div based layout and it's css file
AND
table based layout and it's css file
Just in case this looks absolutley nuts on other browsers, here is a picture of where I'm trying to get to.

I'm feeling a little tortured over this one

The objective:
Produce page content which behaves as if it were 'tabbed' as seen on many websites and programmes.

I have done this many times before, but only with absolute positioning from the document base level. This time, the div containing the information to be tabbed has to appear relative (for re-sizability) and contain the tab divs within it.

I am using a short javascript to change the z-index of the divs in order to produce the tab effect.

The problem:
The whole thing works fine, except for:
- If I leave the css height off the divs, IE chops the bottom off, and does not allow a scroll.
- If I put a height and auto (or scroll) overflow on the divs they display correctly in IE, but disappear in firefox
- Until a table contained within one of the divs becomes larger than the stated height. At which point that div (not any of the others) disappears from IE as well.

The question:
Is this a known bug? If so, what is the work-around?
Have I done something dumb? If so, what?

The source:
source files are available for download (they are quite large, and I don't want to trim them in case something in the trim is the problem. Plus they need to be large to demonstrate the length issue correctly). Text within these examples is copyrighted by various people and is used without permission, for illustrative purposes only.

the xhtml page - click through the tabs to see the effect. Add extra rows to the table in the 'dates & prices' tab to see the disappearing problem.
the javascript file - the function is at the bottom, 'layer_z_lift'.
the css stylesheet - the styles for the tabs are in the middle, commented as tour details tabs.

any questions, post and I shall answer.
Jz.

Ok, so I've learned to stay away from tables when you don't need them, and I have an instance where this is the case. I have a container div that has a header, content and a footer. On my home page, I have to divs next to each other with the same height and a div below them towards the right.

To simplify my problem, look at this example.
Code:

<html>
  <body>
    <div style="float:right">
      Hello there!
    </div>
    <hr>    
  </body> 
</html>

If there's a "float:right" on that div, the hr tag below doesn't get pushed down. But if I use relative positioning and don't use the floats, I can't put the two top divs next to each other. The other option is to use absolute positioning, but again content below doesn't get pushed down correctly.

It seems that using "clear:both" works, but it seems weird that this has to be done. For example if I have floating divs in a container, I can get them to stretch out the container like so:

Code:

<html>
  <body>
    <div style="border: 1px solid #000; ">
      <div style="float:right">
        Hello there!<br />
        Hello there!<br />
        Hello there!<br />
        Hello there!<br />
        Hello there!<br />
        Hello there!<br />
        Hello there!<br />
      </div>
      <div style="clear: both"></div>
    </div>
    <hr>    
  </body> 
</html>

Am I missing something fundamental here? Is there a better solution? Thanks in advance.

Centering DIVs inside other DIVs in Firefox? Can it be done in a straight forward way? Setting the inner DIVs float to none seemed to work for IE but not FF.

Here's the site in Question: http://www.winchps.vic.edu.au

It's a standard fixed width floated DIV columns with a wrapper. One thing it does have is a second DIV inside both columns to display the Gradient background over the top of the repeated background. It works perfect in Firefox & IE7 (with a tweak) but IE6 mkes the sidebar nested div drop below the original sidebar DIV click here for a screenshot for those lucky enough not to have IE6.

Here's the CSS code for the basic layout:

Code:

body {
font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
font-size: 12px;
text-align: center;
margin: 0px 0px 60px 0px;
padding:0px;
border: 0;
line-height: 2;
}

#header {
width: 802px;
}

#wrapper {
width: 802px;
margin:0px;
padding: 0px;
text-align: left;
margin: 0 auto;
background: url(images/bodybg.jpg) center repeat-y;
}

#content {
padding: 0px;
margin: 0px;
}

#maingrad {
background: url(images/winchcontentgrad.jpg) top left repeat-x;
padding: 10px;
}

#main {
width: 589px;
float: right;
background: url(images/winchcontentbg.jpg) repeat;
border-left: solid 1px #000;
border-right: solid 1px #000;
}

#mainstop {
width: 589px;
float: right;
background: url(images/winchcontentbg.jpg) repeat;
border-left: solid 1px #000;
border-right: solid 1px #000;
border-bottom: solid 1px #000;
font-size: 10px;
}

#sidebargrad {
background: url(images/winchsidebargrad.jpg) top left repeat-x;
padding: 10px 5px 0px 10px;
}

#sidebar {
width: 200px;
float: left;
background: url(images/winchsidebg.jpg) repeat;
line-height: 2;
font-size: 14px;
border-left: solid 1px #000;
border-right: solid 1px #000;
}

I obviously need to put a conditional comment in there, same for what I did for the minor IE7 tweak, but I'm struggling to suss out what's causing it, I haven't found the specific issue on any of the regular sites (PIE etc).

Anyone got any ideas?

The Example

I've read a bunch about how div's won't stretch to accomidate div's inside of them if they overrun the height/min-height set for the container div.

How do I get around this? You can see the skeleton of the site above. It's fine unless you resize the window smaller than the content.

I'm not confident enough with CSS to just use it, so I'm mixing it with some tables too.

I want a layout with two tables next to each at the top and then another below.

The two at the top are working fine, but the one below keeps jumping back up to the top.

I've managed to get an ugly fix by putting in a load of <br> but this doesn't work in IE7 (unless I add a lot more, pushing the content way down in other browsers) and isn't much of a solution.

The other problem I have is that I want to have the majority of my page with a white background, but to get a surrounding border I've set the body background to be a colour and then placed a div around all the content. I want this div to be the size of the page and so set it's height to 100%, but this makes it too small. Not sure why.

Here is my code for my page and CSS.

If anyone can help I'd be most grateful.

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=utf-8" />
<title></title>
<link href="incl/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
<!--
function navon(num) {
	document.getElementById("nav" + num).style.backgroundColor = '#CDEB8B';
	document.getElementById("nav" + num).style.paddingTop = '0px'
	document.getElementById("nav" + num).style.paddingBottom = '0px'; 
	document.getElementById("nav" + num).style.borderTopWidth = '10px';
	document.getElementById("nav" + num).style.borderBottomWidth = '10px';
	
}

function navoff(num) {
	document.getElementById("nav" + num).style.backgroundColor = '#C3D9FF';
	document.getElementById("nav" + num).style.paddingTop = '8px'
	document.getElementById("nav" + num).style.paddingBottom = '8px'; 
	document.getElementById("nav" + num).style.borderTopWidth = '2px';
	document.getElementById("nav" + num).style.borderBottomWidth = '2px';
}
//-->
</script>

</head>

<body>
<div class="main">

<table width="29%" border="0" cellpadding="2" cellspacing="5" align="left">
<tr>
<td><img src="" alt="" width="230" height="80" border="0" /></td>
</tr>
</table>

<table width="70%" height="60px" border="0" cellpadding="2" cellspacing="5" align="right">
<tr>
<td width="180px" class="nav" id="nav1" onmouseover="navon('1')" onmouseout="navoff('1')">link</td>
<td width="180px" class="nav" id="nav2" onmouseover="navon('2')" onmouseout="navoff('2')">link</td>
<td width="180px" class="nav" id="nav3" onmouseover="navon('3')" onmouseout="navoff('3')">link</td>
<td width="180px" class="nav" id="nav4" onmouseover="navon('4')" onmouseout="navoff('4')">link</td>
<td width="180px" class="nav" id="nav5" onmouseover="navon('5')" onmouseout="navoff('5')">link</td>
</tr>
</table>
<br /><br /><br /><br /><br /><br />
<table width="100%" border="0" cellpadding="2" cellspacing="5" align="center">
<tr>
<td width="70%">
some content
</td>
<td width="30%">
some more content
</td>
</tr>
</table>
</div>
</body>
</html>

Code:

@charset "utf-8";
/* CSS Document */

body {
	padding-right: 4%;
	padding-left: 4%;
	padding-top: 30px;
	padding-bottom: 30px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	letter-spacing: 0.1em;
	color: #000000;
	background-color: #EEEEEE;
}
a:link {
	color: #000000;
	text-decoration: none;
}
a:visited {
	color: #000000;
	text-decoration: none;
}
a:active {
	color: #000000;
	text-decoration: none;
}
a:hover {
	color: #000000;
	text-decoration: underline;
}
.main {
	background:#FFFFFF;
	border: 10px solid #36393D;
	width: 89%;
	padding: 5%;
}
.nav {
	padding: 8px;
	background-color: #C3D9FF;
	vertical-align: middle;
	text-align: center;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 24px;
	color: #36393D;
	cursor:pointer;
	border: 2px solid #36393D;
}

Alright, I've been working on my own custom border box for a while and I've almost got it, but it has a few problems still. How I do it is I have one div that contains it all (.box) that defines the height and width of the whole box. Then I have three boxRows to lay out the images, and then I define how three cells in each of those rows should behave, very much like how custom borders used to be done with tables. Here are the problems:

In both firefox and internet explorer, the bottom row and the far right column actually appear OUTSIDE the .box containing box.

There are two additional problems in internet explorer. First, the middle row handles the auto height differently and only expands about 10px instead of the height of the containing box. The second is that the whole middle row for some reason appears to be pushed to the right by about 16px.

Any help would be appreciated. Here's the code:

HTML:

Code:

<html>
	<head>
		<link rel="stylesheet" type="text/css" href="reset.css" />
		<link rel="stylesheet" type="text/css" href="testBox.css"> 	
	</head>
	<body>

		<div class="box">
			<div class="boxRowTop">
				<div class="boxCellLeft"></div>
				<div class="boxCellMiddle"></div>
				<div class="boxCellRight"></div>
			</div>
			<div class="boxRowMiddle">
				<div class="boxCellLeft"></div>
				<div class="boxCellMiddle"></div>
				<div class="boxCellRight"></div>
			</div>
			<div class="boxRowBottom">
				<div class="boxCellLeft"></div>
				<div class="boxCellMiddle"></div>
				<div class="boxCellRight"></div>
			</div>

	</body>
</html>

And here is the layout css file:

Code:

/* Box classes */
.box {
	background: rgb(120,120,120);
	height: 200px;
	width: 500px;
}
.boxRowTop {
	height: 16px;
	position: relative;
	width:%100;
}
.boxRowMiddle {
	height: auto;
	width:%100;
	position: relative;
}
.boxRowBottom {
	height: 16px;
	width:%100;
	position: relative;
}
.boxCellLeft {
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 16px;
}
.boxCellMiddle {
	height: 100%;
	margin-left: 16px;
	margin-right: 16px;
	width: auto;
}
.boxCellRight {
	height: 100%;
	left: 100%;
	position: absolute;
	top: 0;
	width: 16px;
}


/* Define Cell Backgrounds/Images */
.boxRowTop .boxCellLeft {
	background: url(../LandingImages/topleft_circ_corner.png) no-repeat;
}
.boxRowTop .boxCellMiddle {
	background: url(../LandingImages/top_border.png) repeat-x;
}
.boxRowTop .boxCellRight {
	background: url(../LandingImages/topright_circ_corner.png) no-repeat;
}
.boxRowMiddle .boxCellLeft {
	background: url(../LandingImages/left_border.png) repeat-y;
}
.boxRowMiddle .boxCellMiddle {
	background: rgb(255,255,255);
}
.boxRowMiddle .boxCellRight {
	background: url(../LandingImages/right_border.png) repeat-y;
}
.boxRowBottom .boxCellLeft {
	background: url(../LandingImages/bottomleft_circ_corner.png) no-repeat;
}
.boxRowBottom .boxCellMiddle {
	background: url(../LandingImages/bottom_border.png) repeat-x;
}
.boxRowBottom .boxCellRight {
	background: url(../LandingImages/bottomright_circ_corner.png) no-repeat;
}

And last, the reset CSS, which I don't think has anything to do with the problems because if I take it out it still has them.

Code:

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, img, ins, kbd, q, s, samp,
small, strike, strong, tt, var, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, caption
{
	margin:0;
	padding:0;
	border:0;
	vertical-align:baseline;
}

* {font-size:1em; font-family: inherit;}

:focus {outline:none;}

body { font-size: 62.5%; line-height:normal; font-family: Arial, Sans-Serif; color:Black; } /* 62.5% (10px), 75% (12px), 87.5% (14px), 100% (16px) */

p {	margin: 0 0 1.2em 0; }

a			{ color:#ff0000;	text-decoration:none; }
a:link		{ color:#ff0000;	text-decoration:nonee; }
a:visited	{ color:#ff0000;	text-decoration:none; }
a:active	{ color:#ff0000;	text-decoration:none; }
a:hover		{ color:#ff0000;	text-decoration:none; }

a.h1,a.h2,a.h3,a.h4,a.h5,a.h6,h1,h2,h3,h4,h5,h6
{
	font-weight:bold;
	display:block;
	text-decoration:none;
	color:Black;
}

h1, a.h1, a:link.h1, a:visited.h1, a:active.h1, a:hover.h1 { color:Black; text-decoration:none; font-size: 2.00em; }
h2, a.h2, a:link.h2, a:visited.h2, a:active.h2, a:hover.h2 { color:Black; text-decoration:none; font-size: 1.75em; } /* this is normally skipped? 1.50em */
h3, a.h3, a:link.h3, a:visited.h3, a:active.h3, a:hover.h3 { color:Black; text-decoration:none; font-size: 1.50em; } /* 1.25em */
h4, a.h4, a:link.h4, a:visited.h4, a:active.h4, a:hover.h4 { color:Black; text-decoration:none; font-size: 1.25em; } /* 1.00em */
h5, a.h5, a:link.h5, a:visited.h5, a:active.h5, a:hover.h5 { color:Black; text-decoration:none; font-size: 1.00em; } /* 0.75em */
h6, a.h6, a:link.h6, a:visited.h6, a:active.h6, a:hover.h6 { color:Black; text-decoration:none; font-size: 0.75em; } /* 0.66em WTF? */

fieldset { border:solid 1px; padding:0.25em 0.5em 0.75em; margin: 0 0 1.5em; }
legend { margin:0 0 0 2em; padding:0 1em; }

textarea, input, select { border:solid 1px #ccc; margin:0; padding:0; }
textarea, input { padding:0 .2em; }
input:focus,textarea:focus,select:focus { border:solid 1px black; }

small { font-size:.9em; }

ul, ol, dl { position: relative; padding:0 0 0 1.5em; margin:1.5em 0; }
dir, menu { margin:1.5em 0; }
/* nested lists have no top/bottom margins */
ul ul,   ul ol,   ul dir,   ul menu,   ul dl,
ol ul,   ol ol,   ol dir,   ol menu,   ol dl,
dl ul,   dl ol,   dl dir,   dl menu,   dl dl,
dir ul,  dir ol,  dir dir,  dir menu,  dir dl,
menu ul, menu ol, menu dir, menu menu, menu dl
{
	margin:0;
	padding: 0 0 0 1.5em;
}

hr { margin:0.75em 0; padding:0; }

Any help would be GREATLY appreciated, as I've been working on this for a while!

Thanks!

Hiya, this is my first time posting here; tia for helping me out with my problem.

I am trying to center a 784 wide page, cut up into multiple divs. It's working, but I am getting a problem which I cannot get rid of. I'm using position:relative, and this is making the page scroll as if the images were below each other. They are showing up in the correct spots, but once the page is finished, I end up with another page worth of white space to scroll through (which I do not want.) I hope this explained it correctly. Below is an example of the html and css I am using. Notice the red drops below the final picture then length of the picture itself. Once the entire page is done, it is about 1500px longer than needed.

*******************************
HTML
*******************************
<html>

<head>
<link rel="stylesheet" type="text/css" href="new.css">
</head>

<body>

<div class="begin">

<div class="header_piece_01"><img src="images/picture_01.jpg"></div>

<div class="rocket_logo"><img src="images/picture_02.jpg"><br><img src="images/picture_03.jpg"><br><img src="images/picture_04.jpg"></div>

</div>

</body>

</html>

*******************************
new.css
*******************************
body {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 11px;
text-align : justify;
line-height : 150%;
color : #000000;
margin : 0px;
border : 0px;
padding : 0px;
background-color : #FFFFFF;
}

a {
text-decoration : none;
}

a:hover {
text-decoration : none;
}

.begin {
width : 784px;
background-color : red;
margin-left : auto;
margin-right : auto;
}

.header_piece_01 {
width : 31px;
height : 118px;
}

.rocket_logo {
position : relative;
top : -118px;
left : 31px;
width : 289px;
}

Apologies for my crude code. I'm attempting to learn css on the fly.

My design is looking right on Macs (Firefox, Safari) but the image gallery I've cobbled together is all wrong on pretty much any browser on a PC. Any ideas?

(and also - the menu keeps shifting down about 125px more than it should on IE 6.0, any thought there would be equally appreciated!!)

many, many thanks. I'm at a roadblock.

charlie

Hi All,

I am trying to get to grips with css positioning and am hitting problems.

The code below is my complete page (inc css). I am trying to get the 3 divs - leftbox, middlebox and rightbox to sit alongside each other with 5px gaps and all 3 being vertically aligned 5px below the frontsplash div.

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" lang="en" xml:lang="en">
<head>
	<title></title>
<style type="text/css">

#header { 
    background-color: #80724d;
    height: 70px;
    width: 790px;
    border-bottom: 1px solid #fff;
}

#navbar { 
    background-color: #d5c8a4;
    height: 25px;
    width: 790px;
    top: 70px;
    border-bottom: 1px solid #fff;
}

#frontsplash {
    background-color: #fbf8ef;
    width: 500px;
    margin: 5px;
    padding-left: 10px;
    padding-bottom: 10px;
}

#frontboxcontainer {
}

#threeboxes {
  display: block;

}

#leftbox {
    float: left;
    background-color: #d5c8a4;
    width: 200px;
    padding-left: 5px;
}

#middlebox {
    top: 0px;
    background-color: #d5c8a4;
    margin: 210px;
    width: 100px;
    padding-left: 5px;
}

#rightbox {
    top 0px;
	background: #d5c8a4;
	width: 100px;
    margin: 310px; 
	}

h1 {
    font-family: "Times New Roman", serif;
    font-size: 24px;
    color: #80724d;
    padding: 0px;
}

h2 {
    font-family: "Times New Roman", serif;
    font-size: 14px;
    color: #80724d;
    padding: 0px;
}

p {
    font-family: "Times New Roman", serif;
    font-size: 14px;
    color: #323232;
}    
#navbar ul {
    margin:0;
    padding:0;
    list-style:none;
    }
#navbar li {
    float:left;
    margin:0;
    padding:0;
    border-right: 1px solid #fff;
    }
#navbar a {
    display:block;
    padding:0px 10px;
    }

</style>

</head>

<body>

<div id="header">
Site Name
</div>

<div id="navbar">

    <ul>
    <li> <a href="#">Home</a> </li>
    <li> <a href="#">About</a> </li>
    <li> <a href="#">Downloads</a> </li>
    <li> <a href="#">Documentation</a> </li>
    <li> <a href="#">Contributing</a> </li>
    </ul>


</div>

<div id="frontboxcontainer">

<div id="frontsplash">

    <h1>This is the title ...    </h1>

    <p>This is the introductory text This is the introductory text This is the introductory text
This is the introductory text This is the introductory text This is the introductory text
    </p>
</div>

<div id="threeboxes">

    <div id="leftbox">
    <h2>DEMONSTRATION</h2>

    <p> A fully functional demo of the
    application is available online
    </p>
    </div>

    <div id="middlebox">
    <h2>SUPPORT US</h2>

    <p>Why not donate to help keep
    the project alive?
    </p>
    </div>


    <div id="rightbox">
    <h2>SERVICES</h2>

    <p>Professional services available
    with the application.
    </p>
    </div>

</div>

</div>
</body>
</html>

It has all gone pear shaped..... any ideas?

Thanks.

Hi there,

For some reason,

I have a white space appearing above my divs. This is only happening in FF though.

I have a header and 2 columns underneath, but the two columns underneath the header have a white gap above them.

This is my CSS:

Code:

#clear{
clear:both;
}

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

#header_wrapper{
width: 780px;
background-image: url('img/header_bg.jpg');
height: 86px;
}

#logo{
float:left;
margin-left: 20px;
}

#header_right{
float:right;
margin-right: 20px;
margin-top: 60px;
}

#left{
float:left;
width: 580px;
margin-top:0px;
}

#right{
float:right;
background-color: #dddddd;
width: 200px;
}

and this is my HTML

Code:

<div id="wrapper">
	<div id="header_wrapper">
		<div id="logo">
		<a href="index.html">
		<img src="img/logo.jpg" alt="Pitter's Painting" border="0" />
		</a>
		</div>
		<div id="header_right">
		<a href="index.html" class="orange">Home</a><span class="white_small"> | </span><a href="#" class="orange">Contact Us</a>		</div>
	</div>
	<div id="clear"></div>
	<div id="left">
	sadsad
	</div>
	<div id="right">
	nav
	</div>

Any ideas what I have wrong?