CSS Layout problems

Aspire · April 28, 2010

I’m setting up a newsletter template to be sent out by email. It has sections for different articles, some small (on the left) and some longer (on the right) with links to the full articles at the end of the newsletter. My template needs to be expandable, which I thought I could do by adding more sidebar and content boxes.

Three things are not working:

1) To get the second sidebar to sit below the first one, I used “clear”. How can I get the content boxes on the right to start at the top beside sidebar1?

2) I have three content boxes with different color backgrounds. Why are they all coming up with the same color background?

3) This will be sent out by email using MS Outlook. The layout is fine in MS Explorer, but when I “File>Send>page by email”, the sidebar and content boxes no long touch. The sidebar box has become narrower. Is there a way to fix this?

I would really appreciate some help with these questions. Thanks in advance.

ebulletin_css.html

falkencreative · April 28, 2010

if you are creating an email template, you really need to -- unfortunately -- be using tables. Different email clients, including online email clients like gmail, yahoo mail, etc, render html email differently, and this helps preserve consistency between email clients.

http://www.mailchimp.com/articles/how_to_code_html_emails/

http://articles.sitepoint.com/article/code-html-email-newsletters

http://www.campaignmonitor.com/css/

Aspire · April 28, 2010

Thanks for that information, Benjamin. It is extremely helpful, but frustrating because I first designed the whole template using tables. When I set up the table, I had six columns and I gave each column a width. Then to get the sections I merged cells - four on the right and two on the left. So far so good, but as soon as I started adding content to the cells, using Dreamweaver as the end users will, the cell widths randomly changed. By the time I had three articles in, the table was a mess.

Since this template will be used by staff, I have to build a basic file that doesn't come with surprises for them.

So can anyone tell me how to lock the table grid widths?

(I'd still like to figure out the CSS problems too.)

virtual · April 28, 2010

You have to specify a width for your table cells. You can do this easily in DW, click the top of your table in Design View and select each column then specify the width in the properties panel.

falkencreative · April 28, 2010

When I set up the table, I had six columns and I gave each column a width. Then to get the sections I merged cells - four on the right and two on the left. So far so good, but as soon as I started adding content to the cells, using Dreamweaver as the end users will, the cell widths randomly changed.

It's possible that your merging of the cells cleared the widths you had set... I don't know though, the only way I can really tell is if I look at the code.

falkencreative · April 28, 2010

In regards to your original question, the way I would handle this is to wrap all of your sidebar divs in a div that is floated left with a set width, and do the same with all your content divs -- wrap them in a div floated right with a set width.

Something like this:

<!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=utf-8" />

   <title>Test</title>
   <style type="text/css">
/*<![CDATA[*/

   body {
   margin: auto;
   margin-left: 0px;
   margin-top: 0px;
   margin-right: 0px;
   margin-bottom: 0px;
   background-color: #CCCCCC;
   }
   * { margin: 0; padding: 0; 
   }

   #wrap { width: 740px; margin: auto; background: #fff; }
   #wrapper {position: relative; text-align: left; width: 250px; backgroun-image: url(http://edtowis.net/images/_sidebar_gradient.gif) }
   #header { height: auto; background: #f8c926; }
   #header2 { height: auto; background: #005594; margin: 0; padding: 10px; }

   #sidebarcol { float:left; width: 216px; }
  		#sidebar { background: skyblue; padding: 12px 12px 12px 12px; clear: left;}
   	#sidebar2 { background: #ddc17a; position: relative; padding: 12px 12px 12px 12px; clear: left;}
   	#sidebar3 { background: #f4f1d3; position: relative; padding: 12px 12px 12px 12px; clear: left;}

   #contentcol { float:right; width:476px; }
   	#content { background: #fbea95; padding: 12px 12px 12px 12px; clear: right;}
   	#content2 { background: #ddc17a; padding: 12px 12px 12px 12px; clear: right;}
   	#content3 { background: #cddfeb; padding: 12px 12px 12px 12px; clear: right;}

   #footer1 { position: relative; clear: both; height: auto; background: #f4f1d3; padding: 12px 12px 12px 12px;}
   #footer2 { position: relative; clear: both; height: auto; background: #ffffff; padding: 12px 12px 12px 12px;}
   #footer3 { position: relative; clear: both; height: 40px; background: #f8c926; padding: 12px 12px 12px 12px;}
   .clear {clear: both; }
   .spacer { margin-top: 40px; }
   p { margin-top: 0; text-align: left; font: arial, sans-serif;
   line-height: 1.4; color: #000000;   
   }
   body,td,th {
   font-family: Arial, Helvetica, sans-serif;
   font-size: small;
   color: #000000;
   }
   a:link {
   color: #FF9900;
   }
   a:visited {
   color: #CC6600;
   }
   a:hover {
   color: #FFCC00;
   }
   a:active {
   color: #ddc17a;
   }
   h1,h2,h3,h4,h5,h6 {
   font-weight: bold;
   }
   h1 {
   color: #005594;
   }
   h2 {
   color: #005594;
   }
   h3 {
   color: #005594;
   }
   /*]]>*/
   </style>
</head>

<body>
   <div id="wrap">
       <div id="header">
           <p>HEADER IMAGE</p>

           <p><br /></p>
       </div>
       <div id="header2">
           <p><br /></p>
       </div>

	<div id="sidebarcol">
        <div id="sidebar">
            <p>Sidebar</p>
            <p class="spacer">Sidebar</p>
        </div>
        <div id="sidebar2">
            <p>Sidebar</p>
            <p class="spacer">Sidebar</p>
        </div>
        <div id="sidebar3">
            <p>Sidebar</p>
            <p class="spacer">Sidebar</p>
        </div>
       </div>

	<div id="contentcol">
        <div id="content">
            <h1><strong>Responding to Media Questions</strong></h1>
            <p><a href="#more1"><strong>Read more ...</strong></a></p>
        </div>
        <div id="content2">
            <p>Content</p>
            <p class="spacer">Content</p>
            <p class="spacer">Content</p>
            <p class="spacer">Content</p>
            <p class="spacer">Content</p>
            <p class="spacer"><a href="#more2"><strong>Read more ...</strong></a></p>
        </div>
        <div id="content3"></div>
	</div>

       <h3> </h3>

       <div id="footer1">
           <p>... <a id="more1"></a>continued</p>
           <p> </p>
       </div>

       <div id="footer2">
           <p>... <a id="more2"></a>continued</p>
           <p> </p>
       </div>

       <div id="footer3">
           <p>Other Footer content</p>
       </div>
   </div>
</body>
</html>

Aspire · April 28, 2010

Re: Shifting table cells -

Here is the code Dreamweaver came up with for the merged cell with content added:

<td colspan="2" rowspan="2" valign="top" bgcolor="cddfeb"><h3>Approving the Budget </h3>

<p> Last month ... </p></td>

A row with merged cells and no content looks like this:

<tr>

</tr>

which is odd because that row actually contains a merged cell spanning 4 columns and a merged cell spanning 2 columns.

Aspire · April 28, 2010

Benjamin, that revised CSS layout works perfectly. Thank you so much for sharing your expertise!

Aspire · April 28, 2010

So now that I know I need to lay out the newsletter in tables, I have been working on the td width for colspan cells. Any suggestions of how to stop the width of the merged cells from changing as content is added?

falkencreative · April 29, 2010

So now that I know I need to lay out the newsletter in tables, I have been working on the td width for colspan cells. Any suggestions of how to stop the width of the merged cells from changing as content is added?

I'd really need to see the code for the entire table -- since you have some cells spanning other cells, I can't really figure it out without it.

Aspire · April 29, 2010

Thanks for being willing to pursue this. The file for the email newsletter done with html tables is attached.

ebulletin_tables.html

jstern · April 29, 2010

I havent look at your code, but have you tried to use the style WORD-BREAK:BREAK-ALL;

Last I knew about it, it was an IE style only, though might have changed??!?

Sign In

CSS Layout problems

Recommended Posts

Aspire

falkencreative

Aspire

virtual

falkencreative

falkencreative

Aspire

Aspire

Aspire

falkencreative

Aspire

jstern

Join the conversation

Browse

Activity

Store

Support