SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 37
  1. #1
    SitePoint Evangelist
    Join Date
    Jul 2008
    Location
    Port Elizabeth, South Africa
    Posts
    404
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    how to divide text area into 2 cols?

    Hi - please can someone help me to:

    (1) divide this center text area into 2 columns so I have a box on the right for categories, etc. Currently it's <div class="txtbox">

    http://www.eatsprouts.com/test/google.php

    pls ignore the bottom wider textarea which is required by google search.

    I did have my right-hand column *outside* the text area, see:

    http://www.eatsprouts.com/test/main.php

    But then I discovered if it's outside, my cell phone reads the left + right columns first, and I want it to read my text area first, then the right column second. The left nav column I'm deleting altogether.

    (2) In the header, how can I get a space between "Enter email" and "send my ebook". I've tried both <br /> and <p> but neither work.

    thank you! - Val

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    1) It's not possible in CSS2.1 but in CSS3 it is possible-but the support for it is very minimal. Webkit supports it and FF3.5 only. So it's not really usable so far
    2) Add a top margin to ".ebk p"
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    SitePoint Evangelist
    Join Date
    Jul 2008
    Location
    Port Elizabeth, South Africa
    Posts
    404
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Ryan - thanks for your quick response! Does that mean all sites with right-hnd col for nav or whatever (+ wordpress blogs with categories on the right) have their rgt-col read first by mobiles, before text area?

    Is there any way to tell google + mobiles to read my txtbox first? Or will switching to wordpress do it?

    thanks, Val

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by valarcher View Post
    Is there any way to tell google + mobiles to read my txtbox first?
    If you mean search engines, just place it first in the source order.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  5. #5
    SitePoint Member
    Join Date
    Aug 2009
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    second that suggestion... If you put the textbox before the left and right coumns in the code, then it will be read first. But this may screw up your layout since you are floating those columns. You might need to simply float everything left against your nav bar and place the code in this order: #leftcolumn, #textbox, #rightcolumn.

    On another note, I was having a hard time following your code. There are generous comments which are nice, but it is inconsistent with the line indents and where you place the closing tags for structure elements. Also it seems over complicated. Try changing out some of those hacks for different browsers with more simple code that is crossbrowser friendly. For what it's worth...
    Last edited by anticowboyism; Aug 8, 2009 at 12:18. Reason: clarity

  6. #6
    SitePoint Evangelist
    Join Date
    Jul 2008
    Location
    Port Elizabeth, South Africa
    Posts
    404
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi - thank you! I don't know how to float everything. I don't mind about google, it finds h1 easily, I worry about mobiles having to wade through testimonials or links in the right col before they get to the actual info they're going to the page for. But guess since I barely know what I'm doing, I'll leave it all alone.

    I was hoping there'd be simple way to divide the center txtbox into 2 columns + move the testimonials into it. I still can't understand why we can have 3 cols on a page where the leftcol is read first, but then we can't divide the center col into 2 cols where the left col is read first.

    My goal is to have only the leafy branches in the outside left + right cols, then a center txtbox made up of 2 cols, with data in left col read first, and testimonials (or links) in right col read second. Why does that stump current css?

    I'll watch closing tags more closely - thanks! I don't know simpler code, I paid someone here at sitepoint to do that basic structure for me! I wish it were simpler because it takes my cell phone in South Africa forever to read all that css before it displays page.

    thanks for your kind feedback - Val

  7. #7
    SitePoint Member
    Join Date
    Aug 2009
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So basically I've just created two new divs inside that textbox, one for the left, and one for the right. I've changed the html between the "begin txtcontent" comments as following:
    Code:
    <!--BEGIN txtcontent-->
    	  <div class="txtbox1">
          	    <h1 class="hdr">Search Results for This Website</h1>
    	    <p>Please forgive if you find any google Ads rather unseemly.
    	    It's the price we pay for Google's free search engine :)</p>
        	  </div>
        	  <div class="txtbox2">
                <p>Content for  class "textbox2" Goes Here</p><p>Content for  class "textbox2" Goes Here</p>
                <p>Content for class "textbox2" Goes Here</p><p>Content for  class "textbox2" Goes Here</p>
                <p>Content for  class "textbox2" Goes Here</p>
        	  </div>
        <div class="clear"></div>
        <div class="leaf25"></div>
    
    <!--END txtcontent-->
    You may need to edit the google search script to insert the results into the new txtbox1 rather than txtbox. Notice how with proper use of indentation you can clearly see the hierarchy of what is contained within what, even without any comments.
    Then I added some css to make the left box 58&#37; of the width and the right box 40%, with 2% between for padding. Notice they total to 100%. You can change these values to whatever is appealing to you, as long as they add up to 100%.
    Code:
    .txtbox1 {float: left; width: 58%; padding-right: 2%;}
    .txtbox2 {float: left; width: 40%;}
    .clear {clear: both;}
    Last edited by anticowboyism; Aug 9, 2009 at 14:06. Reason: mistake

  8. #8
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by valarcher View Post
    I don't know simpler code, I paid someone here at sitepoint to do that basic structure for me! I wish it were simpler because it takes my cell phone in South Africa forever to read all that css before it displays page.
    Hi Val,
    When I coded the basic structure for you (almost a year ago) you never mentioned that you needed a content first layout. At the time your main concern was a fully flexible site that was built around all your leaf images. That was accomplished and it required several extra divs to make it happen. The css was as lean as it could be at that time when I completed what you requested me to do. When you took over and started styling your bottom navigation and all the other misc. styles for various pages the css has grown considarably from it's original size. The additional css that has been added is beyond my control.

    Quote Originally Posted by valarcher View Post
    I was hoping there'd be simple way to divide the center txtbox into 2 columns + move the testimonials into it. I still can't understand why we can have 3 cols on a page where the leftcol is read first, but then we can't divide the center col into 2 cols where the left col is read first.

    My goal is to have only the leafy branches in the outside left + right cols, then a center txtbox made up of 2 cols, with data in left col read first, and testimonials (or links) in right col read second. Why does that stump current css?
    It's not a problem to rework the html and css to have the main content come first in the source order. The top leaf structure will still have to come before your content and side columns in order for your layout to work correctly and maintain your original leaf requirments. Once you see that it can be done I think you will see that you don't need to relocate the visual position of the side columns.

    I found a copy of the original structure in my back up files. I have set it up as a content first layout. It required a new div called #innerwrap since your center column is fluid width, basically it is the former #content div. Load this to your test files and see how your phone does with it. You can make the center column into two divisions if you need to but that may not be the case if this works out for you.

    Kind Regards

    Code:
        /*====== Begin Center Content ======*/
    #innerwrap {
        margin:0 160px; /*---160px for Lt. and Rt. Leaf Columns---*/
        background:red;
        text-align: justify;
        line-height: 1.25em;
        margin-bottom: 10px; 
        margin-top:20px;
        float:left;/*contain child floats and haslayout*/
        display:inline; /*--for ie6--*/ 
    }
    #content {
        float:left;
        width:100&#37;;
        min-height:400px;
        background: #C5FFBF;  
    }
    #left {
        float:left;
        width:160px;
        min-height:400px;
        margin-top: -20px;
        margin-left: -160px;
        position:relative;
        left:-100%;
    }
    Working example
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="robots" content="noindex,nofollow,noarchive" />
    
    <title>Automatic Sprouters</title>
    
    <style type="text/css">
    
    /*----------  Resets ----------*/
    body, address, blockquote, dl, ol, ul, li, form, fieldset, legend, h1, h2, h3, h4, h5, h6, p, pre {
        margin:0;
        padding:0;
    }
    body {
        background: #E5FFBF;
        margin:2.5% auto;
        font:95% arial,"trebuchet ms",tahoma;
        color:#333
    }
    h2,h3,h4,h5 {padding: 5px;}
    p {padding: 10px;}
    .center {text-align:center;}
    .floatleft {float: left;}
    .floatright {float: right;} 
    .clear {clear: both;}
    
    #wrapper {
        width: 95%;
        min-width: 770px;
        margin:0 auto;
        overflow:hidden;
        background: #E5FFBF;
        border: 1px solid green;
    }
    #topnav{
        font-family: "trebuchet ms", arial, sans-serif;
        font-size: 0.8em;
        text-align: right; 
        border-bottom: green 1px solid;
        padding: 0.5em;
    }
        /*====== Begin Header Styles ======*/
    #header {
        text-align:center;
        border-bottom: 1px solid green;
        width:100%;
        float:left;
        min-height:300px;
    }
    * html #header {height:320px;}
    .pic {
        float:left;
        width: 150px;
        height: 300px;
        margin: 10px 10px 10px 0;
        background:palegreen;
        overflow:hidden;
    }
    .ebook {
        float:left;
        width: 350px;
        margin: 60px 10px 10px 0;
        background:#C5FFBF;
        text-align:left;
    }
    .ebook h4 {color: #F00251; text-align:center;}
    .ebook .floatleft {
        float: left;
        text-align: center;
        margin:0;
    }
    .tel {
        float:right;
        width: 240px;
        margin: 10px 0;
        color:green;
        background:#C5FFBF;
    }
    .home-of {
        float:right;
        clear:right;
        width:180px;
        margin: 10px 70px 0 0;
        color: #F00251;
        font: 95% normal "trebuchet ms", arial, sans-serif;
        background:#C5FFBF;
        display: inline; /*for ie6*/
    }
    .green {
        color:#006600;
        font-family: verdana;
    }
        /*====== End Header Styles ======*/
        /*====== Begin Top Leaf Positions ======*/
    #topleaf {
        height:63px;
        border-bottom: 1px solid green;
        padding: 0 40px; /*--- position images lt and rt ---*/
        clear: both; /*clear the header floats*/
    }
    .top-left {
        float:left;
        width:200px;
        height:63px;
        background: #C5FFBF url(images/pg-lft-top.gif) no-repeat;
        margin:0;
    }
    .top-right {
        float:right;
        width:200px;
        height:63px;
        background: #C5FFBF url(images/pg-rgt-top.gif) no-repeat;
        margin:0;
    }
    .topleaftext { /*-- Text Between Top Leaves --*/
        font-family: "Comic Sans MS";
        color: #A1B37F;
        padding:10px 0 0 0;
        text-align:center;
    }
    .down-left {
        float:left;
        width:53px;
        height:177px;
        background: #C5FFBF url(images/pg-lft-dwn.gif) no-repeat;
        margin:0;   
    }
    .down-right {
        float:right;
        width:53px;
        height:177px;
        background: #C5FFBF url(images/pg-rgt-dwn.gif) no-repeat;
        margin:0;   
    }    
        /*====== End Top Leaf Positions ======*/
        /*====== Begin Center Content ======*/
    #innerwrap {
        margin:0 160px; /*---150px for Lt. and Rt. Leaf Columns---*/
        text-align: justify;
        line-height: 1.25em;
        margin-bottom: 10px; 
        margin-top:20px;
        float:left;/*contain child floats and IE7 haslayout*/
        display:inline; /*--for ie6--*/ 
    }
    * html #innerwrap {height:1%;}/*haslayout for ie6*/
    
    #content {
        float:left;
        width:100%;
        min-height:400px;
        background: #C5FFBF;  
    }
    #left {
        float:left;
        width:160px;
        min-height:400px;
        margin-top: -20px;
        margin-left: -160px;
        position:relative;
        left:-100%;
    }
    #right {
        float:right;
        width:160px;
        min-height:400px;
        margin-right:-160px;
        margin-top: -20px;
        position:relative;        
    }
    * html #left,* html #right {height:400px} /*--- iE6 treats height as min-height ---*/
    .right-inner,.left-inner {
        background:#F2FFDF;
        margin-top:190px; /*--this pulls the lt. & rt. inner columns under the leaves--*/
        text-align:left;
        width:150px;
    }
    .right-inner {margin-left:10px;} /*push inner column right*/
    .right-inner p,.left-inner p {font-size:.75em;}
    
    .centerleaf {  /* single small leaf inside content */
        width: 130px; /*30px*/
        height: 25px;
        background: url(images/leaf.gif) no-repeat;
        padding: 0;
        margin: 10px auto; 
    } 
        /*====== End Center Content ======*/    
        /*====== Begin Bottom Leaf Positions ======*/
    #leafup {
        position: relative;
        min-height:157px;
        border-top: 1px solid green;
        margin-bottom: 20px; 
        clear:both;       
    }
    * html #leafup {height:158px;}
    .up-left {
        position:absolute;
        width:53px;
        height:177px;
        left:0;
        bottom:-20px; /*--pull down to allow for parents margin-bottom:20px--*/
        background: #C5FFBF url(images/pg-lft-up.gif);   
    }
    .up-right {
        position:absolute;
        width:53px;
        height:177px;
        right:0;
        bottom:-20px; /*--pull down to allow for parents margin-bottom:20px--*/
        background: #C5FFBF url(images/pg-rgt-up.gif);    
    }
    #linkbox {
        margin:0 160px;
        background: #C5FFBF;
        margin-top:10px;
    }    
    #botleaf {
        height:63px;
        border-top: 1px solid green;
        padding: 0 40px; /*--- position images lt and rt ---*/
        border-bottom: 1px solid green;
    }
    .bot-left {
        float:left;
        width:200px;
        height:63px;
        background: #C5FFBF url(images/pg-lft-end.gif);
        margin:0;
    }
    .bot-right {
        float:right;
        width:200px;
        height:63px;
        background: #C5FFBF url(images/pg-rgt-end.gif);
        margin:0;
    }
    .btp-top {
        width: 25px;
        height: 31px; 
        background: #E5FFBF url(images/btp-top.gif) no-repeat;
        margin:19px auto 0 auto;
        padding: 0;  
    }
        /*====== End Bottom Leaf Positions ======*/
        /*====== Begin Footer Styles ======*/ 
    #botnav {
        margin:0 150px;
        border: 1px solid green;
        border-top: none;
        min-height:200px;
    }
    * html #botnav {height:200px;}
    .bot-ebook {
        text-align:center;
        width:25em;
        margin:0 auto; 
        border:1px solid green;
        border-top:none;
    }
    #botnav h4 {color: #F00251;}
    
        /*==== Begin Footer List Styles ====*/
    .navlist ul {
        list-style-type: none;    
        margin: 0;
        padding: 0;
        height:1%; /*haslayout for ie6*/
    }
    .navlist li {
        display: inline;
        padding: 2px;
        margin:0;
        list-style-type: none;
    }
    .navlist a {color: blue;}
    
    .navlist a:link, .navlist a:visited {
        text-decoration: none;
    }
    .navlist a:hover {
        color: #F00251;; 
        background:white;
        letter-spacing: 1px;
    }
    .navlist ul {display:inline}
    .navlist li{display:block}
    .navlist li li{display:inline;}
    .navlist li li.sub{display:block} /*extra class for firefox bug*/
    .navlist li ul.lastsub{display:block; padding-top:2px; margin-left:3px;}
    
    .navlist ul ul {
        display:block;
        margin: 0 0 20px 0;
        background:url(images/btn-middot.gif) no-repeat 0 5px;
        padding: 0 0 0 30px;
    }
    .shop, .info, .web {
        color: green!important; 
        font-weight:bold; 
        margin:0; 
        padding: 6px 0 0 35px;
        display:inline;
        vertical-align:top;
    }
    .navlist li ul{vertical-align:top;} /* for firefox*/
    
        /*==== End Footer List ====*/
    
    .lastleaf {
        margin:0 auto;
        background: #C5FFBF url(images/pg-end.gif) no-repeat;
        padding:10px;
        width:300px; 
        height:67px;
        clear:both; 
    }
    
    #footer {
        min-height:40px;
        clear:both;
        background: #E5FFBF;
        text-align:center;
        border-top: 1px solid green;
    }
    #footer p {color: #006600;}
    /*====== End Footer Styles ======*/    
    
    /*==== Begin Vertical Menu Left ====*/
    #navleft { 
        width:136px; 
        padding-top:6px;
        margin-left:6px; 
    }
    #navleft ul {
        margin-left: 0px;
        padding-left: 0;
        list-style-type: none;
        font-family: Arial, Helvetica, sans-serif;
        border: 1px solid green;
        border-bottom: none;
    }
    #navleft a {
        display: block;
        padding: 3px;
        width: 128px;
        background-color: #E5FFBF;
        border-bottom: 1px solid green;
    }
    #navleft a:link, #leftnav a:visited {
        color: green;
        text-decoration: none;
    }
    #navleft a:hover {
        background-color: #C5FFBF;
        color: #333;
    }
    
    </style>
    </head><body>
    <div id="wrapper">
        <div id="topnav">Ionizing Sprouting Blending Juicing Dehydrating Eating Raw Affiliates</div>
            <div id="header">
                <div class="pic">
                    <h4>pic</h4>
                </div>
                <div class="ebook">            
                    <h4>FREE TODAY - RAW RECIPE eBOOK !</h4>
                    <div class="floatleft"><img src="images/rp-rawchoc.jpg" alt="easy raw choclate" width="120"
                    height="120" /><br /><p>easy raw choclate</p></div>
                    <p>Raw Snacks, Meals, Drinks, Color Photos, Kitchen Tour + Inspiring Testimonials!</p>
                    
                    <form action="http://www.eatsprouts.com/cgi-bin/dada/mail.cgi"><input name="flavor" 
                    value="subscribe" type="hidden"/><input name="list" value="health" type="hidden"/>
                    <input name="email" value="enter email--strict privacy" size="24" type="text"/><br />
                    <input value="Send my eBook =&gt;" type="submit"/></form>
                
                </div>
                    <h3 class="tel">Need a Discount Today?...<br /> 
                    Call 989-689-0005...</h3>
                <div class="home-of">
                    <h3>You've Reached<br />the Home of the</h3> 
                    <h3 class="green">GOGREEN<br />AUTOMATIC<br />SPROUTER!</h3>
                </div>           
            </div><!--end header-->
                <div id="topleaf">
                    <div class="top-left"></div><!--left-leaf: Do Not Disturb-->
                    <div class="top-right"></div><!--right-leaf: Do Not Disturb-->
                    <h2 class="topleaftext">Dehydrating</h2><!--Text Between Top Leaves-->
                </div><!--end topleaf-->
        
            <div id="innerwrap">
                <div id="content">     
                    <h3 class="center">Main Content First in Source Order</h3>                
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
                    Mauris vel magna. Mauris risus nunc, tristique varius, gravida in,
                    lacinia vel, elit. Nam ornare, felis non faucibus molestie, nulla augue
                    adipiscing mauris, a nonummy diam ligula ut risus. Praesent varius. Cum
                    sociis natoque penatibus et magnis dis parturient montes, nascetur
                    ridiculus mus. Nulla a lacus. Nulla facilisi. Lorem ipsum dolor sit amet,
                    consectetuer adipiscing elit. Fusce pulvinar lobortis purus. Cum sociis
                    natoque penatibus et magnis dis parturient montes, nascetur ridiculus
                    mus. Donec semper ipsum et urna. Ut consequat neque vitae felis.
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
                    Mauris vel magna. Mauris risus nunc, tristique varius, gravida in,
                    lacinia vel, elit. Nam ornare, felis non faucibus molestie, nulla augue
                    adipiscing mauris, a nonummy diam ligula ut risus.
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
                    Mauris vel magna. Mauris risus nunc, tristique varius, gravida in,
                    lacinia vel, elit. Nam ornare, felis non faucibus molestie, nulla augue
                    adipiscing mauris, a nonummy diam ligula ut risus.</p>                
                    <p class="centerleaf">Leaf Image Here</p>                               
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
                    Mauris vel magna. Mauris risus nunc, tristique varius, gravida in,
                    lacinia vel, elit. Nam ornare, felis non faucibus molestie, nulla augue
                    adipiscing mauris, a nonummy diam ligula ut risus. Praesent varius. Cum
                    sociis natoque penatibus et magnis dis parturient montes, nascetur
                    ridiculus mus. Nulla a lacus. Nulla facilisi. Lorem ipsum dolor sit amet,
                    consectetuer adipiscing elit. Fusce pulvinar lobortis purus. Cum sociis
                    natoque penatibus et magnis dis parturient montes, nascetur ridiculus
                    mus. Donec semper ipsum et urna. Ut consequat neque vitae felis.
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
                    Mauris vel magna. Mauris risus nunc, tristique varius, gravida in,
                    lacinia vel, elit. Nam ornare, felis non faucibus molestie, nulla augue
                    adipiscing mauris, a nonummy diam ligula ut risus.
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
                    Mauris vel magna. Mauris risus nunc, tristique varius, gravida in,
                    lacinia vel, elit. Nam ornare, felis non faucibus molestie, nulla augue
                    adipiscing mauris, a nonummy diam ligula ut risus.</p>
                </div><!--end content-->     
                
                <div id="left">
                    <div class="down-left"></div><!--left-leaf-down: Do Not Disturb-->
                    <div class="left-inner"><!--left inner col-->
                   <div id="navleft">
                        <ul id="leftnav">
                            <li id="active"><a href="#" id="current">Item one</a></li>
                            <li><a href="#">Item two</a></li>
                            <li><a href="#">Item three</a></li>
                            <li><a href="#">Item four</a></li>
                            <li><a href="#">Item five</a></li>
                        </ul>
                    </div>
                    <h5 class="center">Left-Inner</h5><!--begin optional left text--> 
                    <p>This is just to show how to access this column for the 
                    option of using this space for text below menu.</p>
                    </div><!--end left inner col-->
                </div><!--end left-->
                
                <div id="right">
                    <div class="down-right"></div><!--right-leaf-down: Do Not Disturb-->
                    <div class="right-inner"><!--right inner col-->
                        <h5 class="center">Testimonial Box</h5>
                        <p>Rev. George Malkmus of Hallelujah Acres, Shelby, NC, loves his GoGreen Sprouter:
                        "Sprouter up and running - HALLELUJAH!  Dear Val, the sprouter is fantastic!  
                        Just harvested our first 5 trays, one of them sunflower sprouts, and they all 
                        turned out great!  Thanks for making it happen!  Blessings!"</p>
                    </div><!--end right inner col-->
                </div><!--end right-->             
            </div> <!-- end innerwrap -->
        
            
            <div id="leafup"> 
                    <div class="up-left"></div><!--left-leaf-up: Do Not Disturb-->
                    <div class="up-right"></div><!--right-leaf-up: Do Not Disturb-->
                <div id="linkbox">  
                    <h5 class="center">Helpful Links Below</h5>                
                    
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
                    Mauris vel magna. Mauris risus nunc, tristique varius, gravida in,
                    lacinia vel, elit. Nam ornare, felis non faucibus molestie, nulla augue
                    adipiscing mauris, a nonummy diam ligula ut risus. Praesent varius. Cum
                    sociis natoque penatibus et magnis dis parturient montes, nascetur
                    ridiculus mus. Nulla a lacus. Nulla facilisi. Lorem ipsum dolor sit amet,
                    consectetuer adipiscing elit. Fusce pulvinar lobortis purus. Cum sociis
                    natoque penatibus et magnis dis parturient montes, nascetur ridiculus
                    mus. Donec semper ipsum et urna. Ut consequat neque vitae felis.
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
                    
                </div>
            </div><!--end leafup-->
            <div id="botleaf">
                <div class="bot-left"></div><!--left-leaf: Do Not Disturb-->            
                <div class="bot-right"></div><!--right-leaf: Do Not Disturb-->
                <p class="btp-top"><a href="#"></a></p><!--back to top image-->
            </div><!--end botleaf-->   
        <div id="botnav">
            <div class="bot-ebook">
                <h4>FREE TODAY - RAW RECIPE eBOOK !</h4>
                <form action="http://www.eatsprouts.com/cgi-bin/dada/mail.cgi"/><input type="hidden" name="flavor"
                value="subscribe"/><input type="hidden" name="list" value="health"/><input type="text" name="email" 
                value="enter email--strict privacy" size="24"/><input type="submit" value="Send my eBook =&gt;"/>
            </div>           
            <br />
            <ul class="navlist">
                <li>
                    <h4 class="shop">Shop - </h4>
                    <ul>
                        <li><a href="#">Item one</a> |</li>
                        <li><a href="#">Item two</a> |</li>
                        <li><a href="#">Item three</a> |</li>
                        <li><a href="#">Item four</a> |</li>
                        <li><a href="#">Item five</a> |</li>
                        <li><a href="#">Item six</a> |</li>
                        <li><a href="#">Item seven</a></li>
                        <li class="sub">
                            <ul>
                                <li><a href="#">Item one</a> |</li>
                                <li><a href="#">Item two</a> |</li>
                                <li><a href="#">Item three</a> |</li>
                                <li><a href="#">Item four</a> |</li>
                                <li><a href="#">Item five</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li>
                    <h4 class="info">Info - </h4>
                    <ul>
                        <li><a href="#">Item one</a> |</li>
                        <li><a href="#">Item two</a> |</li>
                        <li><a href="#">Item three</a> |</li>
                        <li><a href="#">Item four</a> |</li>
                        <li><a href="#">Item five</a> |</li>
                        <li><a href="#">Item six</a> |</li>
                        <li><a href="#">Item seven</a></li>
                        <li class="sub">
                            <ul>
                                <li><a href="#">Item one</a> |</li>
                                <li><a href="#">Item two</a> |</li>
                                <li><a href="#">Item three</a> |</li>
                                <li><a href="#">Item four</a> |</li>
                                <li><a href="#">Item five</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li>
                    <h4 class="web">Web - </h4>
                    <ul>
                        <li><a href="#">Item one</a> |</li>
                        <li><a href="#">Item two</a> |</li>
                        <li><a href="#">Item three</a> |</li>
                        <li><a href="#">Item four</a> |</li>
                        <li><a href="#">Item five</a> |</li>
                        <li><a href="#">Item six</a> |</li>
                        <li><a href="#">Item seven</a></li>
                        <li>
                            <ul class="lastsub">
                                <li><a href="#">Item one</a> |</li>
                                <li><a href="#">Item two</a> |</li>
                                <li><a href="#">Item three</a> |</li>
                                <li><a href="#">Item four</a> |</li>
                                <li><a href="#">Item five</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
        <div class="lastleaf"></div><!--last-leaf: Do Not Disturb-->    
        <div id="footer">
            <p class="center">EatSprouts.com, Eat-Sprouts.com, GreenSmoothie.com &amp; GreenSmoothies.com are one site.
            <br />Any of our 4 names will get you here. Thank you for coming!</p>
        </div>    
    </div> <!-- end wrapper -->
     
    </body></html>

  9. #9
    SitePoint Evangelist
    Join Date
    Jul 2008
    Location
    Port Elizabeth, South Africa
    Posts
    404
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi antiC - Thank you for your easy code. I'm keeping it for the future.

    Hi Ray - thanks for keeping track of me! yes I agree, all the extra css is from the tables, images + nav's, not your clean structure.

    I really like your solution, it looks neat, and means I can keep lft + rgt cols as is. But I've been sitting for hours and I can't figure out how your #innerwrap + #content fits into what I have.

    Please can you see how I can add it in? Can you stick to my ID + class names + my padding etc? But just add #innerwrap + add any css (if needed) to my #content and/or .txtbox to make it work?

    Here's my current content + txtbox (I've deleted all css relating to content2 + txtbox2 to make it clearer):

    #content {padding: 0; /* for dwnleafs */
    min-height: 0;
    margin:15px 160px 0;}

    * html #content {height:1&#37;}

    .txtbox {padding: 25px;
    padding-top: 0px;
    background: white;
    -moz-border-radius: 30px;}

    My html structure is:

    <div id="content">
    <div id="leftcol">
    </div><!--end leftcol-->
    <div id="rightcol">
    </div><!--end rightcol-->
    <div class="txtbox">
    <p>this is what needs to come first</p>
    </div><!--end txtbox-->
    </div><!--end content-->

    It's ok if you need to change txtbox into an ID (I think). I can't recall if Paul added txtbox or if I changed your names.

    thanks million, grateful for your help - Val

  10. #10
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    The div I had set as #content in my last revision is basically the same as what you are calling texbox. You had everything nested within #content which I renamed as #innerwrap as that name is describing what that div does, it wraps everything in the mid section of the page.

    See if this stripped down example with your ID names will clear things up for you. You can set two columns in txtbox if you want to. It is first in the source so whatever you have in it will come before your columns. After looking back at my last example it may be better to get that float off of the wrapping div (#content) since it does not have a width defined. It could shrinkwrap if your content in the #content div is not 100&#37; wide. You can use the clearfix method or display:table to contain the floats in this case.


    Code:
    #content {
        margin:0 160px; /*---150px for Lt. and Rt. Leaf Columns---*/
        text-align: justify;
        line-height: 1.25em;
        margin-bottom: 10px; 
        margin-top:20px;
        min-height:0;/*haslayout for ie7*/
        display:table;/*contain inner floats in modern browsers*/
    }
    * html #content {height:1%;}/*haslayout for ie6*/
    
    #txtbox {
        float:left;
        width:100%;
        min-height:400px;
        background: #C5FFBF;  
    }
    #left {
        float:left;
        width:160px;
        min-height:400px;
        margin-top: -20px;
        margin-left: -160px;
        position:relative;
        left:-100%;
    }
    #right {
        float:right;
        width:160px;
        min-height:400px;
        margin-right:-160px;
        margin-top: -20px;
        position:relative;        
    }
    HTML Code:
    <div id="content">
        
        <div id="txtbox">     
        </div><!--end txtbox-->     
        
        <div id="left">
        </div><!--end left-->
        
        <div id="right">
        </div><!--end right-->             
    
    </div> <!-- end content -->

  11. #11
    SitePoint Evangelist
    Join Date
    Jul 2008
    Location
    Port Elizabeth, South Africa
    Posts
    404
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Ray - I forgot to mention, my actual structure is multiple textboxes, so my problem is when you change text-align, margin etc in content, then I get confused - because my css changes these only within the txtboxes, they vary according to how I'm using that txtbox - e.g. I'll use txtbox2 to extend beyond down-leafs to full page width (for comparison tables or photos).

    that's why I have this line (txtbox2 is full-pg):

    .txtbox2wh, .txtbox2gr {margin: 0 auto} /*set width under Fonts+Spacing*/

    Is it possible, as a first step, you could just move my current structure around to show me how all txtcontent can come before lft-inner + rgt-inner? This is my current structure -

    <div id="content">
    <div id="leftcol">
    <div class="down-lft"></div><!--downleaf-->
    <div class="lft-inner">LEFTNAV</div>
    </div><!--end leftcol-->
    <div id="rightcol">
    <div class="down-rgt"></div><!--downleaf-->
    <div class="rgt-inner">TESTIMONIALS</div>
    </div><!--end rightcol-->
    <!--BEGIN txtcontent-->
    <div class="txtbox">TXT BETW DOWNLEAFS
    </div><!--end txtbox-->
    </div><!--end content-->
    <div class="txtbox2wh">FULL-PAGE TEXT, extends under downleafs
    </div><!--end txtbox2-->
    <!--END txtcontent-->

    Everything between *Begin + End txtcontent* must come before lft-inner + rgt-inner. Is that possible? Please could you look at http://eatsprouts.com/test/main.php (shows what txtbox2 looks like) and see if there's a way to re-write the above structure to do this?

    Then is it possible we can add to the css just the new things you have? viz.

    #content {display:table}
    .txtbox {
    float:left;
    width:100&#37;;
    min-height:400px;/*why need for this?*/
    }

    I'm not sure what your #left (and #right) is called in my css so I've left them out for now. Is it leftcol or lft-inner? When re-writing structure, please could you use the same id/class names I'm using? and add a new id/class name only when it's a new id/class needed to make the new structure work.

    I also have a #content2 which has down-leafs only, used at http://eatsprouts.com/test/google.php. I'll be using that structure - content2, #leftcol2, #rightcol2 - to convert a lot of txtcontent-only pages, such as http://eatsprouts.com/eat/carbs-1.html and *carbs-2*, *carbs-3* etc, where I don't need a lft-inner + rgt-inner.

    thanks million for your help, Val

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by anticowboyism View Post
    Then I added some css to make the left box 58% of the width and the right box 40%, with 2% between for padding. Notice they total to 100%. You can change these values to whatever is appealing to you, as long as they add up to 100%.
    Actually you should never make multiple floats add up to 100% because IE6 will round them up to be greater than 100% and at odd pixel screen widths the floats will drop down. It's always better to just make them add up to 99.9% (or less for multiple floats) or add a negative margin buffer to one of the floats instead.

  13. #13
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by valarcher View Post
    Is it possible, as a first step, you could just move my current structure around to show me how all txtcontent can come before lft-inner + rgt-inner?
    Hi Val,
    I was able to get your files set up as a live example in my test files.

    View the page source for the html structure -
    http://www.css-lab.com/test/eatsprouts/main.html
    http://www.css-lab.com/test/eatsprouts/css/main.css

    I'm in a bit of a rush right now so I will have to explain what you may not understand later.

    Here was the changes to the css -
    Code:
        /*=== BEGIN TXTBOX === content2 has dwn-leafs only, box2 is full-pg */
    #content, #content2 {padding: 0} /* for dwnleafs */
    #content, #content2, .txtbox2wh, .txtbox2gr {min-height: 0}
    #content {
        margin:15px 160px;/*15px 160px 0;*/
        min-height:0;/*haslayout for ie7*/
        display:table;/*contain inner floats in modern browsers*/
    }
    * html #content, #content2, .txtbox2wh, .txtbox2gr {height:1%}
    
    .txtbox {
        float:left;
        width:100%;
        padding:0; /*reset to 0 when using 100% width*/ 
    }
    .txtbox .inner {padding: 0 25px 25px}/*now reset the padding on this new div*/
    
    #content2 {margin:15px 63px 0}
    .txtbox2wh, .txtbox2gr {margin: 0 auto} /*set width under Fonts+Spacing*/
    .txtbox2gr {padding: 25px} /*.txtbox has been removed and padding set on new inner div*/
    Code:
        /*=== BEGIN LEFT COLUMN + RIGHT COLUMN ===*/
    #leftcol {
        /*clear:both;  /* down-lft + down-rgt leaf  REMOVE THIS CLEARING RULE*/
        float: left;
        margin-left: -160px;
        position:relative;
        left:-100%;
    }
    #rightcol {
        float:left;/*float:right;*/
        margin-right: -160px;
    }
    #leftcol, #rightcol {
        display: inline;
        position: relative; /* use with negative margins for ie6 */
        width: 160px; /* 150px for lft-rgt cols + 10px content R/L margin */
        min-height: 0;
        margin-top: -10px; /* pull col back up with negative margin, pushes upleaf against topleaf (content T/B 10px)
        - add 30px for whboxtop so m-t:40px IF NO grnbox in rgt-inner */
    }
    * html #leftcol,* html #rightcol {height:1%;overflow:hidden;}/*overflow for IE6 italic bug*/
    .lft-inner {
        width: 150px;
        margin-top: 230px; /* 210 + 20px round-corner in rgt-inner*/
    }

  14. #14
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Val, I ran into some strange column positioning behavior in FF3 when I used display:table for float containment on the #content div in my last post. Disregard everything in that previous post as it seems our post editing abilities are no longer available to us. I wound up using an adaption of the clearfix method that is currently just targeting the #content div.

    I have also relocated the #content and .txtbox styles lower down in the css, I did that to keep things in the same order as the html. It makes trobleshooting so much easier and keeps your styles in a logical order.

    IE6/7 have also had position:relative added for them on the #content div. I have changed the file path for the live css file to match the path in your main.php page you linked to above.

    Here is the updated working html and css -
    http://www.css-lab.com/test/eatsprouts/main.html
    http://www.css-lab.com/test/eatsprouts/1cde/main.css

    The relevant css -
    Code:
        /*=== END DOWN LEAF ===*/
        
        /*=== BEGIN TXTBOX === content2 has dwn-leafs only, box2 is full-pg */
    #content, #content2 {padding: 0} /* for dwnleafs */
    #content, #content2, .txtbox2wh, .txtbox2gr {min-height: 0}
    #content {
        margin:15px 160px;/*15px 160px 0;*/
        min-height:0;/*haslayout for ie7*/
        position:relative;/*IE6/7 needs this to re-position left column on viewport resize*/
    }
    #content:after { /* this ruleset clears floats inside #content. (adapted from positioniseverything.net) */
        clear:both;
        content:" ";
        display:block;
        height:0;
        font-size:0;
    }
    * html #content, #content2, .txtbox2wh, .txtbox2gr {height:1&#37;}
    
    .txtbox {
        float:left;
        width:100%;
        padding:0; /*reset to 0 when using 100% width*/ 
    }
    .txtbox .inner {padding: 0 25px 25px;}/*now reset the padding on this new div*/
    
    #content2 {margin:15px 63px 0}
    .txtbox2wh, .txtbox2gr {margin: 0 auto} /*set width under Fonts+Spacing*/
    .txtbox2gr {padding: 25px} /*.txtbox has been removed from here*/
    .txtbox2wh {padding: 25px 50px}
    .txtbox, .txtbox2wh {background: white}
    .txtbox2gr {background: #e5ffbf}
    .txtbox, .txtbox2wh, .txtbox2gr {-moz-border-radius: 30px; /*FFx-TopLft, TR, BR, BL*/
        -webkit-border-radius: 30px; /*safari*/
        -op-border-radius: 30px; /*opera*/
        border-radius: 30px; /* css3 same as FF */
    }
        /*=== END TXTBOX ===*/
        
        /*=== BEGIN LEFT COLUMN + RIGHT COLUMN ===*/
    #leftcol {
        /*clear:both;  /* down-lft + down-rgt leaf  REMOVE THIS CLEARING RULE*/
        float:left;
        position:relative;
        right:100%;
        margin-left:-160px;
        background:green;/*just for testing*/
    }
    #rightcol {
        float:right;
        position:relative;
        margin-right:-160px;
        background:blue;
    }
    #leftcol, #rightcol {
        /*display: inline; no need for this ie6 fix without side margins*/
        position: relative; /* use with negative margins for ie6 */
        width: 160px; /* 150px for lft-rgt cols + 10px content R/L margin */
        min-height: 0;
        margin-top: -10px; /* pull col back up with negative margin, pushes upleaf against topleaf (content T/B 10px)
        - add 30px for whboxtop so m-t:40px IF NO grnbox in rgt-inner */
    }
    * html #leftcol,* html #rightcol {height:1%;overflow:hidden;}/*overflow:hidden for IE6 italic bug*/
    .lft-inner {
        width: 150px;
        margin-top: 230px; /* 210 + 20px round-corner in rgt-inner*/
    }
    /* .lft-inner p { add this for optional lft-inner text, adjust in relation to .aff
        padding: 10px;
        font: 0.8em "Trebuchet MS", sans-serif; color: #747474; line-height: 130%;
    } */
    .aff { /* join affiliate program */
        padding: 30px 10px;
        margin: 0 auto;
        font: bold 1.2em "Comic Sans MS", sans-serif; color: #f00251; text-align: center; line-height: 130%;
    }
    .aff a {padding: 2px}
    .aff a:link, .aff a:visited, .aff a:active {color: #f00251; text-decoration: none}
    .aff a:hover {background: white; color: red}
    .rgt-inner {
        background: #f2ffdf;
        width: 150px;
        margin-top: 230px;
        margin-left: 10px;
        padding: 0; /* zero for round corners */
    }
    .rgt-inner p {
        padding: 2px 4px 6px 9px;
        font: 0.8em "Trebuchet MS", sans-serif; color: #747474; line-height: 130%;
    }
    .rgt-inner blockquote {padding:0}
    .rgt-inner blockquote p {
        padding: 2px 4px 6px 9px;
        font: italic 0.8em Georgia, serif;
    }
        /*=== END LEFT + RIGHT COLUMNS ===*/
    The relevant html -
    Take note of the new inner div, that is for the 25px padding. The padding had to be removed from the .txtbox div since it was given a float with a width of 100%.
    Code:
    <div id="content">
    <div class="txtbox">
        <div class="inner"><!--this is for 25px padding left and right-->
        <!--BEGIN txtcontent-->
        <p class="cnt tw p10">Tweet: <a href="http://bit.ly/bIwdr">http://bit.ly/bIwdr</a></p>
        <h1 class="hdr">Green Smoothie Recipes &amp; In-depth Info on Green Smoothies</h1>
            <p>Green Smoothies are simple &mdash; take any fresh greens you like and blend them with fruit. My current favorite is spinach with 2 big pears. Spinach builds strong bones! And a clean colon, but Popeye was quiet about that. 
        Remember the Variety Rule &mdash; don't eat today what you ate yesterday. Blend different fruits and greens each day. Vita-Mix is the best blender. carry on to end of line continue</p>
            <div class="leaf25"></div>
        <h1>Test Hdr1</h1>
            <p>ipsum dolor sit amet, <span class="high">test highlight.</span> fusce pulvinar lobortis 
        purus. cum sociis natoque penatibus et magnis dis parturient montes, nascetur  ridiculus donec
        <a href="./vitem-gde.html">test link</a> ridiculus mus. donec semper ipsum et urna.</p>
            <p>ut consequat neque vitae felis. lorem 
        ipsum dolor sit amet, consectetuer adipiscing elit. mauris vel magna. mauris 
        risus nunc, tristique varius, gravida in, lacinia vel, elit. nam ornare, felis 
        non faucibus molestie, nulla augue adipiscing mauris, a nonummy diam ligula ut risus.</p>
            <div class="leaf25"></div>
        <h2>Test Hdr2 make header longer much longer</h2>
            <p>lorem ipsum dolor sit amet, consectetuer adipiscing elit. mauris vel magna. 
        mauris risus nunc, tristique varius, gravida in, lacinia vel, elit. nam ornare, 
        felis non faucibus molestie, nulla augue adipiscing mauris, a nonummy diam 
        ligula ut risus. praesent varius. </p>
            <div class="leaf25"></div>
        <h3>Test Hdr3 make header longer</h3>
            <p>lorem ipsum dolor sit amet, consectetuer adipiscing elit. mauris vel magna. 
        mauris risus nunc, tristique varius, gravida in, lacinia vel, elit. nam ornare, 
        felis non faucibus molestie, nulla augue adipiscing mauris, a nonummy diam 
        ligula ut risus. praesent varius. cum sociis natoque penatibus et magnis dis</p>
            <p class="cnt"><img src="./gr-spr/spr-sm.jpg" alt="Small Sprouter" width="380px" height="379px" /></p>
            <p>lorem ipsum dolor sit amet, consectetuer adipiscing elit. mauris vel magna.
        mauris risus nunc, tristique varius, gravida in, lacinia vel, elit. nam ornare, 
        felis non faucibus molestie, nulla augue adipiscing mauris, a nonummy diam</p>
       </div><!--end inner-->
    </div><!--end txtbox-->
    <div id="leftcol">
        <div class="down-lft"></div><!--leaf-->
        <div class="lft-inner">
            <div id="lftnav"><ul>
        <li><a href="./vitem-spr.html">Sprouters</a></li>
        <li><a href="./vitem-kit.html">Mist Kits</a></li>
        <li><a href="./vitem-gde.html">Sprouter Plans</a></li>
        <li><a href="./vitem-xtra.html">Sprouter Extras</a></li>
        <li><a href="./vitem-sds.html">Organic Seeds</a></li>
        <li><a href="./vitem-wf.html">Water Ionizers</a></li>
        <li><a href="./vitem-bl.html">Blenders</a></li>
        <li><a href="./vitem-jcr.html">Juicers</a></li>
        <li><a href="./vitem-dhd.html">Dehydrators</a></li>
        <li><a href="./teeth.html">Teeth Care</a></li>
        <li><a href="./ebks/index.html">Lose Weight</a></li>
        <li><a href="./eat/lifestyle.html">End Cancer</a></li>
        <li><a href="./help.html">About Us</a></li>
        <li><a href="./affil/index.html">Affiliates</a></li>
    </ul>
    </div>
    <!--begin lft-inner txt-->
            <p class="aff"><a href="./affil/index.html">Earn Cash! Share the Knowledge!<br /><br />
            Join Our Affiliate Program!</a></p>
        </div><!--end lft-inner-->
    </div><!--end leftcol-->
    <div id="rightcol">
        <div class="down-rgt"></div><!--leaf-->
        <div class="rgt-inner">
        <div class="grbox"><!--round-corner box-->
        <div class="grtop"><div class="grtoplft"></div></div>
    <!--spr1-txt--><p>Rev. George Malkmus of Hallelujah Acres, Shelby, NC, loves his GoGreen Sprouter:</p>
    <blockquote>
        <p>"Sprouter up and running - HALLELUJAH!</p>
        <p>Dear Val, the sprouter is fantastic!</p>
        <p>Just harvested our first 5 trays, one of them sunflower sprouts, and they all turned out great!</p>
        <p>Thanks for making it happen! Blessings!"</p>
    </blockquote>
            <div class="leaf16"></div>
    <!--spr2-txt--><p>Dennis of Kaneohe, Hawaii, writes:</p>
    <blockquote>
        <p>"Thanks so much for your help on our new sprouting system.</p>
        <p> It's great to see life growing every day ... very cool.</p>
        <p>I am so happy to be doing this for my family.</p>
        <p>You should hear my six year old son say "dad, it's time to harvest again."</p>
        <p>See what you have done? Started a cycle of health that will go on thru out my life and my son's and hopefully his kids!"</p>
    </blockquote>
        <div class="grbtm"><div class="grbtmlft"></div></div>
        </div><!--end grbox-->
        </div><!--end rgt-inner-->
    </div><!--end rightcol-->
    </div><!--end content-->

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    when I used display:table for float containment
    I don't know if the problem you encountered was anything to do with this but there is a long standing gecko bug and when you use display:table in gecko you must also use an intermediary element that is set to display:table-row (just like a real table) or the page will not display correctly on first load. This is one of the reasons that I would avoid using display:table unless I have the complete structure.

  16. #16
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    I don't know if the problem you encountered was anything to do with this but there is a long standing gecko bug and when you use display:table in gecko you must also use an intermediary element that is set to display:table-row (just like a real table) or the page will not display correctly on first load. This is one of the reasons that I would avoid using display:table unless I have the complete structure.
    Hi Paul,
    Yeah I knew about the need for display:table-row with gecko but I thought I'd give it a try anyway. I didn't want to add another element just to make it work for FF though.

    In this case the problem with using display:table was that FF would position the columns correctly on the initial page load but on reload it would throw the columns all over the place. Sometimes the left column would be in place with the right column dropped or the right column would be dropped and the left column completely gone.

    The clearfix method was the way to go here.

  17. #17
    SitePoint Member Windly's Avatar
    Join Date
    Aug 2009
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I also tried to divide text area into 2 colours in CSS2 and unfortunately I couldn't do it.

  18. #18
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Ray
    In this case the problem with using display:table was that FF would position the columns correctly on the initial page load but on reload it would throw the columns all over the place.
    Yes that exactly describes the gecko bug - and as yet hasn't been fixed as far as I know.

    Quote Originally Posted by windly
    I also tried to divide text area into 2 colours in CSS2 and unfortunately I couldn't do it.
    See the 3 col sticky thread at the top of the forum for examples.

  19. #19
    SitePoint Evangelist
    Join Date
    Jul 2008
    Location
    Port Elizabeth, South Africa
    Posts
    404
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Ray - apologize for my absence, been busy prepping for a conference.

    Your sample looks really good but the only problem is that I need this:

    <div class="txtbox2wh">
    <!--BEGIN full-pg txt-->
    <p>begin photos</p>
    </div><!--end txtbox2-->

    to come immediately after this:

    </div><!--end inner-->
    </div><!--end txtbox-->

    Otherwise the cellphone reader has all that left-inner + right-inner junk in the middle of the info they're reading.

    e.g. you can see more clearly how the txtboxes are one text info on this page (ignore non-working php, needs to be updated):

    http://eatsprouts.com/test/index.php

    I don't mind if left-inner is dropped totally, since it's already in more detail in footernav, but I do need right-inner. But it'll be funny for reader to suddenly be hit with bunch of testimonials (eg about sprouter) when they're in the middle of text info reading something totally different (eg about carbs)

    Paul - I'm grateful you've joined us because a long time ago I asked you if my txt could come first and you pretty much replied No

    It's here: http://www.sitepoint.com/forums/showthread.php?t=568996

    Scroll to my post "Sep 3, 2008, 08:49", I ask under (3): "Is there a way to keep .txtbox in its place between left + right columns, but move it out of <div id="content">? Or somehow make it first in the html?"

    And you reply: "3) Now you're on dangerous ground moving the html around. There are techniques to move the columns around using negative margins but you have to follow the code to the letter and there is an example here at layout gala that has the content first in a layout similar to yours. Of course it will mean changing your code around quite a bit and won't work in older mozilla (1.5 and less IIRC)."

    "dangerous" and "follow to the letter" and "won't work" sounded so scary that I dropped the idea You all know I barely know what the code is!

    But I'd love it to work because majority of Africans have only cellphone and I plan to rewrite the site to focus on the info they need to grow their own food, and I'll drop the old product pitches. No one buys the product any more anyway (except sprouter) 'cause they just google for cheapest.

    The header's not a problem for cellphones, it's just few critical links like email, and the leafy branches aren't problem - they don't show on my cellphone 'cause they're in css. It's just those lft-inner + rgt-inner's that are the problem.

    thanks for your help! - Val

  20. #20
    SitePoint Evangelist
    Join Date
    Jul 2008
    Location
    Port Elizabeth, South Africa
    Posts
    404
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    P.S. just wanted to point out I began this thread as "how to divide text area into 2 cols?" because Paul convinced me last year what I really want is very difficult - I figured impossible for me 'cause at that time if I just so much as breathed on the code it went flying off the handlebars.

    Then Ray came along here and sounded so convincing "It's not a problem to rework the html and css to have the main content come first" that I forgot to mention Paul had warned it'd be tough!

  21. #21
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Paul - I'm grateful you've joined us because a long time ago I asked you if my txt could come first and you pretty much replied No
    I didn't reply no exactly It's just something that has to be done right.

    I said you'd need negative margins which is the way that Ray has done it. The trouble is that it often triggers little bugs along the way and if you can avoid doing it then all the better.

    I was probably just being lazy as you had me working 24 hours a day in that thread

    I'll leave you in Ray's capable hands now

  22. #22
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    I was probably just being lazy as you had me working 24 hours a day in that thread
    I'll leave you in Ray's capable hands now
    Gee, thanks Paul. I am up for some rest from this monster too! I think I got it whipped though as long as the boss doesn't change the work order.

    Quote Originally Posted by valarcher View Post
    Hi Ray - apologize for my absence, been busy prepping for a conference.

    Your sample looks really good but the only problem is that I need this:

    <div class="txtbox2wh">
    <!--BEGIN full-pg txt-->
    <p>begin photos</p>
    </div><!--end txtbox2-->

    to come immediately after this:

    </div><!--end inner-->
    </div><!--end txtbox-->
    It will have to reside in between end inner and end textbox and then it will require more negative margins to hang out and appear like it is not residing in the txtbox div.

    HTML Code:
    <div id="content">
        <div class="txtbox">
            <div class="inner"><!--this is for 25px padding left and right-->
                <p>Lorem ipsum dolor sit.</p>
            </div><!--end inner-->
        
            <div class="txtbox2gr">
                <div class="inner"><!--this is for 25px padding left and right-->
                    <p>Lorem ipsum dolor sit.</p>
                </div><!--end inner-->
            </div><!--end txtbox2-->   
        
        </div><!--end txtbox-->
        
        <div id="leftcol">
            <p>Lorem ipsum dolor sit.</p>    
        </div><!--end leftcol-->
        
        <div id="rightcol">
            <p>Lorem ipsum dolor sit.</p>    
        </div><!--end rightcol-->
    </div><!--end content-->
    Here it is in all it's glory

    http://www.css-lab.com/test/eatsprouts/main-2.html
    http://www.css-lab.com/test/eatsprouts/1cde/main-2.css

    The BG colors and round corners radius' have been moved to the inner divs. As I explained earlier those inner divs are for your paddings since you can't place paddings on a float with 100% width. Although I did set 160px paddings on the .txtbox2gr div along with 100% width to force the width beyond it's parents width. Details are in the css comments.

    And the relevant changes in the css -

    Code CSS:
    /*=== BEGIN TXTBOX === content2 has dwn-leafs only, box2 is full-pg */
    #content, #content2 {padding: 0} /* for dwnleafs */
    #content, #content2, .txtbox2wh, .txtbox2gr {min-height: 0}
    #content {
        margin:15px 160px;/*15px 160px 0;*/
        min-height:0;/*haslayout for ie7*/
        position:relative;/*IE6/7 needs this to re-position left column on viewport resize*/
    }
    #content2 {margin:15px 63px 0}
     
    #content:after, 
    #content2:after {/* this ruleset clears floats inside #content. (adapted from positioniseverything.net)*/
        clear:both;
        content:" ";
        display:block;
        height:0;
        font-size:0;
    }
    .txtbox {
        float:left;
        width:100%;
        padding:0; /*reset to 0 when using 100% width*/
    }
    .txtbox .inner{
        padding: 0 25px 25px;/*now reset the padding on this new div*/
        background: white; 
    }
    .txtbox2gr {/*this must sit in the content div*/
        float:left;
        clear:left;
        width:100%;/*content is the parent so it inherits that width*/
        padding:0 160px;/*add 160 px to each side to exceed the parent's width*/
        margin:0 -160px;/*now hang that 160px out on each side*/
        position:relative;/*for IE6 to see the negative margins*/
        display:inline;/*IE6*/
    }
     
    .txtbox2gr .inner{
        margin:10px -160px 0;/*now fill the parent's side paddings*/
        position:relative;/*for IE6 to see the negative margins*/
        padding: 0 25px 25px;/*now reset the padding on this new div*/
        background:palegreen;/*#e5ffbf;*/
    }
     
    .txtbox2wh {margin: 0 auto} /*(.txtbox2gr removed) set width under Fonts+Spacing*/
    .txtbox2wh {padding: 25px 50px;background:white}
     
    * html #content, 
    * html #content2, 
    * html .txtbox2wh, 
    * html .txtbox2gr {height:1%}
     
    .txtbox .inner,
    .txtbox2wh, 
    .txtbox2gr {-moz-border-radius: 30px; /*FFx-TopLft, TR, BR, BL*/
        -webkit-border-radius: 30px; /*safari*/
        -op-border-radius: 30px; /*opera*/
        border-radius: 30px; /* css3 same as FF */
    }
    /*=== END TXTBOX ===*/

  23. #23
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Well, maybe I spoke to soon about the pulling that div outside of it's parent with negative margins. If the content in the div above it is shorter than the sidebar then the sidebars would run over on top of the txtbox2gr div.

    It will be best to leave it at the same width as the #content div.

    http://www.css-lab.com/test/eatsprouts/main-3.html
    http://www.css-lab.com/test/eatsprouts/1cde/main-3.css

    I see no way to do that other than setting a min-height on the txtbox div and a fixed height on the sidebars.

  24. #24
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I think I got it whipped though as long as the boss doesn't change the work order.
    lol -good work Ray

  25. #25
    SitePoint Evangelist
    Join Date
    Jul 2008
    Location
    Port Elizabeth, South Africa
    Posts
    404
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Ray - oh dear oh dear I strive so hard not to be a boss... It's hard to explain clearly by email, now if I could've just pointed my finger

    It's looking good at:
    http://www.css-lab.com/test/eatsprouts/main-2.html

    BUT ideally all txtboxes should follow each other sequentially so:

    <div class="txtbox2wh">
    <p>begin photos</p>
    </div><!--end txtbox2-->

    comes right after </div><!--end txtbox2gr-->

    In defense of Ms Boss I did mention above on 8/13: "my actual structure is multiple textboxes ... Everything between *Begin + End txtcontent* must come before lft-inner + rgt-inner"

    >If the content in the div above it is shorter than the sidebar then the sidebars would run over on top of the txtbox2gr div ... I see no way to do that other than setting a min-height on the txtbox div and a fixed height on the sidebars

    No you don't need to do that. I can avoid the problem by including lft-inner + rgt-inner php ONLY when txtbox content is longer. This is the html:

    <div class="lft-inner">
    <div id="lftnav"><?php include("$rpath/1cde/lftnav.php"); ?></div>
    </div><!--end lft-inner-->

    <div class="rgt-inner">
    <!--spr1-txt--><?php include("$rpath/1cde/rgt-spr1.php"); ?><?php echo $select; ?>
    <div class="leaf16"></div>
    <!--spr2-txt--><?php include("$rpath/1cde/rgt-spr2.php"); ?><?php echo $select; ?>
    </div><!--end rgt-inner-->

    I can easily "<!--" out spr2-txt when I see it won't fit AND spr1-txt if that also won't fit, same with lftnav, e.g. it may not fit on this page:
    - http://eatsprouts.com/blend/34ways.html

    You'll see from *34ways.html that I often can't leave it at the same width as #content div. I need full width.

    I've not looked at the css yet. I just need to see the right structure first. But I'm trusting that the extra html + css will not be so long, it would actually be quicker for cellphones to read lft- + rgt-inner first?

    My goal is for person to get to info as quickly as possible, we pay by minute for cellphone access here in Africa.

    Or what about anticowboy's solution? I have only leafy branches outside, so it looks like this:

    http://eatsprouts.com/test/txtbox-2col.php

    Then all I need is for you to create a div for my h1 (+ maybe first p) that extends across the top of both cols lol oh dear oh dear lol

    Then 2-cols begin below it. I can reduce the font-size of testimonials to give me more space for info + give their box a bgcolor.

    My feeling is if I ever switch to web 2.0 (wordpress) this may be the best solution? It means txtbox2wh + gr come after the testimonials. But that's ok if it takes least time to load.

    What do you think? What's the right path for the least amount of code?

    thanks for your help! - Val


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •