Jump to content

Messing borders while resizing window

Recommended Posts

Hello.Each time when i resize window i get mess.What i should add in css?And how to make #body to be midle of schreen always?Here's some codes:

<div id="body"><div id="manu"></div></div>

body{font-family:Comic Sans MS , Arial;text-align:center;background-color:#000000;color:#179161;cursor:help;}#body{width:700px;height:600px;border:2px solid #179161;box-shadow: 30px 20px 35px #4A804E;position:relative;}#manu{width:600px;height:100px;border:2px solid #179161;margin-top:1mm;margin-left:50px;position:relative;}


Link to post
Share on other sites

Only 2 develop tools i using,and it's xampp & notepad++And testing always in 4 browisers from localhost.Elastic container is something what i curently can't understand.When i say elastic i say while resizing window or etc to it keep own positions.(i using 1024x768)So,if i change in another size,it change a litlle.

Link to post
Share on other sites

With horizontal alignment you would use margin: 0 auto; on both #body, and #manu

#body{width:700px;height:600px;border:2px solid #179161;box-shadow: 30px 20px 35px #4A804E;position:relative;margin: 0 auto; /* added by dsonesuk - centres #body within parent element container(body) */}#manu{width:600px;height:100px;border:2px solid #179161;margin-top:1mm;/*margin-left:50px;*/margin: 0 auto; /* amended by dsonesuk - centres #manu within #body element container */position:relative;}

As long as you are not using styling like float, and the target element is a block element and a fixed width is set, these should centre horizontally across the screen.

  • Like 1
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.

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.

  • Create New...