CODEWITHSUNDEEP
javascripthtmlcss-float
Carlos
Carlos

Reputation: 5455

Webpage layout breaking on window resize

The images below illustrate what the actual problem is alt text

So as you can see this is a puzzle, and is being created by javascript. Each row is created like this.

document.write("<div style='float:none'>");
for(i=0; i < 4 ; i++) { 
        for(j=0; j < 4 ; j++) {
         imgArray[i] = "Images/" + x + ".jpg";
         document.write("<img id= " + x + " src='Images/" + x + ".jpg' width='120' height='120' style='position:relative;top:50px;left:50px' onclick='checkMove(parseInt(id))'/>");
         x = x + 1;
        }
        document.write("<br>");
}
document.write("</div>");

Even using float style keeps this problem. Is there a way to lock a window not to be resized smaller than x? Could you please point me in the right direction as in what im doing wrong, or not doing.

Upvotes: 2

Views: 844

Answers (5)

ericawebdev
ericawebdev

Reputation: 19

Also consider min-width http://www.w3schools.com/jsref/prop_style_minwidth.asp and the CSS equivalent.

Upvotes: 1

Zach
Zach

Reputation: 7940

Try putting

white-space: nowrap;

on the style of the div. That should prevent its contents from wrapping. Instead you'll get a horizontal scrollbar.

Upvotes: 1

Simon
Simon

Reputation: 3539

Just use css to set the width of the container div to the width of 4 images, which should be 480px.

Upvotes: 1

Istv&#225;n Ujj-M&#233;sz&#225;ros
Istv&#225;n Ujj-M&#233;sz&#225;ros

Reputation: 3247

Have you tried to add a fixed width to your div?

<div style='float:none;width:480px;'>

Upvotes: 2

Oded
Oded

Reputation: 499382

If you give your div a width (in px), resizing will cause a scrollbar to appear.

document.write("<div style='float:none;width:600px'>");

Upvotes: 1

Related Questions