Jump to content

Css Divs Not Lining Up Correclty.


pdxGray
 Share

Recommended Posts

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...