Jump to content

Css Divs Not Lining Up Correclty.


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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...