some divs and css problem

Question

4.00/5 (1 vote)

See more:

Hi,

I have something really simple:

XML

<script type="text/javascript">
        var intFieldWidth = 100; // Creates 100 divs in a line
        var intFieldHeight = 10; // Create 10 rows with (see above) 100 divs

        function UpdateField() {
            intFieldWidth = $('#txtWidth').val();
            intFieldHeight = $('#txtHeight').val();
            var $elem = "";
            for (intTop = 0; intTop < intFieldHeight; intTop++) {
                for (var i = 0; i < intFieldWidth; i++) {
                     $elem = "";
                    $elem += "<div class='fieldgrid'>" + i + "</div>";
                    $('#field').append($elem);
                }
                $('#field').append('<div style="clear: both"></div>'); // Goes to the next line
            }
        }

        $(document).ready(function () {
            UpdateField();
        });
    </script>

    <style>
        div.fieldgrid
        {
            width: 20px;
            height: 20px;
            float: left;
            border: 1px solid blue;
        }
        div.bar
        {
            width: 20%;
            height: 500px;
            border: 1px solid red;
            float: left;
        }
        
        div.field
        {
            width: 300px;
            height: 200px;
            overflow: scroll;
        }
</style>
<div id="field" class="field"></div>

As you can see I want to make a grid out of divs. This is done by a jQuery function that generates the divs and places them in the div "field".

The problem:
As you also can see, the div "field" has the overflow set to scroll, allowing it to scroll. The idea is that each div (inside the div "field") is placed next to eachother. In this case there should be 100 divs in a row. But they are set to the next line when the row becomes larger than the div "field"... This should not happen!

Has anyone an idea?

Thanks in advance

Posted 27-Nov-11 6:53am

Ken Elz

Updated 27-Nov-11 6:54am

v3

Add a Solution

2 solutions

Solution 1

At the end of each row, you need to have a div that clears the float.

Posted 27-Nov-11 7:17am

#realJSOP

Comments

Ken Elz 28-Nov-11 0:02am

You mean the line

$('#field').append('<div style="clear: both"></div>');

?

#realJSOP 28-Nov-11 6:01am

Yeah, that should work.

Ken Elz 28-Nov-11 12:20pm

As you might have notice: That line is already in the script and I also fixed it: Was a css problem/fix

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Ken Elz · Accepted Answer · 2011-11-27T20:50:00

I found the answer:

I had to change the CSS (I thought I made a mistake with jQuery)

div.fieldgrid
{
	display: inline-block;
	width: 20px;
	height: 20px;
	border: 1px solid blue;
}
div.bar
{
	width: 20%;
	height: 500px;
	border: 1px solid red;
	float: left;
}

div.field
{
	width: 500px;
	height: 500px;
	overflow: auto;
	overflow-x: scroll;
	background-color: #ffffff;    
	white-space: nowrap;
}