more css layout problems...

SyncViews · December 11, 2007

How can I do something like this in css without tables?

<table style="border-style:solid; border-color:#AAAAAA; border-width:1px">
<tr>
  <td width="40%" valign="top" style="border-right-style:solid; border-right-color:#EDEDED; border-right-width:1px">
   <h1>LEFT SECTION</h1>
  </td>
  <td width="55%" valign="top" style="border-left-style:solid;  border-left-color:#EDEDED;  border-left-width:1px" >
   <h1>RIGHT SECTION</h1>
  </td>
</tr>
</table>

I tried the below but that doesn't work

CSS:

div#body
{
border-style: solid;
border-width: 1px;
border-color: #AAAAAA;
background-color: #BBBBBB;
}

div#body_left
{
border-right-style: solid;
border-right-width: 1px;
border-right-color: #EDEDED;
float: left;
width: 35%;
height: 100%;
}

div#body_right
{
border-left-style: solid;
border-left-width: 1px;
border-left-color: #EDEDED;
margin-left: 35.5%;
height: 100%;
}

HTML:

<div id="body">
<div id="body_left">
  <h1>LEFT SECTION</h1>
  <h3>MORE TEXT</h3>
</div>
  
<div id="body_right">
  <h1>RIGHT SECTION</h1>
</div>
</div>

phpQuestioner · December 11, 2007

use div and set the display style for the corresponding table structure.

<style type="text/css">
#myTable {display:table;padding:3px 3px 3px 3px;border:solid 1px silver}
#myTR {display:table-row;padding:3px 3px 3px 3px;border:solid 1px silver}
#myTD {display:table-cell;padding:3px 3px 3px 3px;border:solid 1px silver}
</style>

<div id="myTable">
<div id="myTR">
<div id="myTD">
content here
</div>
</div>
</div>

Mr_jmm · December 12, 2007

Depending what you're looking for. If you are looking at a design layout rather than creating a table to display data:

<style type="text/css">
body {width:790px; margin-left:auto; margin-right:auto;} // Fixes the width of the site and centers it.

#wrapper { // Provides a border / outline around the content
  width:96%; // When using percentages, some browsers don't like total widths being exact.
  background:#bbb; // If you use background-color then IE sometimes has a fit when page first loads.
  border:1px solid #aaa;
  margin:0; padding:1em;
  float:left;
  }

#leftcol {
  width:40%;
  background:transparent;
  border-right:1px solid #ededed;
  margin:0; padding:0;
  float:left;
  }

#rightcol {
  width:55%;
  background:transparent;
  margin:0; padding:0;
  float:left;
  }
</style>

<div id="wrapper">

<div id="leftcol">
  <p>Some content</p>
  <p>Some content</p>
  <p>Some content</p>
  <p>Some content</p>
</div>

<div id="rightcol">
  <p>Some more content</p>
  <p>Some more content</p>
  <p>Some more content</p>
  <p>Some more content</p>
</div>

</div>

SyncViews · December 12, 2007

That still doesn't work. If one section is twice the size of the other it doesn't display the border all the way down. I need it so the "height" of both sections is the same as the largest of the two. But there is no way I can no inadvance which of the two will be larger

@phpQuestioner

With that I might as well just use tables seeing as your giving the divs table properties there... I'm trying to learn how to make multi colume tabless websites...

bronzemonkey · December 12, 2007

@Mr_jmm, css comments must only be in the form of /* this is a comment */

@phpQuestioner, you can't really use display:table because it is not supported by IE6.

@SyncViews, tables should be used for tabular data. This is not tabular. I also don't think it is a good idea to use the id of body because there is already a body element.

You could use the faux columns method (google it) that uses a background image on the container to give the appearance of columns. Since you want a border you'd only need to create a 1px by 1px image of color #ededed and then repeat it along the y-axis once you have positioned it. For example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Title</title>

<style type="text/css">
/* CSS RESET
----------------------------------- */

html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, a, abbr, acronym, big, cite, code, em, img, q, small, strike, strong, sub, sup, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {padding:0; border:0; margin:0; outline:0; font-weight:inherit; font-style:inherit; font-size:100.01%; font-family:inherit; vertical-align:baseline;}

/* YOUR STYLES
----------------------------------- */

#container {background: #bbb; border: 1px solid #aaa; background: url(path-to-image) 64.5% 0 repeat-y;}
#column-primary {float: right; width: 35%;}
#column-secondary {float: left; width: 64.5%;}

/* SELF-CLEARING FLOATS
----------------------------------- */

#container:after {content: "."; display:block; height:0; font-size:0; line-height:0; clear:both; visibility:hidden;}
/*clears in IE7 only*/
*+html #container {min-height:1px;}
/*clears in IE6 only*/
* html #container {min-height:1px;}
</style>
</head>

<body>

<div id="container">
  <div id="column-primary">
    <p>Content in the primary column</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus non magna vel urna vulputate rutrum. Sed eu orci. Maecenas lectus lectus, commodo in, auctor ac, facilisis a, dui. Praesent euismod venenatis enim. Aenean fermentum arcu a ligula. Proin et purus. Maecenas vitae velit. Quisque fringilla nunc sit amet libero. Nunc sed turpis sit amet metus volutpat viverra. Praesent elementum egestas pede. Ut in arcu. Sed viverra arcu in nunc. Nullam at risus nec sapien commodo imperdiet.</p>
  </div>
  
  <div id="column-secondary">
    <p>Content in the secondary column</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus non magna vel urna vulputate rutrum. Sed eu orci. Maecenas lectus lectus, commodo in, auctor ac, facilisis a, dui. Praesent euismod venenatis enim. Aenean fermentum arcu a ligula. Proin et purus. Maecenas vitae velit. Quisque fringilla nunc sit amet libero. Nunc sed turpis sit amet metus volutpat viverra. Praesent elementum egestas pede. Ut in arcu. Sed viverra arcu in nunc. Nullam at risus nec sapien commodo imperdiet.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus non magna vel urna vulputate rutrum. Sed eu orci. Maecenas lectus lectus, commodo in, auctor ac, facilisis a, dui. Praesent euismod venenatis enim. Aenean fermentum arcu a ligula. Proin et purus. Maecenas vitae velit. Quisque fringilla nunc sit amet libero. Nunc sed turpis sit amet metus volutpat viverra. Praesent elementum egestas pede. Ut in arcu. Sed viverra arcu in nunc. Nullam at risus nec sapien commodo imperdiet.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus non magna vel urna vulputate rutrum. Sed eu orci. Maecenas lectus lectus, commodo in, auctor ac, facilisis a, dui. Praesent euismod venenatis enim. Aenean fermentum arcu a ligula. Proin et purus. Maecenas vitae velit. Quisque fringilla nunc sit amet libero. Nunc sed turpis sit amet metus volutpat viverra. Praesent elementum egestas pede. Ut in arcu. Sed viverra arcu in nunc. Nullam at risus nec sapien commodo imperdiet.</p>
  </div>
</div>

</body>
</html>

Mr_jmm · December 12, 2007

D'Oh!

Yes, sorry about that. In the middle of PHP at the time, force of habit. More coffee required me thinks.

phpQuestioner · December 12, 2007

@phpQuestioner, you can't really use display:table because it is not supported by IE6.

@bronzemonkey - uhmm; yes it does - better have another look

bronzemonkey · December 13, 2007

No it doesn't.

You'd better take another look at IE6 because your advice to people regarding this issue and the box model have been incorrect I'm afraid.

phpQuestioner · December 13, 2007

No it doesn't.

You'd better take another look at IE6 because your advice to people regarding this issue and the box model have been incorrect I'm afraid.

I am afraid you are pal; because I tested it and you are the one who is wrong; it displays perfectly in IE6 and FF and IE7!!! You need to test things or study up on CSS more before giving advice about it; because you are giving people wrong advice. >:(

bronzemonkey · December 13, 2007

Try viewing Roger Johansson's display:table demo that is linked to on this page. If you manage to view it "perfectly" in IE6 then your version of IE6 must be different to mine.

http://www.456bereastreet.com/archive/200406/equal_height_boxes_with_css_part_ii/

phpQuestioner · December 13, 2007

All I know is that I tested it and it displays fine; the "display" property is a w3c complaint CSS style. The code I provided will render a: table, tr, and td in: IE6, IE7, and FFv2.0.0.4 (these are the common browsers I use for testing). Did you go by what a web page said or did you actually test it for yourself? You do realize that everything people put on web pages, isn't always true - right?

Test stuff out sometimes; you will actually benefit from doing so.........

bronzemonkey · December 13, 2007

the "display" property is a w3c complaint CSS style

We're not talking about the display property, we're talking about the table, table-cell, and table-row values.

Did you go by what a web page said or did you actually test it for yourself?

I posted Roger Johansson's working demo so that you could see for yourself that IE6 doesn't support those display values. Does this page look the same to you in IE6 and FF - http://www.456bereastreet.com/lab/equal_height/

You do realize that everything people put on web pages, isn't always true - right?

Yes, that's why I'm ignoring your patronising nonsense.

phpQuestioner · December 13, 2007

the "display" property is a w3c complaint CSS style

We're not talking about the display property, we're talking about the table, table-cell, and table-row values.

guy - table, table-cell, and table-row is the display property - you really need to brush up on your CSS. the only non-sense is yours because you cannot admit you are wrong; the original code I provided displays perfectly in: IE6, IE7, and FFv2.0.0.4.

bronzemonkey · December 13, 2007

{display: block;}

{property: value;}

display is a css property | inline, block, table, etc are display values.

The code you posted is just a bunch of elements wrapped around each other. IE6 will default to {display:block} because it doesn't support the table, table-cell, or table-row values. If you look at Roger's {display:table} demo in IE6 will notice for yourself.

phpQuestioner · December 13, 2007

you can twist it any way you want, you can follow you little example; but my code works and most people (who know anything about CSS) knows how to change the width, height, and overflow of a element; so it does not display a block level element. you can think of any way it makes you sleep better at night; but me and all other css designers knows that the code I provided will display accurately as needed. Also IE does not support min-height (there's another fact for you to ponder on).

dbrimlow · December 17, 2007

you can twist it any way you want, you can follow you little example; but my code works and most people (who know anything about CSS) knows how to change the width, height, and overflow of a element; so it does not display a block level element. you can think of any way it makes you sleep better at night; but me and all other css designers knows that the code I provided will display accurately as needed. Also IE does not support min-height (there's another fact for you to ponder on).

Er, I'm sorry to chime in here. But I work 12 hours a day with css and display:table is not cross-browser compatible ... IE 6.0 does NOT support display:table elements and bronzemonkey is right.

The only reasons display:table would appear to work in IE 6 is if the code is not valid and the page is in quirks mode or if it is defaulting to a block level element for a simple layout test solution.

The last thing anyone wants is for IE to start defaulting because it will mess up other elements in the layout.

And you should have recognized that bronzemonkey's use of "min-height" is intentional:

#container:after {content: "."; display:block; height:0; font-size:0; line-height:0; clear:both; visibility:hidden;}
/*clears in IE7 only*/
*+html #container {min-height:1px;}
/*clears in IE6 only*/
* html #container {min-height:1px;}

This is called "haslayout" and anyone who works with css and floats should know it well. It fixes float clearing bugs in both IE AND FF.

bronzemonkey · December 17, 2007

whoops, that's a typo in my css float clearing, thanks for pointing it out. The IE6 part should read

* html #container {height:1%;}

dbrimlow · December 18, 2007

Getting back to the point of the thread, thanks to IE's BS (all versions) this is one case of where css simply cannot be made to easily replace table cells in a design perspective (non-tabular data).

Even with faux column techniques, I have found that making dynamic, flexible (liquid) equal height boxes is futile. Because once you add a border to the boxes IE will mess it all up.

By the nature of the sites I make (real estate) I am often forced to make them fixed pixel in width and height and simply have a dynamically inserted "more" link when the data exceeds the fixed height.

This is going to be a problem for a few more years until IE 6 and 7 are obsolete. Microsoft's excuse (alibi) for not making IE 7 a "Modern Browser" was that they concentrated everything on security and didn't have the time.

Yet, strangely enough they did have the time for tabs and actually fixing the bugs that allowed the "hacks" (without fixing the reason the hacks were necessary).

Sign In

more css layout problems...

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information