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.
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
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?
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…
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.
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:
<!--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% 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%.
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.
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.
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):
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% wide. You can use the clearfix method or display:table to contain the floats in this case.
[B]#content[/B] {
margin:0 160px; /*---150px for Lt. and Rt. Leaf Columns---*/
text-align: justify;
line-height: 1.25em;
margin-bottom: 10px;
margin-top:20px;
[COLOR=Blue] min-height:0;/*haslayout for ie7*/
display:table;/*contain inner floats in modern browsers*/[/COLOR]
}
[B]* html #content[/B] {[COLOR=Blue]height:1%;[/COLOR]}[COLOR=Blue]/*haslayout for ie6*/[/COLOR]
[B]#txtbox[/B] {
[COLOR=Blue] float:left;
width:100%;[/COLOR]
min-height:400px;
background: #C5FFBF;
}
[B]#left[/B] {
float:left;
width:160px;
min-height:400px;
margin-top: -20px;
[COLOR=Blue] margin-left: -160px;[/COLOR]
[COLOR=Blue] position:relative;
left:-100%;[/COLOR]
}
[B]#right[/B] {
float:right;
width:160px;
min-height:400px;
margin-right:-160px;
margin-top: -20px;
position:relative;
}
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 -
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%;
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.
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.
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 -
/*=== BEGIN TXTBOX === content2 has dwn-leafs only, box2 is full-pg */
#content, #content2 {padding: 0} /* for dwnleafs */
#content, #content2, .txtbox2wh, .txtbox2gr {min-height: 0}
[B]#content[/B] {
[COLOR=Blue] margin:15px 160px;[/COLOR]/*15px 160px 0;*/
[COLOR=Blue] min-height:0;/*haslayout for ie7*/
display:table;/*contain inner floats in modern browsers*/[/COLOR]
}
* html #content, #content2, .txtbox2wh, .txtbox2gr {height:1%}
[COLOR=Blue][B][COLOR=Black].txtbox[/COLOR][/B] {
float:left;
width:100%;
padding:0; /*reset to 0 when using 100% width*/
}[/COLOR]
[B].txtbox .inner[/B] [COLOR=Blue]{padding: 0 25px 25px}[/COLOR]/*now reset the padding on this new div*/
#content2 {margin:15px 63px 0}
.txtbox2wh, .txtbox2gr {margin: 0 auto} /*set width under Fonts+Spacing*/
[B].txtbox2gr[/B] {padding: 25px}[COLOR=Red] /*.txtbox has been removed and padding set on new inner div*/[/COLOR]
/*=== BEGIN LEFT COLUMN + RIGHT COLUMN ===*/
[B]#leftcol[/B] {
[COLOR=Red] /*clear:both; /* down-lft + down-rgt leaf REMOVE THIS CLEARING RULE*/[/COLOR]
[COLOR=Blue] float: left;
margin-left: -160px;
position:relative;
left:-100%;[/COLOR]
}
[COLOR=Blue][B][COLOR=Black]#rightcol[/COLOR][/B] {
float:left;/*float:right;*/
margin-right: -160px;
}[/COLOR]
#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,[B]* html #rightcol[/B] {height:1%;[COLOR=Blue]overflow:hidden;}/*overflow for IE6 italic bug*/[/COLOR]
.lft-inner {
width: 150px;
margin-top: 230px; /* 210 + 20px round-corner in rgt-inner*/
}
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.
/*=== END DOWN LEAF ===*/
[COLOR=Green] [B]/*=== BEGIN TXTBOX [/B][/COLOR]=== content2 has dwn-leafs only, box2 is full-pg */
#content, #content2 {padding: 0} /* for dwnleafs */
#content, #content2, .txtbox2wh, .txtbox2gr {min-height: 0}
[B]#content[/B] {
[COLOR=Blue] 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*/[/COLOR]
}
[B]#content:after[/B][COLOR=Blue] { /* this ruleset clears floats inside #content. (adapted from positioniseverything.net) */
clear:both;
content:" ";
display:block;
height:0;
font-size:0;
}[/COLOR]
* html #content, #content2, .txtbox2wh, .txtbox2gr {height:1%}
[B].txtbox[/B] {
[COLOR=Blue] float:left;
width:100%;
padding:0; /*reset to 0 when using 100% width*/ [/COLOR]
}
[B].txtbox .inner[/B] [COLOR=Blue]{padding: 0 25px 25px;}/*now reset the padding on this new div*/[/COLOR]
#content2 {margin:15px 63px 0}
.txtbox2wh, .txtbox2gr {margin: 0 auto} /*set width under Fonts+Spacing*/
[B].txtbox2gr[/B] [COLOR=Blue]{padding: 25px}[/COLOR] [COLOR=Red]/*.txtbox has been removed from here*/[/COLOR]
.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 ===*/
[COLOR=Green][B]/*=== BEGIN LEFT COLUMN + RIGHT COLUMN ===*/[/B][/COLOR]
[B]#leftcol [/B]{
[COLOR=Red] /*clear:both; /* down-lft + down-rgt leaf REMOVE THIS CLEARING RULE*/[/COLOR]
[COLOR=Blue] float:left;
position:relative;
right:100%;
margin-left:-160px;[/COLOR]
background:green;/*just for testing*/
}
[B]#rightcol[/B] {
[COLOR=Blue] float:right;
position:relative;
margin-right:-160px;[/COLOR]
background:blue;
}
#leftcol, #rightcol {
[COLOR=Red]/*display: inline; no need for this ie6 fix without side margins*/[/COLOR]
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,[B]* html #rightcol [/B]{height:1%;[COLOR=Blue]overflow:hidden;}/*overflow:hidden for IE6 italic bug*/[/COLOR]
.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;
}
[COLOR=Green][B] /*=== END LEFT + RIGHT COLUMNS ===*/[/B][/COLOR]
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%.
[B]<div id="content">[/B]
[B]<div class="txtbox">[/B]
[B][COLOR=DarkGreen]<div class="inner"><!--this is for 25px padding left and right-->[/COLOR][/B]
<!--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 & In-depth Info on Green Smoothies</h1>
<p>Green Smoothies are simple — 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 — 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>
[B][COLOR=DarkGreen]</div><!--end inner-->[/COLOR][/B]
[B]</div><!--end txtbox-->[/B]
[COLOR=Blue]<div id="leftcol">[/COLOR]
<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-->
[COLOR=Blue]</div><!--end leftcol-->
<div id="rightcol">[/COLOR]
<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-->
[COLOR=Blue]</div><!--end rightcol-->[/COLOR]
[B]</div><!--end content-->[/B]
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.
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
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.
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!
