pdxGray Posted October 28, 2011 Share Posted October 28, 2011 Hello put this post for a js answer but I also have a css qustion.why can't I get box three to line up under the header box, next to the two stacked on top of each other boxes?this is my html code I removed the js stuff.thank you all. <!DOCTYPE HTML><html lang="en"><head><meta charset="UTF-8"><title>Fill Shapes Example</title></head><body onMouseMove="mouser(event);"><div id="wrapper"><div id="header"> </div></div><div id = box2>box2</div><!-- Unless canvas size is specified default size is 300 w x 150 h --><canvas id="canvas" width="700" height="350" >[Fallback Message]</canvas><canvas id="canvas" width="700" height="350" >[Fallback Message]</canvas><div id = box3>box3</div><div id = box4>box4</div><div id = box5>box5</div><div id=mvBox class=mvBox onMouseDown="mouse_down(event,'mvBox')"onMouseUp="mouse_up()"></div></div></body></html> this is my css code #wrapper{background-image: -ms-linear-gradient(bottom, #FFFFFF 0%, #9BEF81 100%);background-image: -moz-linear-gradient(bottom, #FFFFFF 0%, #9BEF81 100%);background-image: -webkit-linear-gradient(bottom, #FFFFFF 0%, #9BEF81 100%);margin-top:25px;margin-bottom:100px;margin-right:auto;margin-left:auto;padding: 50;}#box1{border:2px solid #000;padding:10px 40px;background: #CC3300;width:1000px;height: 150px;border-radius:25px;-moz-border-radius:25px; /* Firefox 3.6 and earlier */}#box2{float:left;border:2px solid #000;padding:0;background:#7DBD9D;width:150px;height: 700px;border-radius:25px;-moz-border-radius:25px; /* Firefox 3.6 and earlier */}#box3{top: 2000px;float:left;border:2px solid #000;padding:0;background: #7DBD9D;width:150px;height: 700px;border-radius:25px;-moz-border-radius:25px; /* Firefox 3.6 and earlier */}#box4{clear:both;border:2px solid #000;padding:0;background: #2E8A2E;width:1000px;height: 25px;border-radius:25px;-moz-border-radius:25px; /* Firefox 3.6 and earlier */}#box5{clear:both;border:2px solid #000;padding:0;background: #2E8A2E;width:1000px;height: 25px;border-radius:25px;-moz-border-radius:25px; /* Firefox 3.6 and earlier */}#mvBox {background: #FF0000;border:4px solid #000;width: 100px;height: 100px;position: absolute;top: 50px;left: 150px;z-index: 5;}canvas{margin-top:10px;margin-bottom:0px;margin-right:0;margin-left:0;float:left;background-color: #c0c0c0;border: 2px solid "#ddd";border-radius: 100px;-moz-border-radius: 100px; /* Firefox 3.6 and earlier */} Thank you for any help/replies. Link to comment Share on other sites More sharing options...
pdxGray Posted October 28, 2011 Author Share Posted October 28, 2011 I have partially solved the problem by giving box 3 an absolute position.clear:both;I chose lenght: auto; and now it runs over box 4 & 5 at the bottom. As both boxes have clear:both; I am surprised.Any way I can fix that?thanks Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.