CSS - Auto-width Content, 3 Column Layout. Failing Miserably...

Hi, I'm working on a website for a church and we're near completion, but I'm having trouble getting the site to display properly in IE7 on Windows XP and a few other browsers according to browsershots.org. CSS and XHTML both validate at w3c.org. I've ripped this thing apart and put it back together with no luck. The really weird thing is the Home page looks fine, but in the rest of the pages the body content gets pushed below the left and right navigation bars. Is it a CSS float problem? Margins or paddings???

Home page: Looks OK in IE7, at least on my machine - http://www.stlukeslutheran.com/index_temp.php
Ministry page: Content is pushed to bottom of page - http://www.stlukeslutheran.com/mini...ns_ministry.php

The CSS files are at http://www.stlukeslutheran.com/css/main.css and http://www.stlukeslutheran.com/css/common.css.

Would anyone be willing to take a look? Thanks in advance.

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; }

  

  


 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

Hello,

(please also see attached/uploaded style sheet)

I'm puzzled why (in the following code) the TEST #2 table renders as required (i.e. 2 rows in 1 column, all with the same cell WIDTH) but the table in TEST #1 seems to render the table cells (i.e. 2 columns in 1 row) without a common cell WIDTH.

How can I get all the cells (there are plenty more!) in table TEST #1 to all be exactly the same width (preferably 85px)?

Code:

<link rel="stylesheet" type="text/css" href="http://thinet/cgi-bin/thinetStyleSheet.css">

TEST #1
<table class="menu" border=1 CELLPADDING=2>
<tr>
<td class="pinkButtons"><a title="Treats menu" href='http://thinet/theread/forumdisplay.php?s=&forumid=82'>Treats</a></td>
<td class="pinkButtons"><a title="New Starters, Leavers and Transfers" href='http://thinet/theread/forumdisplay.php?s=&forumid=41'>Joiners etc.</a></td>
</tr>
</table>

<P>

TEST #2
<table class="menu" border=1 CELLPADDING=2>
<tr><td class="pinkButtons"><a title="Treats menu" href='http://thinet/theread/forumdisplay.php?s=&forumid=82'>Treats</a></td></tr>
<tr><td class="pinkButtons"><a title="New Starters, Leavers and Transfers" href='http://thinet/theread/forumdisplay.php?s=&forumid=41'>Joiners etc.</a></td></tr>
</table>

I don't think I've quite grasped the idea of CSS yet?!?!

Any help/pointers would be appreciated.

Thanks,
Andy

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?

i ve been playing with my page and been trying to modify the width of the page (divs) according to the browswer's width.
The problem is i want the navigation menu on left to be fixed width (say 200px) and the center div and the right column to be variable width. Also, i want to set a minimum width , so that the floating divs dont roll below the navigation menu.

here s the link to the page. try reducing ur browser windows size . the content div rolls down under theleft nav menu.
http://ccc.1asphost.com/pacemakerpr...r/cicuitlab.htm

Also , i get wierd result in netscape navigator. please help

I am working on the new home page which is based on a template.

The left sideColumn is working fine, however I am having a few problems with the mainColumn layout.

Here is a static image to show what I want it to look like

Here are the problems I am having:

1) The #scroll box is place where I want it in IE but in foxfire it is right up against the left side of the #sideColumn partially hidden.

There will be text that scrolls into this box and stops. I haven't started on the part yet - in case that makes a difference. Not my choice, but that is what the bosses want.

2) I want the image centered horizontal within the #mainColumn. Here is what I have for the css:

#home img {
margin: 5px auto 5px auto;
}

which I thought would do the trick, but it's not.

3) I want the p text to have a 40px margin on the right and left side like the .large does.

Here is what I have for the css:

#home p, .large {
margin: auto 40px auto 40px;
}

It works for the .large (Welcome to Vitalograph), but not for the text below it. At one point I had it working, but after addtional changes fixing other problems, now it doesn't and I can't figure out why.

Here is the xhtml starting at the 2 column part (wrapper): 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="/resources/contact_us.html">Customer Support</a></li>
	  <li><a href="/resources/training_services.html">Training & Services</a></li>
      <li><a href="/resources/exhibitions.html">Exhibitions</a></li>
      <li><a href="/resources/newsletters.html">Newsletters</a></li>
      <li><a href="/resources/downloads.html">Downloads</a></li>
      <li><a href="/resources/useful_links.html">Useful Links</a></li>
      <li><a href="/resources/industry_information.html">Industry Information</a></li>
	  <li><a href="/resources/industry_information.html">Sitemap</a></li>
	</ul>
  </div>
  <!--end of side column -->
  
  <!--begin main column -->  
  <div id="mainColumn">
  
  	<!-- InstanceBeginEditable name="Main_Section" -->
  
  
  
    <div id="home">	
        <div id="scroll"><span>scrolling news will go hear and stop</span></div>
		
        <img src="/images/boys_bubbles.gif" width="485" height="333" alt="boys and bubbles" />
	
		<span class="large">Welcome to Vitalograph</span>
		
		<p>Vitalgraph offers a wide range of spirometers along with other asthma 
          management equipment with over 40 years experience. From simple hand-held 
          units to sophisticated Windows based spirometry systems, we have it 
          all. Check out our full line of respiratory equipment under the product 
          category.</p>
		
		
      <p><a href="/about_us/about_us.html">more about us...</a></p>
		
		
	</div>
  
  
  <!-- InstanceEndEditable -->
  
  </div>
  <!--end of main column -->
  
  </div> 
  <!--end of wrapper--> 

Here is the vitalograph_master.css: Code:

body {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-align: center;
	background-color: #ffffff;
	color: #515151;
	margin:0px;
	padding:10px;
}

/*page container settings*/

#page {
	width: 750px;
	height: 600px;
	border: 1px solid #5094F9;
	background-color: #FFFFFF;
	overflow: hidden;
	margin: auto;
	padding: 10px 10px 10px 10px;
	text-align: left;
}

/*logo header and tag settings*/
	
#header {	
	margin: 0;
	padding-bottom: 5px;
	width: 450px;
	height: 36px;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #5094F9;
	text-align: left;
}

#header img {
    vertical-align: -7px;
    }

.tagline {
	color: #5094F9;
	font-size: 16;
	font-style: italic;
	font-weight: bold;
	display: inline;
	clear: both;
	line-height: 20px;
	margin-left: 10px;
}

/*top bar settings*/

#topbar {
	float: top;
	height: 20px;
	background-color: #5094f9;
	clear: both;
	padding-left: 10px;
	text-align: left;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	font-size: 12px;
	font-weight: bold;
}

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

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

#topbar ul {
	list-style: none;
	margin: 0;
	padding-top: 2px;
}

#topbar li {
	display: inline;
	margin-right: 160px;
}

/*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: inherit;
	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;
}

/*footer*/

.footer {
	font-family: "Times New Roman", Times, serif;
	font-size: 9px;
	color: #999999;
}

/*text*/

.large {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #5094F9;
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 15px;
}

Here is the home.css: Code:

/*home page*/

#home {
	margin: auto;
}

#home img {
	margin: 5px auto 5px auto;
}

#home p, .large {
	margin: auto 40px auto 40px;
}

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

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

#scroll {
	width: 560px;
	padding: 5px;
	background-color: inherit;
	border: 1px solid #5094F9;
	margin-bottom: 5px;
}

Any help or suggestions are greatly appreciated.

I am a HTML&CSS novice - I am trying to write a page using a three column layout but the column colour doesn't reach the footer.

I understand that this is a common problem and I've looked at a lot of examples on the web of how to work around this or create a better layout but I'm still not sure enough to know which would be the easiest and best to go within the page I have written.

I want to avoid images but other than that any help would be great!

I have validated the HTML & CSS and they are copied below (could any advice be really specific, as I said this is very new to me!).


Thanks

HTML:


<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Drivers Jonas Information Unit</title>
<meta name="keywords" content="1" />
<link rel="stylesheet" type="text/css" href="djiucss.css" media="screen" />
<link rel="stylesheet" type="text/css" href="djiuprintcss.css" media="print" />
</head>
<body>
<div id="top">
<div id="picture">
<img src="GIF.gif" alt="DJ" width="200" height="100" />
</div>
<div id="heading">
<div id="title"><h1>Drivers Jonas Information Unit</h1></div>
</div>

</div>
<div id="left">
<br/><p><a href="about.html">About us</a></p><br/>
<p><a href="company.html">Company Information</a></p><br/>
<p><a href="legal.html">Legal information</a></p><br/>
<p><a href="landreg.html">Land Registry</a></p><br/>
<p><a href="research.html">Research</a></p><br/>
</div>
<div id="right">
<div id="title"><h2> News
</h2></div>
<ul>
<li>The Information Unit has recently acquired a set of new APC guides</li>
<li>If you would like any training on databases</li>
<li>The Information Unit has created an economy timeline </li>
</ul>
</div>

<div id="main">
<div id="title"><h2>Main stuff</h2></div>
<p>Suspendisse adipiscing malesuada lectus. Cras vitae dolor. Donec consequat, lectus sed euismod consequat, ipsum mi mollis nunc, eget nonummy neque purus a tortor. Ut vel lorem. Curabitur mollis mauris id diam. Nam posuere. In placerat sapien ut nisl. Donec volutpat augue ut velit. Proin nec mi sit amet metus placerat egestas. Quisque porttitor massa eu lacus. Donec tristique, neque in sollicitudin euismod, enim tellus varius mauris, id vestibulum est massa id massa. Integer et purus. Vivamus condimentum tincidunt ipsum. Duis augue lorem, pretium vel, cursus at, vulputate sed, neque. Quisque justo. Nunc rhoncus. In ornare venenatis velit. </p>
<p>Donec facilisis ante sit amet mauris. Nunc fermentum orci eu quam. Donec vestibulum. Vestibulum ultricies nisl eu eros. Curabitur urna. Duis enim erat, lobortis nonummy, mollis non, porttitor nec, nisi. Phasellus pulvinar purus eu pede. In mollis. Duis sit amet dui et arcu rhoncus auctor. Integer est dui, pharetra vel, volutpat ac, luctus in, elit. </p>
<p>Suspendisse adipiscing malesuada lectus. Cras vitae dolor. Donec consequat, lectus sed euismod consequat, ipsum mi mollis nunc, eget nonummy neque purus a tortor. Ut vel lorem. Curabitur mollis mauris id diam. Nam posuere. In placerat sapien ut nisl. Donec volutpat augue ut velit. Proin ne</p>
</div>
<div id="bottom">
Drivers Jonas Information Unit
</div>
</body>
</html>

CSS:

#top
/*DJ logo and page title - includes h1*/
{
color: black;
font-family: arial, sans-serif;
font-size: 20px;
background: #d31145;
padding-bottom: 15px;
}

body
{
color: black;
font-family: arial, sans-serif;
font-size:14px
}

img /*DJ logo*/
{
padding: 20px;
float:left;
}

#heading
{
text-align: center;
padding:20px;
}

/*main page title*/
/*should change all reds to DJ red: #d31145*/

#left, #right, #main
{
color: white;
background: black;
}

#left
{
float: left;
width:140px;
border-right:2px solid #d31145;
text-align:left;
padding-left: 1em;
}

#right
{
float:right;
width:140px;
border-left:2px solid #d31145;
text-align:left;
padding-right: 1em;
}

#main
{
margin-left: 150px;
margin-right: 150px;
border-left: 1px solid;
border-right: 1px solid;
padding: 1em;
}

#bottom
{
clear:both;
margin: 0;
color:black;
background: #d31145;
font-size: 16px;
font-family: Arial, sans-serif;
text-align: center;
}

#title
{
text-align:center;
}

a:link {color:white}
a:visited {color:silver}
a:hover {color:#d31145}
a:active {color:#d31145}

Hi,

http://www.dudley.nhs.uk/search.asp has a two column effect. The CSS for it is he http://www.dudley.nhs.uk/css/screen.css I was wondering why if there is a table in the right hand column with a width percentage over 77% there is some horizontal scrolling? This happens in IE.

Any help would be greatly appreciated.

Thanks.

Janusz Jasinski

Hello!

I'm new to CSS, so any help would be greatly appreciated!

I'm working on this page:
sugarhooker[dot]com/testing/index2.html
*The CSS is included in the head

The right column is suppose to start where it says 'Are you hooked...'
It should be right underneath the navigation bar. Anyone know what I'm doing wrong?

Thanks in advance!

Hi all!

I got a three column div lay-out with a wrapper around these three column divs. At the moment, all columns have a fixed width and are floating to the left.

Now I want the center column to auto-resize when I make my browser screen smaller. I already tried "width: auto;" but then it places the center column below the left column in stead of next to it.

Does anyone have an idea on how to solve this problem?

Thanks!

Currently on my site I have articles with images, and the images have a quote underthem... unforutunatly, i have to manually set the width of these boxes to the width of the image that accompanies them.... here is a sample...

CSS:
Code:

.imageinsert {
margin:5px;
}
        #image01 {width:225px}
	.imagequote {
	color:#FFF;
	font-weight:bold;
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	text-align:center;
	}

XHTML:
Code:

<div class="imageinsert" id="image01">
	<img src="/pic/feud093.jpg" alt="" />
	<div class="imagequote">In yet another unfair battle, Maki must defend herself against Guy and Guile!</div>
</div>

I would love to have just one code for the imageinsert tag that would just autoresize based on how wide the image was.

hello everyone,
i am using css based menu . requirement is that, menu should adjust its width automatically based on the text length.

Here is my css : =
css Code:
Original - css Code li ul li { background: #000; color: #fff; padding-top: 4px; border-bottom: 1px solid #fff; letter-spacing:1px; text-transform: capitalize; text-shadow: 2px 2px 2px #22222; width: 250px; margin:0px auto; height: 18px; font-size: 11px; font-weight: normal; text-align:left; filter: alpha(opacity=80); opacity: 0.8; -moz-opacity: 0.8; }

  

  


 li ul li {


             background: #000;


             color: #fff;


             padding-top: 4px;


             border-bottom: 1px solid #fff;


             letter-spacing:1px;


             text-transform: capitalize;


             text-shadow: 2px 2px 2px #22222;


             width: 250px;


             margin:0px auto;


             height: 18px;


             font-size: 11px;


             font-weight: normal;


             text-align:left;


             filter: alpha(opacity=80);


             opacity: 0.8;


             -moz-opacity: 0.8;


         } 

you just see the attachment, you would realise that , the text is cropping & not displayed.


Also , can any one suggest , what can I do to make this CSS to cause make it attractive.?

It always amazes me how Microsoft can mess something up that was working before. Take the following example, a table cell set to a specific width, containing a div, width set to 100% of its containing block element (the table cell). Overflow:auto is applied to the div and content is placed in the cell that cannot be wrapped. See the code that follows:

html4strict Code:
Original - html4strict Code <table width="200px" cellpadding="0" cellspacing="0" border="0"> <tr> <td style="width: 200px;"> <div style="width: 100%; overflow: auto;"> <p style="white-space: nowrap;">Content that should not be wrapped.</p> </div> </td> </tr> </table>

  

  


 <table width="200px" cellpadding="0" cellspacing="0" border="0">


   <tr>


     <td style="width: 200px;">


       <div style="width: 100%; overflow: auto;">


         <p style="white-space: nowrap;">Content that should not be wrapped.</p>


       </div>


     </td>


   </tr>


 </table> 

One would expect to have the table cell display with a width of 200 pixels and scrollbars will be displayed for the un-wrappable content.

IE7 does not do that. It widens the cells width to accommodate the content. FF follows this perfectly. To fix this, one has to set the div to the same width as the table cell, like so:

html4strict Code:
Original - html4strict Code <table width="200px" cellpadding="0" cellspacing="0" border="0"> <tr> <td style="width: 200px;"> <div style="width: 200px; overflow: auto;"> <p style="white-space: nowrap;">Content that should not be wrapped.</p> </div> </td> </tr> </table>

  

  


 <table width="200px" cellpadding="0" cellspacing="0" border="0">


   <tr>


     <td style="width: 200px;">


       <div style="width: 200px; overflow: auto;">


         <p style="white-space: nowrap;">Content that should not be wrapped.</p>


       </div>


     </td>


   </tr>


 </table> 

Only then, IE7 will correctly display it. Just something to keep in mind when working with percentage widths.