How to divide text area into 2 cols?

HTML & CSS
21

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 :slight_smile:

I didn’t reply no exactly :slight_smile: 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 :slight_smile:

I’ll leave you in Ray’s capable hands now :wink:

22

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. :slight_smile:

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.

<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 :slight_smile:

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 -

/*=== 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

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

I think I got it whipped though as long as the boss doesn’t change the work order.

lol -good work Ray :slight_smile:

25

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 :slight_smile:

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 :slight_smile: 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:

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 :slight_smile: 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

26

I don’t mind if left-inner is dropped totally, since it’s already in more detail in footernav,

My goal is for person to get to info as quickly as possible, we pay by minute for cellphone access here in Africa.
I think you need to do away with both side columns. You will probably be better off stacking your elements in the html in the order that you want them rendered on your phone.

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
Since the right column with the testimonials is going to cause problems then just give a link to a testimonials page.

The way your site looks on a phone seems to be more important to you than the way it looks on a monitor. If you do away with the side columns you can at least keep it looking uniform on a monitor and maintain your leaf structure. You wind up with a one column layout and you stack your divs the way you want to see them.

27

Hi Ray - had a chance to think about it overnight. Am I right in thinking that for the least code I can go either with your
http://www.css-lab.com/test/eatsprouts/main.html
that you give Aug 13, 2009, 17:35 OR with anticowboy’s? I love yours the best and am grateful you took all that time to figure it out.

Am I right in thinking that if you make all textboxes sequential - that’s everything between begin + end txtcontent, namely all txtbox2’s wh(ite) + gr(een) - that this will add a LOT of extra code?

If I’m right that your main.html + anticowboy’s 2-col-txtbox differ very little in extra code (esp as I still must add top div to anti’s for h1) then my plan is to go with your css/html in that 8/13 post.

Aesthetically your solution looks the best to me. I’m very happy with it. If I browse my site, I see that most pages won’t need a txtbox2. Most fit into this structure - the txtbox at http://eatsprouts.com/test/google.php - where there’s NO lft- or rgt-inner:

<div id=“content2”>
<div id=“leftcol2”>
<div class=“down-lft”></div></div><!–downleaf, end leftcol2–>
<div id=“rightcol2”>
<div class=“down-rgt”></div></div><!–downleaf, end rightcol2–>
<div class=“txtbox”>
<!–BEGIN txtcontent–>
<h1 class=“hdr”>Search Results for This Website</h1>
<p>Please forgive if you find any google Ads rather unseemly.</p>
<!–END txtcontent–>
</div><!–end txtbox–>
</div><!–end content2–>

It’s only on the main landing pages where I win at google, that I need to add lftnav + testimonials (lft+rgt-inner). Here too, most won’t need txtbox2.

It’s only a few pages that have a comparison table or large image, where I need txtbox2 extending beyond the down-leafs. Even then, I bet cellphones don’t display graphics wider than 200px or so, above that it gives an ? My cellphone won’t display any graphics today, so I can’t test it.

What do you and Paul think? Shall I go ahead and switch my main.php to the html/css of your http://www.css-lab.com/test/eatsprouts/main.html? And forget about txtbox2’s following txtbox sequentially? Because that would add too much code?

thanks for your help! - Val

28

Am I right in thinking that if you make all textboxes sequential - that’s everything between begin + end txtcontent, namely all txtbox2’s wh(ite) + gr(een) - that this will add a LOT of extra code?
No it will not add a lot of extra code. There was very little difference between my main.html and my main-3.html. I have gone back and removed all the inner divs that were in the txtbox divs. The reason I had the inner divs was for padding because I had floated the txtbox divs left and gave them 100% widths. Looking back through it all I see no need for the floats on the txtbox divs so by removing the width and float I can then remove the inner divs and make it leaner.

The only difference between my main.html and my main-3.html was that I moved the round corners from the txtbox to the inner divs. That was done to give the divs a visual separation.

I reworked my main-3.html and gave the original txtbox div a new name of #centercol. I did that so you could undersatnd what is going on and I will do my best to explain it below. Have a look at this revision of main-3.html.

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

Ok, you have three columns/floats in your Content div and according to the code in my link above they are #centercol, #leftcol, and #rightcol. They are all contained in Content and they are all floated.

#centercol is the parent of all your textbox divs and they must reside there. You cannot have another txtbox div on it’s own after #centercol or it will force the right column to drop.

[B]<div id="content">[/B]
    [COLOR=Blue]<div id="centercol">[/COLOR]
        [B][COLOR=DarkGreen]<div class="txtbox1">[/COLOR][/B]
        </div><!--end txtbox1-->
        
        [B][COLOR=DarkGreen]<div class="txtbox2gr">[/COLOR][/B]
        </div><!--end txtbox2gr-->
        
        [B][COLOR=DarkGreen]<div class="txtbox2wh">[/COLOR][/B]
        </div><!--end txtbox2wh-->     
    [COLOR=Blue]</div><!--end centercol-->[/COLOR]

    [COLOR=Blue]<div id="leftcol">[/COLOR]
        <div class="down-lft"></div><!--leaf-->
        <div class="lft-inner">
        </div><!--end lft-inner-->
    [COLOR=Blue]</div><!--end leftcol-->[/COLOR]
    
    [COLOR=Blue]<div id="rightcol">[/COLOR]
        <div class="down-rgt"></div><!--leaf-->
        <div class="rgt-inner">
        </div><!--end rgt-inner-->
    [COLOR=Blue]</div><!--end rightcol-->[/COLOR]
[B]</div><!--end content-->[/B]

/*=== BEGIN TXTBOX === content2 has dwn-leafs only, box2 is full-pg */
#content {
    margin:10px 160px;
    position:relative;/*IE6/7 needs this to re-position left column on viewport resize*/
    padding: 0; /* for dwnleafs */
}
#content2 {
    margin:10px 63px 0;
    padding: 0; /* for dwnleafs */
}

#content:after, 
#content2:after {/* this ruleset clears floats inside #content. (adapted from positioniseverything.net)*/
    clear:both;
    content:" ";
    display:block;
    height:0;
    font-size:0;
}
#centercol {
    float:left;
    width:100%;
    background:red;
}
.txtbox1,
.txtbox2gr,
.txtbox2wh {
    margin:0 2px;/*2px is to show red BG*/
    padding: 0 25px 25px;/*now reset the padding on this new div*/
    background:#CDF;/*lightblue for txtbox1*/
}
.txtbox2gr {margin:10px 2px 2px; background:#E5FFBF;}/* Reset BG color and margin*/
.txtbox2wh {margin:10px 2px 2px; background:#FFF;}/* Reset BG color and margin*/

.txtbox1,
.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 */
}
#content, #content2, .txtbox1, .txtbox2wh, .txtbox2gr {min-height:0}/*IE7 haslayout*/
* html #content, * html #content2,* html .txtbox1, * html .txtbox2wh, * html .txtbox2gr {height:1%}/*IE6 haslayout*/

h2.test {/*Remove this, for txtbox demo headings only (Ray)*/
    padding:10px;
    font: bold 1.2em georgia; 
    color: #000; 
    text-align:center;
    text-decoration:underline;
}
/*=== END TXTBOX ===*/

You can add or remove all the txtbox divs you want to, but they must remain in the #centercol div. In my main-2.html I showed you how to make them hang out of the parent (which as now #centercol in main-3.html as that name makes sense and identifies it) but in doing that the sidebar content could run over the extended sides.

If I were you I would go with main-3.html

Hope that helps explain things and I have no other ideas for this layout in regards to keeping it looking decent on monitors and satisfying your phone needs at the same time. :slight_smile:

29

Hi Ray - this is the problem: “It’s only a few pages that have a comparison table or large image, where I need txtbox2 extending beyond the down-leafs.” The only time I use txtbox2wh/gr is when I need to extend to full-width like here - so it won’t fit inside #centercol (ignore php):
http://eatsprouts.com/test/main-tbl.php

Otherwise I’m always in .txtbox. That’s why I believe the solution is your original *main-3.html. The original works best for me. Cellphones will read txtbox first.

Did you save the original? Is it possible you could rework it with this correction: “see no need for the floats on the txtbox divs so by removing the width and float I can then remove the inner divs and make it leaner” - but label it .txtbox not #centercol (I understand the #center label for multiple txbox/box2’s but with only .txtbox we can let it go?).

Occasionally after a txtbox2, I follow it with a .txtbox, but then I use #content2 (http://eatsprouts.com/test/google.php) for those pages, have down-leafs only (so no lftnav before my txt).

e.g. at http://eatsprouts.com/blend/34ways.html, it’s structure is txtbox, txbox2, txtbox but no lft-rgt-inner - content2 will work for this.

thanks for your kind help, I’m very grateful - Val

30

Is it possible you could rework it with this correction: “see no need for the floats on the txtbox divs so by removing the width and float I can then remove the inner divs and make it leaner” - but label it .txtbox not #centercol (I understand the #center label for multiple txbox/box2’s but with only .txtbox we can let it go?).
No, we can’t let it go. The #centercol must have float:left; with width:100%; so side paddings must go on the .txtbox div.

I was able to let the inner divs (in red below) go that were used in main-2.html as shown below because it was the txtbox2gr inner div that I was using to make it hang out of the content but that ran the risk of problems with the sidebars running over the wide div. But that is how you do it if you need a wide div before the columns in the markup.

<div id="content">
    [B][COLOR=DarkGreen]<div class="txtbox">[/COLOR][/B]
        [COLOR=Blue]<div class="inner"><!--this is for 25px padding left and right-->[/COLOR]
        [COLOR=Blue]</div><!--end inner-->[/COLOR]

        [COLOR=Blue]<div class="txtbox2gr">[/COLOR]
[COLOR=Red]<div class="inner"><!--this was for hanging out of the parent div-->
            </div><!--end inner-->[/COLOR]
        [COLOR=Blue]</div><!--end txtbox2-->[/COLOR]   
    [B][COLOR=DarkGreen]</div><!--end txtbox-->[/COLOR][/B]

In my main-3.html txtbox has become #centercol and .inner has now become .txtbox

Val, what is different about this than your original layout is that your textbox div was not floated so it did not need a width to keep it from shrinkwrapping. Without a float or a width you were able to set your 25px side paddings there.

No floats were used in your css, just paddings. It did not need a float because it came after the floated sidebars and popped up between them in the available space.

.txtbox, .txtbox2gr {padding: 25px}
.txtbox {padding-top: 0px}
.txtbox2wh {padding: 25px 50px}
.txtbox, .txtbox2wh {background: white}

With this content first layout all three elements in your Content div must be floated. It is the #left column that gets the relative position trickery that allows the #centercol to come first in the source while making the left column position correctly. I am going to keep calling the center div #centercol because that is what it is in comparison to #leftcol and #rightcol. The #centercol must have float:left; with width:100%; so side paddings must go on the .txtbox div.

“It’s only a few pages that have a comparison table or large image, where I need txtbox2 extending beyond the down-leafs.” The only time I use txtbox2wh/gr is when I need to extend to full-width like here - so it won’t fit inside #centercol
As I said in my last post >“You can add or remove all the txtbox divs you want to, but they must remain in the #centercol div.”

But I should have said this >“You can add or remove all the txtbox divs you want to, but they must remain in the #centercol div if you want them to come before the side columns.”

I have disabled the txtbox2 divs in this main-3 layout but the basic structure and css is still the same as it has been all along, It is the leanest version you are going to get that meets your needs. You need to save a copy of these pages because they will not stay in my test files forever. I have renamed .txtbox1 back to .txtbox for you. If you are not happy with any of the div names then open your editor and rename them. :wink:

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

If you don’t have the side columns on the pages where you need the full width divs then you don’t have to get into the hanging out method from main-2.html.

Val, I hope you are understanding all this because I am finding myself repeating things over and over and it is getting pointless. I don’t think it has clicked with you yet as to what is going on but I hope that the explanations above will finally make the lights come on bring this thread to an end.

Cheers :slight_smile:

31

Hi Ray - I understand it now! Thank you! See:

Just a few questions:

(1) I need the tweet URL to be right at the top as in http://eatsprouts.com/test/main.php - it’s adding about 10px margin or padding above bitly but I can’t see where from? I couldn’t see in firebug either.

(2) #content2 is used instead of content when there’s no lft-rgt-inner as at http://eatsprouts.com/test/google-new.php. I decided never to have floated images (see BEGIN IMAGES in css) so that means there will never be floats inside content2. Only content has the 3 cols floated inside it. So can I delete #content2:after in your ruleset that clears floats?

(3) I added round corners to txtbox but they’re not working in IE. Do you know why?

thanks for your patient help! - Val

P.S. This is the css now (+ also changed leftcol + rightcol as per yours):

/*=== BEGIN TXTBOX === content2 has dwn-leafs only, box2 is txtbox 4 content2, box3 is full-width /
#centercol {float:left; width:100%}
Content {position:relative} /for IE6/7 to re-position leftcol on viewport resize/
Content, #content2 {padding: 0} / for dwnleafs */
Content, #content2, .txtbox3 {min-height: 0}

  • html Content, #content2, .txtbox3 {height:1%}
    Content {margin:15px 160px 0}
    #content2 {margin:15px 63px 0}
    #content:after {/this ruleset clears floats inside content/
    clear:both;
    content:" ";
    display:block;
    height:0;
    font-size:0;
    }
    .txtbox, .txtbox2, .txtbox3 {margin: 0 auto} /set width under Fonts+Spacing/
    .txtbox {padding: 0 25px 25px}
    .txtbox2, .txtbox3 {padding: 25px 40px}
    .txtbox, .txtbox2, .txtbox3 {-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 ===*/
32

Val, these self inflicted problems. :slight_smile:

(1) I need the tweet URL to be right at the top as in http://eatsprouts.com/test/main.php - it’s adding about 10px margin or padding above bitly but I can’t see where from?
Well you added new divs for your round corner graphics and there is a nested div at the top with a height of 30px. If you want to see what is going on then change some BG colors to test with (that’s what I do)

.txtbox, .txtbox2, .txtbox3 {margin: 0 auto;[B] background:red[/B]} /*set width under Fonts+Spacing*/
.whbox { /*whitebox 30px radius*/
  [B]background: lime;[/B]/*white;*/
}

If you are going to use graphics for your RC now you need to take the paddings off .txtbox divs and set them on .whbox, but that will mess up the the txtbox div below that does not use RC graphics.

I would just remove .whbox as it is really doing nothing, but keep the nested RC top & bot divs.

    <div id="centercol">
        [COLOR=Blue]<div class="txtbox wh">[/COLOR]
[COLOR=Red][s]<div class="whbox"><!--round-corner box-->[/s][/COLOR]
            [COLOR=DarkGreen]<div class="whtop">[/COLOR]<div class="whtoplft"></div>[COLOR=DarkGreen]</div>[/COLOR]
                [COLOR=Black]CONTENT HERE[/COLOR]
            [COLOR=DarkGreen]<div class="whbtm">[/COLOR]<div class="whbtmlft"></div>[COLOR=DarkGreen]</div>[/COLOR]
[s][COLOR=Red]</div><!--end whbox-->[/COLOR][/s]
        [COLOR=Blue]</div><!--end txtbox-->[/COLOR]

Then pull the whtop & whbtm into the .txtbox side paddings with negative margins.


[B].whbox[/B] { /*whitebox 30px radius*/
  [COLOR=Blue]background: lime;[/COLOR]/*white;*/
}
[B].whtop[/B] {
    background: url(../gr-pg/boxwhR30-tr.gif) no-repeat top right;
[COLOR=Blue]    margin:0 -25px;
    position:relative;/*IE6 needs this*/[/COLOR]
}
.whtop .whtoplft { 
  font-size:0;
  height:30px; 
  background: url(../gr-pg/boxwhR30-tl.gif) no-repeat top left; 
}
[B].whbtm[/B] {
    background: url(../gr-pg/boxwhR30-br.gif) no-repeat bottom right;
[COLOR=Blue]    margin:0 -25px;
    position:relative;/*IE6 needs this*/[/COLOR]
}

But to answer your tweet link question, it needs to be pulled into the <div class=“whtop”> with a negative margin.

(2) #content2 is used instead of content when there’s no lft-rgt-inner as at http://eatsprouts.com/test/google-new.php. I decided never to have floated images (see BEGIN IMAGES in css) so that means there will never be floats inside content2. Only content has the 3 cols floated inside it. So can I delete #content2:after in your ruleset that clears floats?
As long as you know what it was there for and you are aware that any floats you place there in the future wil not be contained now. I did that to future proof it and there is really no reason to remove it as it is doing no harm rather insuring future floats.

(3) I added round corners to txtbox but they’re not working in IE. Do you know why?
See answer to question#1, use test BG colors and you will see that it is working but thet are misplaced because of padding on txtbox which was set there when no graphics were being used.

You really should set margins back on the .txtbox2 divs as I had done in my version of the css. Your RC’s look strange when the divs are jammed together.

[B].txtbox2gr[/B] {[COLOR=Blue]margin:10px 0 0[/COLOR]; background:#E5FFBF;}/* Reset BG color and margin*/
[B].txtbox2wh[/B] {[COLOR=Blue]margin:10px 0 0[/COLOR]; background:#FFF;}/* Reset BG color and margin*/
 {margin:10px 0 0; background:#E5FFBF;}/* Reset BG color and margin*/
[B].txtbox2wh[/B] {[COLOR=Blue]margin:10px 0 0[/COLOR]; background:#FFF;}/* Reset BG color and margin*/
33

One more thing, after doing the above you need to pull the border radius styles off of the txtbox div with graphic RC’s. It is getting the 25px bottom padding and giving CSS RC’s at the bottom.

Do that by setting a new class, yes another class for your css.

.txtbox, .txtbox2, .txtbox3 {margin: 0 auto; background:red} /*set width under Fonts+Spacing*/
.txtbox {padding: 0 25px 25px}
[B].txtbox-nobr[/B] [COLOR=Blue]{padding: 0 25px}/*nobr = no border radius*/[/COLOR]
.txtbox2, .txtbox3 {padding: 25px 40px}


    <div id="centercol">
        <div class="[B]txtbox-nobr[/B] wh">
            <div class="whtop"><div class="whtoplft"></div></div>
                CONTENT HERE
            <div class="whbtm"><div class="whbtmlft"></div></div>
        </div><!--end txtbox-->
34

Hi Ray -

(1) >If you want to see what is going on then change some BG colors to test with

Good idea - thanks! I forgot that trick.

(2) >#content2:after - I did that to future proof it and there is really no reason to remove it as it is doing no harm rather insuring future floats

Good idea, I’ve added it back in. One final question - will it clear images that are floated inside txtbox2 inside content2? (txtbox2 is the new label for a txtbox inside content2, and the old txtbox2 full-width is now txtbox3). Because in Content it clears the 3 column floats, but am I right in thinking it won’t clear images inside .txtbox inside Content? Which is fine, I’ll stick to my rule never to float an image inside any txtbox. But I just need to know that this is correct:

#content:after, #content2:after {/this ruleset clears floats inside content but not in txtbox/

(3) >I would just remove .whbox as it is really doing nothing, but keep the nested RC top & bot divs [and] pull the border radius styles off of the txtbox div with graphic RC’s

Ah I think at this point I’ll drop the RC’s totally for txtbox partly because my brain can’t follow you :slight_smile: and partly 'cause of the potential chaos when adding on txtboxes (may want nxt txtbox to follow right on with no visual break (so squareC not RC), may want as you say a margin with visual break for RC, etc). I’m really grateful for your code pointing out how to do it.

You motivated me to switch RC to its own class - and to find this page -

.rc { /round corner/
-moz-border-radius: 30px; /FF-TopLft, TR, BR, BL/
-webkit-border-radius: 30px; /safari, chrome/
-op-border-radius: 30px; /opera/
-khtml-border-radius: 30px; /linux/
/* behavior:url(border-radius-ie8.htc); IE*/
border-radius: 30px; /css3 same as FF/
}
<div class=“txtbox wh rc”>

I left out IE because can’t understand the js in *.htc. To date the above works only for FF + Safari.

I’m hoping IE-future and css3 will have radius rules. Meanwhile I’ll add a class under “Fonts + Spacing” for margin in FF when “RC’s look strange when the divs are jammed together.”

thanks for your beautiful help Ray. You truly are a star :slight_smile: customer service way beyond the call of duty. We’re nearly finished this thread now, except for (2). Thank you for staying with me.

all the best - Val

35
  1. Good idea, I’ve added it back in. One final question - …
    Because in Content it clears the 3 column floats, but am I right in thinking it won’t clear images inside .txtbox inside Content? Which is fine, I’ll stick to my rule never to float an image inside any txtbox.

But I just need to know that this is correct:

#content:after, #content2:after {/this ruleset clears floats inside content but not in txtbox/
Hi Val,
Yes, that is correct. However, it is very easy to contain your floats in the txtbox divs by simply setting overflow:hidden; on them. That will contain the floats in modern browsers and set haslayout for IE7 in one fell swoop. Then you can give “haslayout” to IE6 if and when needed with an overflow reset and height:1%.

  • html txtbox {overflow:visible; height:1%}/contain floats in ie6/

Anytime IE6/7 gain layout they will automatically enclose/contain floats.
http://gtwebdev.com/workshop/floats/enclosing-floats.php
http://www.visibilityinherit.com/code/contain-floats.php

Ah I think at this point I’ll drop the RC’s totally for txtbox partly because my brain can’t follow you :slight_smile:
I don’t know where I lost you at but I suspect it was with the negative margins I set on the RC divs. Your txtbox divs have 25px side paddings, any element within that div (which id your RC divs) will be restricted from extending all the way to each side because of the 25px side paddings. That is why I had to pull your RC divs past the paddings with a negative margin. If you had set a red BG color on the txtbox divs you would have seen your RC graphics starting 25px away from the txtbox outer edges.

You motivated me to switch RC to its own class - and to find this page -
http://www.htmlremix.com/css/curved-…-cross-browser
I set up a test case with that code and the ie8 update, I get some strange behavior with paddings in IE6 and I can’t get IE7 to work at all. IE6 was not adding a top padding to the total height when a height was set. It seems that a lot of people post several other problems as well in his blog. I would look into it further before making the choice to us it.

If I were you I would either use graphics or a differnt js method if you want cross browser RC’s.

Hope that helps, I am going to take a rest from this and leave it with you as you seem to have the main problem sorted out now. :slight_smile:

36

Hi Ray - yes thank you! it’s all sorted now. And for the first time ever I understand WHY negative margins are used, it’s to negate the padding on the parent div! Wow, who conceives of all this stuff?

all the best, Val

37

Well a lot of people :). This is an entire industry-and once you understand it you can make more complex designs :slight_smile: