How to float it

Well – it can sometimes be quite difficult to understand how the float universe works. I will try to give some basic pointers and examples on the float left and float right technique and how it reacts in the layout.

The basic of id and classes

There are two ways to access HTML elements from CSS. You can either use id’s or class’es. Almost every HTML tag, if not all, allows the assignment of an id or class name. When element has an id or class, it can be accessed from CSS by using . or #.

ID are accessed with # (hash). Lets say we have a <div>-tag with the id set to mydiv:

<div id="mydiv">some content here</div>

The mydiv can then be access like this from CSS

#mydiv {
  width: 100px;
  height: 100px;
}

If we are using a class instead of an id, the code would lookup like this:

<div class="mydiv">some content here</div>

And

.mydiv {
  width: 100px;
  height: 100px;
}

id’s and class’es will not be covered in more details here.

Starting point

This article will use the following HTML as a starting point. It holds a simple div-”container” with contains another 3 divs.

<div class="container">
  <div class="class1">This is the first class</div>
  <div class="class2">This is the second class</div>
  <div class="class3">This is the third class</div>
</div>

Without any CSS it would look like this:

Not really that pretty and nice as we would like it to be, right?

Basic styling

Lets do some basic styling of the above code, to better see what’s going on.

.class1 {
  width: 200px;
  background-color: light-grey;
}
.class2 {
  width: 300px;
  background-color: white;
}
.class3 {
  width: 500px;
  background-color: grey;
}

This outputs:

Okay – now we can better see the difference between the 3 divs.

Lets float it

When floating left, the selected element will be placed along the left side of the next element.
When floating right, the selected element will be placed along the right side of the next element.

Left floating the first class:

.class1 {
  width: 200px;
  background-color: light-grey;
  float: left;
}

Okay, that went kinda like expected. Although – the class2 has a width set to 300px, so why does it wrap like that, when it should have enough space – the class1 is 200px and the class3 is 500px, so class1 and class2 should will up the exact same space as class3 below.

This is one of those questions I used to ask a friend of mine over at spiced2.com and he always answered “when in doubt, float left”. Ok then. Lets float class2 left as well:

.class1 {
          width: 200px;
          background-color: #DEDEDE;
          float: left;
}
.class2 {
          width: 300px;
          background-color: #006699;
          float: left;
}
.class3 {
          width: 500px;
          background-color: #009900;
}

Now it’s a lot better, but what will happen if we try to float right?

The first class is now floating right, and is therefor aligned to the right side of class2:

.class1 {
          width: 200px;
          background-color: #DEDEDE;
          float: right;
}
.class2 {
          width: 300px;
          background-color: #006699;
}
class3 {
          width: 500px;
          background-color: #009900;
}

The next step

Lets try a bit more advanced setup, where we will wrap some text around another element. To do this we have to place one element inside another like this:

<div class="container">
  <div class="class1"> <span class="class2">This is the second class</span>This is the first class This is the first class This is the first class This is the first class This is the first class This is the first class </div>
  <div class="class3">This is the third class</div>
</div>

To get the text in class wrapped around the class2 element, we have to set a float right on the class2. This makes it right aligned, and the text in class1 will then wrapped around it.

The CSS looks as follows:

.class1 {
          width: 500px;
          background-color: #DEDEDE;
          float: left;
}
.class2 {
          width: 200px;
          background-color: #006699;
          float: right;
}
.class3 {
          width: 500px;
          background-color: #009900;
}

Last words

That it. A very small and basic intro tutorial on the mysterious left and right floating. Enjoy.

Example code for the jQuery DIV rotator:

<div class="">
<div class="focusitem active">Item 1</div>
<div class="focusitem notactive">Item 2</div>
<div class="focusitem notactive">Item 3</div>
<div class="focusitem notactive">Item 4</div>
</div>

And this will output 4 divs as shown here:

Nothing exciting about this, really. So – lets add the forward and backward button for the shifting of visible divs.

Make the items rotate

<div class="goleft">Go Left</div>

<div class="">
<div class="focusitem active">Item 1</div>
<div class="focusitem notactive">Item 2</div>
<div class="focusitem notactive">Item 3</div>
<div class="focusitem notactive">Item 4</div>
</div>

<div class="goright">Go Right</div>

There is now added 2 buttons/divs/textsfield – a left one and a right one. All we have to do, is make the buttons change which div is visible. The easy way to do this, is by changing the class name of the div and with CSS control the visibility and format.

To register a click event on the left and right buttons, we have to use the click()-function in jQuery.

That can look like this:

Javascript:

     // trigger the mouse click even
     $(".goleft").click( function(e) {
        // get the current active element
        var $active = $(".active");
        // get the previous element or, if no previous then get the last item in the focusitem-class.
        var $next = $active.prev().length ? $active.prev() : $(".focusitem:last");

        // set the visibility of the active and notactive classes.
        $active.removeClass('active');
        $active.addClass('notactive');
        $next.addClass('active');
        $next.removeClass('notactive');
    });

CSS:

<div class="focusitem active">Item 1</div>
<div class="focusitem notactive">Item 2</div>
<div class="focusitem notactive">Item 3</div>
<div class="focusitem notactive">Item 4</div>

Result:

How it works

The jQuery rotation code gets activated as soon as a user clicks the buttons. It find the active element, and the next or previous element corresponding to which buttons is activated and the toggles the active and notactive classes on the focusitems.

Complete jQuery code:

(document).ready(function() {

    $(".goleft").click( function(e) {
        var $active = $(".active");
        var $next = $active.prev().length ? $active.prev() : $(".focusitem:last");

        $active.removeClass('active');
        $active.addClass('notactive');
        $next.addClass('active');
        $next.removeClass('notactive');
    });

    $(".goright").click( function(e) {
        var $active = $(".active");
        var $next = $active.next().length ? $active.next() : $(".focusitem:first");

        $active.removeClass('active');
        $active.addClass('notactive');
        $next.addClass('active');
        $next.removeClass('notactive');
    });

});

Complete CSS for the above example:

.active {
    display: block;
    width: 100px;
    float: left;
}
.notactive {
    display: none;
}

.goleft, .goright {
    cursor: pointer;
    width: 100px;
    float: left;
    border: 1px solid;
}

Now what?

For more fancy display that my example shows, try putting some images ind the focusitem and make some nice arrows for the go left and right buttons. The usability of the rotator will improve a lot, by making some easy layout adjustments.

Obvious expansions for this kind of rotator would be a more fancy shift/glide between active divs or perhaps loading each element with Ajax, but this is intensionally not covered in this post.

An easy way of controlling this, is to setup the javascript and css files from the template configuration. There are some different ways of doing this and I will demonstrate two of them here.

The template configuration examples should be self-explainable, so I will not comment them futher:

Javascript option 1 – headerData:

page.headerData.230 = TEXT
page.headerData.230.value = <script type="text/javascript" src="/fileadmin/myjavascript.js"></script>

Javascript option 2 – includeJS:

page.includeJS {
  file1 = fileadmin/myjavascript.js
  file1.type = application/x-javascript
  file2 = fileadmin/myjavascript2.js
}

CSS option 1 – headerData

page.headerData.231 = TEXT
page.headerData.231.value = <link rel="stylesheet" type="text/css" href="/fileadmin/stylesheet.css" />

CSS option 2 – includeCSS

page.includeCSS {
  file1 = fileadmin/stylesheet.css
}

CSS option 3 – page.stylesheet

page.stylesheet = fileadmin/stylesheet.css

Hope this tip can be helpful. Please notice that the CSS option 3 only enables you to set 1 stylesheet, where the other examples support multiple files.