jQuery: positioning a div with float

[skater_00]

School assignment:

- Add a new div with id promotiediv and put it next to the 2 other columns using float. To do this correctly, you need to calculate the available width in the container. Do this dynamically! This means that when you adjust values in the CSS file, your code won't fall apart. Use the correct methods to determine the width and don't forget about the margins!!!!
- The new div contains an h3 with text 'promoties' and also a list where the elements are taken from an array. The initial values of this array are: 'Moestuinartikelen', 'Harken', 'Gras zaadjes', 'Veel meer...'. The list type is unordered.

Here's what I made of it so far:

$(document).ready(function() {
	$("#container").append($("<div>").attr("id", "promotiediv").append($("<h3>").text("promoties")).append($("<ul>")));
	var array = new Array("Moestuinartikelen", "Harken", "Gras zaadjes", "Veel meer...");

	for (var i = 0; i < array.length; i++) {
		$("#promotiediv ul").append($("<li>").text(array[i]));
	}
});

I'm having trouble positioning this new div. I think I may have to use

css("float", "right")

to put it next to the 2 other columns, but then it's still located at the bottom of the page. I'm stuck! How can I successfully finish this assignment?


You can download my source files HERE.

[Eldarrion]

You want to float it left. Also, you want to subtract at least 70 pixels from your current width calculator, else the container won't be able to hold all items in it as well as use before instead of append with a target of .dummy instead of #container. All in all, your jQuery code should look like:

$(document).ready(function() {
    var available = $("#container").outerWidth() - $("#latest").outerWidth() - $("#menu").outerWidth() - $("#content").outerWidth() - 70;
    
    $(".dummy").before($("<div>").attr("id", "promotiediv").append($("<h3>").text("promoties")).append($("<ul>")).css("float", "left").width(available));
    var array = new Array("Moestuinartikelen", "Harken", "Gras zaadjes", "Veel meer...");

    for (var i = 0; i < array.length; i++) {
        $("#promotiediv ul").append($("<li>").text(array[i]));
    }
    
    window.alert("remains: " + available);
});

Another thing you should look into is the fact that you include #latest in your calculations, but at the same time #latest doesn't have a set width (Which is also the reason behind the whole subtracting 70 from the final result instead of like... 20).

And yes, tested and works. Enjoy.