tags:

views:

90

answers:

3
+2  Q: 

css styling with html

How can I have this other box display at the bottom of the first one?

If you try this code, these 2 boxes will be displayed together:
A B

And I would like it to be like this:
A
B

Thanks

=== now this is what I did: but it goes to the left side. I want it to stay in the right side. Here is the whole code:

             <html> 
 <head>
<title>*|MC:SUBJECT|*</title>
     <meta http-equiv="Content-type" content="text/html; charset=utf-8"> 
     <style type="text/css" media="screen">
        p{margin-bottom:10px;}

        /** 
        * @tab Page 
        * @section background color 
        * @tip Choose a color for your HTML email's background. You might choose one to match your company's branding. 
        * @theme page 
        */ 
        body { 
            /*@editable*/ background-color:#FFFFFF; 
            text-align:center;
        } 

        #layout { 
            margin:0 auto; 
            text-align:left;
        } 

        /** 
        * @tab Header
        * @section header top 
        * @tip Set the look of the archive link bar. 
        */ 
        #header-top { 
            /*@editable*/ background-color:#FFFFFF; 
            /*@editable*/ border-top:0px none;
            /*@editable*/ border-bottom:0px none;
            /*@editable*/ color:#505050;
            /*@editable*/ font-family:Arial; 
            /*@editable*/ font-size:11px; 
            /*@editable*/ font-style:normal; 
            /*@editable*/ font-weight:normal; 
            padding:15px 0 5px; 
            /*@editable*/ text-align:center; 
        } 

        /** 
        * @tab Header 
        * @section title style 
        * @tip Titles and headlines in your message body. Make them big and easy to read. 
        * @theme title 
        */ 
        .primary-heading { 
            /*@editable*/ color:#ACCB4E; 
            /*@editable*/ font-family:Arial; 
            /*@editable*/ font-size:48px; 
            /*@editable*/ font-style:normal; 
            /*@editable*/ font-weight:normal;
            /*@editable*/ line-height:100%; 
            margin:0;
            padding:0px;
            /*@editable*/ text-transform:uppercase; 
        } 

        /** 
        * @tab Header 
        * @section subtitle style 
        * @tip This is the byline text that appears immediately underneath your titles/headlines. 
        * @theme subtitle 
        */ 
        .secondary-heading { 
            /*@editable*/ color:#ACCB4E; 
            /*@editable*/ font-family:Arial; 
            /*@editable*/ font-size:20px; 
            /*@editable*/ font-style:normal; 
            /*@editable*/ font-weight:normal; 
            /*@editable*/ line-height:100%; 
            margin:0;
            padding:10px 0 0 0;
            /*@editable*/ text-transform:uppercase; 
        }

        /** 
        * @tab Body 
        * @section content 
        * @tip This is the default text style for the main content of your email. 
        * @theme content 
        */ 
        #content-left, #content-right { 
            /*@editable*/ background-color:#FFFFFF;
            /*@editable*/ color:#808080; 
            /*@editable*/ font-family:Arial; 
            /*@editable*/ font-size:14px; 
            /*@editable*/ font-style:normal; 
            /*@editable*/ font-weight:normal;
            /*@editable*/ line-height:150%;
            padding:15px 0 15px 20px;
            vertical-align:top;
            width:300px;
        } 

        #content-right{
            vertical-align:top;
        }

        /** 
        * @tab Body 
        * @section green box 
        * @tip This is the default style for the green tip box of your email. 
        * @theme content 
        */ 
        #greenbox{
            /*@editable*/ background:#ACCB4E;
            /*@editable*/ color:#FFFFFF;
            /*@editable*/ font-family:Arial; 
            /*@editable*/ font-size:16px; 
            /*@editable*/ font-style:normal; 
            /*@editable*/ font-weight:normal;
            /*@editable*/ line-height:150%;
            margin-top:20px;
            padding:10px 20px;
            /*@editable*/ text-transform:none;
        }

        /** 
        * @tab Body 
        * @section green tip box heading 
        * @tip This is the default style for the heading of the green tip box. 
        * @theme content 
        */ 
        #greenbox .secondary-heading {
            /*@editable*/ color:#FFFFFF;
            /*@editable*/ font-family:Arial; 
            /*@editable*/ font-size:20px; 
            /*@editable*/ font-style:normal; 
            /*@editable*/ font-weight:normal;
        }

        /** 
        * @tab Body 
        * @section sidebar widget headings 
        * @tip This is the default style for the sidebar widgets of your email. 
        * @theme content 
        */ 
        .widget .secondary-heading {
            /*@editable*/ color:#ACCB4E; 
            /*@editable*/ font-family:Arial; 
            /*@editable*/ font-size:18px; 
            /*@editable*/ font-style:normal; 
            /*@editable*/ font-weight:normal;
            /*@editable*/ line-height:100%;
            /*@editable*/ text-transform:none;
        }

        /** 
        * @tab Body 
        * @section sidebar widget text
        * @tip This is the default style for the sidebar widgets of your email. 
        * @theme content 
        */ 
        .widget {
            /*@editable*/ color:#808080; 
            /*@editable*/ font-family:Arial; 
            /*@editable*/ font-size:12px; 
            /*@editable*/ font-style:normal; 
            /*@editable*/ font-weight:normal;
            /*@editable*/ line-height:150%;
            margin-top:20px;
            margin-bottom:15px;
            width:260px;
        }

        /** 
        * @tab Footer 
        * @section footer 
        * @tip You might give your footer a light background color and separate it with a top border 
        * @theme footer 
        */ 
        #footer { 
            /*@editable*/ background-color:#FFFFFF; 
            /*@editable*/ border-top:0px none;
            /*@editable*/ border-bottom:0px none;
            /*@editable*/ color:#909090;
            /*@editable*/ font-family:Arial; 
            /*@editable*/ font-size:11px; 
            /*@editable*/ font-style:normal; 
            /*@editable*/ font-weight:normal; 
            /*@editable*/ line-height:14px; 
            padding:20px 0 20px 0;
            /*@editable*/ text-align:center;
        } 

        /** 
        * @tab Footer 
        * @section link style 
        * @tip Specify a color for your footer hyperlinks. 
        * @theme link_footer 
        */ 
        #footer a { 
            /*@editable*/ color:#5D7428; 
            /*@editable*/ font-weight:normal; 
            /*@editable*/ text-decoration:underline; 
        } 

        /** 
        * @tab Page 
        * @section link style 
        * @tip Specify a color for all the hyperlinks in your email. 
        * @theme link 
        */ 
        a, a:link, a:visited { 
            /*@editable*/ color:#5D7428; 
            /*@editable*/ font-weight:normal; 
            /*@editable*/ text-decoration:underline; 
        } 
     </style> 
 </head> 
 <body>
    <table width="600" border="0" cellspacing="0" cellpadding="0" id="layout">
        <tr>
            <td id="header-top" colspan="2" mc:edit="header-top">
                <p>Email not displaying correctly? <a href="*|ARCHIVE|*" title="View this email in your browser.">View it in your browser</a></p>
            </td>
        </tr>
        <tr>
            <td id="content-left" colspan="1">
                <div mc:edit="main">
                    <!--<img src="http://gallery.mailchimp.com/0d61bb2ec9002f0e9872b8c36/images/environment_newsletter_header.png"&gt;--&gt;
                    <img alt="" border="0" height="234px" src="http://gallery.mailchimp.com/86b4d752e397a2dbd09e3dd60/images/big_image_edited.2.jpg" width="400px" />
                    <h1 class="primary-heading">Live Green</h1>
                    <p>Sample copy. Lorem ipsum dolor sit amet, consectetuer orem adipiscing elit. Est em morbi commodo, ipsum sed pharetra est gravida. Suspendisse id velit vitae et ligula volutpat ipsum condimentum. </p>
                    <p>Sample copy. Lorem ipsum dolor sit amet, consectetuer orem adipiscing elit. Est em morbi commodo.</p>
                </div>
                <div id="greenbox" mc:edit="greenbox">
                    <h2 class="secondary-heading">Green Living Tip</h2>
                    <p>Sample copy. Lorem ipsum dolor sit amet, consectetuer orem adipiscing elit. Est em morbi commodo, ipsum sed pharetra est gravida, orci magna fugit rhoncus neque, id pulvinar odio lorem non turpis. </p>
                </div>
            </td>


  <tr> <div id="content-right" colspan="1">
        <div class="widget" mc:repeatable>
            <div mc:edit="content-right-repeatable">
                <h2 class="secondary-heading">Green Living Tip</h2>
                <p>Sample copy. Lorem ipsum dolor sit amet, consectetuer orem adipiscing elit. Est em morbi commodo, ipsum sed pharetra est gravida, orci magna fugit rhoncus neque, id pulvinar odio lorem non turpis.</p>
                <p><a href="#">Read More</a></p>
            </div>
        </div>
    </div>
    </tr>


<tr>
    <div id="content-right" colspan="1">
        <div class="widget" mc:repeatable>
            <div mc:edit="content-right-repeatable">
                <h2 class="secondary-heading">Green Living Tip</h2>
                <p>Sample copy. Lorem ipsum dolor sit amet, consectetuer orem adipiscing elit. Est em morbi commodo, ipsum sed pharetra est gravida, orci magna fugit rhoncus neque, id pulvinar odio lorem non turpis.</p>
                <p><a href="#">Read More</a></p>
            </div>
        </div>
    </div>
</tr>




        </tr>
        <tr>
            <td id="footer" colspan="2" mc:edit="footer">
                <p><a href="*|UNSUB|*">Unsubscribe</a> | <a href="*|UPDATE_PROFILE|*">Update your profile</a> | <a href="*|FORWARD|*">Forward to a friend</a></p>
                <p>Copyright (C) *|CURRENT_YEAR|* *|LIST:COMPANY|* All rights reserved.<br />*|LIST:DESCRIPTION|*<br />*|HTML:LIST_ADDRESS_HTML|*</p>
            </td>
        </tr>
    </table>
    <span style="padding: 0px;"></span>
 </body>

A: 

You can solve this by changing the TD's into TR's. (This changes it from two columns to two rows)

TomWij  2010-08-09 16:39:11
hi Tom where is the pink question mark located? i can't see itthanks
tintincute  2010-08-09 16:41:27
It's in the upper right corner when you edit your question, it explains how you can type the lines properly. But I changed it for you already... :-)
TomWij  2010-08-09 16:53:00
+2  A: 

Instead of using tables, you can use <div>s to build your boxes. <div> elements, by default, align one after another... but you can use CSS to style them and position them as you would like.

Check out the following link to see what I did with your design.

http://hristo.oskov.com/wp-content/uploads/2010/08/test.html

If you have questions about what I did or how I did it, let me know and I'll be happy to explain in full detail.

Hope this helps!

Hristo  2010-08-09 16:49:08
tintincute  2010-08-09 16:51:42
@tintincute... look at my update. Let me know if that is what you were looking for.
Hristo  2010-08-09 18:01:14
@Hristo: you made it even more better;-) The greenbox at the bottom you made it in the center and longer. But its ok. I will study this code and will understand. Thanks for your help. But this is just supposed to be in the first column.
tintincute  2010-08-10 08:26:02
@tintincute... the reason behind what I did was because I put the circle graphic and the "Green Living Tip"s next to each other, which means the width of the total page is now 900px instead of 600px like before, so I extended the bottom to match that. I could go back to the previous width if you want and just keep the "Green Living Tip"s kind of floating to the right?
Hristo  2010-08-10 12:46:50
@Hristo: thanks i would like to see that. Or now I can actually changed it directly right?
tintincute  2010-08-10 14:06:57
@tintincute... I'll go and edit this and update it on my site. I'll post back with the new layout in a bit... hopefully it doesn't take long :) brb...
Hristo  2010-08-10 14:10:46
thanks for taking the time:-)
tintincute  2010-08-10 14:12:49
of course! (btw... it won't hurt to upvote my answer if it helped you out) :)
Hristo  2010-08-10 14:13:37
@tintincute... done! check out! just click the link I have under the "UPDATE" and then make sure to refresh the page :) I hope you like it!
Hristo  2010-08-10 14:43:19
+2  A: 

If you're just using the table for laying out individual elements, you can (and should) use CSS for that. Just make 'td's into divs, and they'll be laid out one below the other automatically. Then, if you want to change positioning later on, you can just update your CSS instead of rearranging table structure.

I found a nice series of helpful tutorials at http://www.htmldog.com/guides/ when changing layouts from table-based to css-based.

Shawn D.  2010-08-09 16:49:49
i have css actually. but I'm not sure if this is the one:#content-right{ vertical-align:top;}how can i change it in the css?
tintincute  2010-08-09 17:02:32
@sdeer: please see my edited question
tintincute  2010-08-09 17:07:41
Yeah I was going to take a stab at this, but then I saw it uses tables for layout.
Stephen P  2010-08-09 17:59:51
Are you looking for floats? Like, something that floats on the right side of its container, or just right alignment?http://www.subcide.com/articles/creating-a-css-layout-from-scratch/P6/
Shawn D.  2010-08-09 18:10:23

related questions

IE7 HTML/CSS margin-bottom bug.
IE7: header above menu
How to create an all browser-compatible hanging indent style in CSS in a span
How can you customize the numbers in an ordered list?
style.display not working in Firefox, Opera, Safari - IE7 OK
Best WYSIWYG CSS editor?
How important is W3C XHTML/CSS validation when finalizing work?
Solve the IE select overlap bug
IE8 overflow:auto with max-height
Autosizing Textarea
What is the best way to create rounded corners using CSS?
FF3 WinXP != FF3 Ubuntu - why?
Is there a business reason for striving for pure CSS layout?
How to set up a CSS switcher in ASP.NET
Setting a div's height in HTML with CSS
Wrapping lists into columns
CSS Background Color in Javascript
How can I make the browser see CSS and Javascript changes?
What sites offer free, quality web site design templates?
Can you recommend a good CSS online resource or book?
Html CSS Editor
In HTML, how to word-break on a dash?
Detecting font in JavaScript
How do you test layout design across multiple browsers/OSs?
Why doesn't the percentage width child in absolutely positioned parent work in IE7?