Jump to content

Why Div's Breaking Up At Different Screen Sizes?


Recommended Posts

Yes have many design ideas in mind, but the attachement i have sent now is my first. I want the enitre page to be in the center of the screen (1000px width page) and black background for body.In the image you can see the different oultines of areas on the web page and some info on what it may contain....I tried creating div's, but some disappear, breakup and hide. Thanks alot for your support dubbeldam.

post-88172-0-22255200-1323224521_thumb.png

Link to post
Share on other sites

I did some experiments and finally got many div's under control...you can see the code below...if you have any idea why/how it used to give trouble earlier let me know. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"> <html> <style type="text/css"> body {background-color:black;} </style><body><div id="container" style="width:1000px;height:100%;margin-left:auto;margin-right:auto;"> <div id="yell" style="background-color:yellow; height:100px;width:1000px;float:center;"> Yellow Div </div> <div id="Grey" style="background-color:silver; height:200px;width:1000px;float:center;"> Grey Div </div> <div id="Gren" style="background-color:green; height:50px;width:500px; float:left;"> Green Div </div> <div id="Blue" style="background-color:blue; height:50px;width:500px; float:left;"> Blue Div </div> <div id="Pink" style="background-color:pink; height:55px;width:1000px; float:left;"> Pink Div </div> <div id="cent" style="background-color:gold; height:300px;width:60px; float:left;"> Gold </div> <div id="midd" style="background-color:brown; height:300px;width:880px; float:left;"> Brown </div> <div id="end" style="background-color:orange; height:300px;width:60px; float:left;"> orange </div> <div id="final"style="background-color:white; height:100px;width:1000px;float:left;"> white </div></div></body></html>

Link to post
Share on other sites

Well in the first file you attached, you had like 3 closing div tags that didn't match any <div> tags. Your container tag was closed after <div id="red" ... > so the green blue and pink wasn't contained in the container and when you resized the window, they were aligned according to your window and not according to your container.

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...