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.

If the window is very large, it is very far away from the centre column.


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.


Can you help me, please?

Thanks,
Ann.

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

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?

what's the url?
where did you put your code?

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?

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

<!-- 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.

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.

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.

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

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

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.