dinesh101 Posted December 6, 2011 Share Posted December 6, 2011 I have attached my sample website. In it how do i arrange multiple "div" and why do some break up at different screen sizes. Check my code and help me find my mistakes. index.html Link to comment Share on other sites More sharing options...
Dubbeldam Posted December 6, 2011 Share Posted December 6, 2011 I see. Do you have an example of how you want it to look like? Link to comment Share on other sites More sharing options...
dinesh101 Posted December 7, 2011 Author Share Posted December 7, 2011 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. Link to comment Share on other sites More sharing options...
dinesh101 Posted December 7, 2011 Author Share Posted December 7, 2011 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 comment Share on other sites More sharing options...
TheGallery Posted December 7, 2011 Share Posted December 7, 2011 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 comment Share on other sites More sharing options...
dinesh101 Posted December 7, 2011 Author Share Posted December 7, 2011 yes. Thanks a lot 'TheGallery'. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.