Wordpress Themes - WP Forum at BFA
Click Here To DONATE! Support the theme development, get more attention and additional benefits based on your donation level. Your forum name will be highlighted.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Center area post/pages »

How to float against Centre Column


Build custom WP THEMES, without
coding.
Click here for THEMEFRAME

From the author of Atahualpa, the #1 most
downloaded (700,000+) theme @ wordpress.org
  #1  
Old Oct 16, 2012, 04:13 AM
annsworld
 
95 posts · Mar 2010
I am looking for the code to define for a piece of content to float up against the left hand side of the center column:

If I use float: left; then a piece of content floats against the left hand side of the entire website. Thus if the window is small - the content overlaps with the center column.
Click image for larger version

Name:	Screen Shot 2012-10-16 at 11.10.47 AM.png
Views:	254
Size:	31.6 KB
ID:	2068
If the window is very large, it is very far away from the centre column.
Click image for larger version

Name:	Screen Shot 2012-10-16 at 11.10.08 AM.png
Views:	249
Size:	35.2 KB
ID:	2067

What I would like is for that piece of content to float up against the left hand side of the centre column (outside the center column that is in the background area) regardless of how large the window is.
Click image for larger version

Name:	Screen Shot 2012-10-16 at 11.11.04 AM.png
Views:	247
Size:	32.4 KB
ID:	2069

Can you help me, please?

Thanks,
Ann.
  #2  
Old Oct 16, 2012, 04:45 AM
juggledad's Avatar
juggledad
 
22,317 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
Quote:
How Elements Float

Elements are floated horizontally, this means that an element can only be floated left or right, not up or down.

A floated element will move as far to the left or right as it can. Usually this means all the way to the left or right of the containing element.

The elements after the floating element will flow around it.

The elements before the floating element will not be affected.

If an image is floated to the right, a following text flows around it, to the left:
Taken from http://www.w3schools.com/css/css_float.asp
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #3  
Old Oct 17, 2012, 07:00 AM
annsworld
 
95 posts · Mar 2010
THank you for your reply juggledad. That is how I understood how it worked, but I cannot get it to work in this application. I tried it in the header area and I also set in up in the left sidewidget. My expectation was that the left sidewidget should do it, as it is flush against the centre column. so a float right should work. Instead the whole think ended up to the right hand side of the screen. Not of the element it was in. Apart from that, the left sidewidget is in the center part thus not exactly where I want it to be. :-(

As shown in the screenshot. I do not want to put code in the centre container because then I have to edit the file each time I upgrade the software.

Any ideas?

Last edited by annsworld; Oct 17, 2012 at 07:02 AM.
  #4  
Old Oct 17, 2012, 07:10 AM
juggledad's Avatar
juggledad
 
22,317 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
what's the url?
where did you put your code?
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #5  
Old Oct 17, 2012, 09:44 AM
lmilesw's Avatar
lmilesw
 
10,108 posts · Jul 2009
Central New York State USA
As you have found working with floats and positioning can be a challenge especially because Atahualpa uses a table layout. How about another option such as this plugin the allows for floating share buttons always visible on the left side of the screen?
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #6  
Old Oct 17, 2012, 12:37 PM
annsworld
 
95 posts · Mar 2010
Hi Guys, :-)

Die url is www-thebirdschool.com

I had tried the plugin before I started with the code. It had exactly the same issues. I had hoped to get around this by putting code in myself (and now I am tearing my hair out ...)

I have tried the code in:
ATO=>C
  • onfigure Header Area
    and also
  • in the left sidebar per text widget

The code is
Code:
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_floating_style addthis_32x32_style" style="left:50px;top:475px;background:#00adef;">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
<script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js#pubid=ra-xxxxxxx"></script>
<!-- AddThis Button END -->
I had also tried all kinds of variations including float: right; when positioned in the left sidebar but that just bounced it all the way across the screens right hand edge.

Somehow it does not recognise the side of the sidebar as the end. I was hoping that there was just a bit of code issing like "align:leftsidebar;" :D or something like that that I was not aware of ....

Thanks for your help.
  #7  
Old Oct 17, 2012, 01:47 PM
lmilesw's Avatar
lmilesw
 
10,108 posts · Jul 2009
Central New York State USA
To get the effect you are after may require building your own sharing buttons and positioning as desired. I'm not sure how I would go about that and it would take awhile to "fiddle" with ideas. Off hand you could try putting the code for the icons in a text widget in the left sidebar and then use CSS to position absolutely and style as you want. You could also perhaps put a social media widget in the sidebar and position absolutely. You may have to set the containing div to position relative for the absolute positioning to work.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #8  
Old Oct 21, 2012, 10:56 AM
annsworld
 
95 posts · Mar 2010
Hi Larry,

I have tried absolute/relative positioning too and couldn't get that to work either. Ah well - I guess it'll have to remain as it is for the time being.

Thanks anyways :-)

Take care,
Ann.
  #9  
Old Oct 21, 2012, 11:19 AM
juggledad's Avatar
juggledad
 
22,317 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
you could try giving the page a left sidebar - put a text widget in it - add the code to the widget - set the left sidebar width to 0 - then use CSS to position the widget with a "position: relative: left:-200px;" or what ever value works position
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #10  
Old Nov 3, 2012, 06:54 AM
annsworld
 
95 posts · Mar 2010
Hi Juggledad.

Thank you for your answer and apologies for not responding sooner. I had missed the notification and did not realize that I had received an answer in this thread.

I'll give this a try and will let you know. :-)
  #11  
Old Nov 4, 2012, 01:50 AM
annsworld
 
95 posts · Mar 2010
Tried around with that some more. Did not work either. I think I'll give up on it. Not worth the time wasted. But thanks anyways.

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] Float Image Between Center Column And Footer bswb97 Center area post/pages 1 Aug 9, 2011 03:53 PM
0 padding / margin above centre column striped aardvark Center area post/pages 3 Jun 28, 2010 02:27 PM
two colour centre column? adri Page & Category Menu Bars 1 Oct 10, 2009 07:18 PM
Centre column content dissapearing in IE6 aquilaciencia Sidebars & Widgets 0 Aug 19, 2009 07:21 AM
Scroll Centre Column gcaleval Sidebars & Widgets 2 Jul 13, 2009 09:02 PM


All times are GMT -6. The time now is 02:15 PM.


Powered by vBulletin® Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.