Vince889 Posted July 13, 2010 Share Posted July 13, 2010 Can someone please help me out with this? I've been trying really really to make this layout, and its like... killing me. It has to be in DIVS, no borders, solid background color. Gotta be compatible with modern browsers. Can someone please help me out or atleast steer me in the correct direction... so that I can atleast get started or something? Edit: would tables be easier? [attachment deleted by admin] Quote Link to comment Share on other sites More sharing options...
joePHP Posted July 14, 2010 Share Posted July 14, 2010 Hi, Here is some code to start with. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <style type="text/css"> #main_wrapper { width: 830px; margin: 0 auto; } #banner { width: 595px; height: 55px; float: left; border: solid 1px #000; } #small_links { width: 185px; height: 55px; float: left; margin-left: 11px; border: solid 1px #000; } #content1 { width: 595px; height: 345px; overflow: auto; float: left; margin-top: 7px; border: solid 1px #000; } #content2 { width: 185px; height: 345px; overflow: auto; float: left; margin: 7px 0 0 11px; border: solid 1px #000; } #content_bottom { width: 595px; height: 85px; float: left; margin-top: 7px; border: solid 1px #000; } #misc { width: 185px; height: 85px; float: left; margin: 7px 0 0 11px; border: solid 1px #000; } </style> <title>Webpage Title</title> </head> <body> <div id="main_wrapper"> <div id="banner"> </div> <div id="small_links"> </div> <div id="content1"> </div> <div id="content2"> </div> <div id="content_bottom"> </div> <div id="misc"> </div> </div> </body> </html> I hope this helps, Joe Quote Link to comment Share on other sites More sharing options...
Vince889 Posted July 14, 2010 Author Share Posted July 14, 2010 Thats excellent work, man! Thank you so much. That had been giving me a headache for a while... and I kept putting it off. One thing though, is it possible to make it stretch across the entire screen? I tried changing the widths from pixels to percentages, but that failed. =\ Would it be best to just increase the pixels and just hope that the user is viewing it in that resolution? Or even better, is there a way to make it stretch across the entire screen, but won't break if the user has a smaller resolution? Instead, it will just automatically adjust? (without a nasty horizontal scrollbar or something) Quote Link to comment Share on other sites More sharing options...
joePHP Posted July 14, 2010 Share Posted July 14, 2010 It's a matter of calculating the percentage between the widths and the margins like this: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <style type="text/css"> #banner { width: 78%; height: 55px; float: left; border: solid 1px #000; } #small_links { width: 20%; height: 55px; float: left; margin-left: 1%; border: solid 1px #000; } #content1 { width: 78%; height: 345px; overflow: auto; float: left; margin-top: 7px; border: solid 1px #000; } #content2 { width: 20%; height: 345px; overflow: auto; float: left; margin: 7px 0 0 1%; border: solid 1px #000; } #content_bottom { width: 78%; height: 85px; float: left; margin-top: 7px; border: solid 1px #000; } #misc { width: 20%; height: 85px; float: left; margin: 7px 0 0 1%; border: solid 1px #000; } </style> <title>Webpage Title</title> </head> <body> <div id="main_wrapper"> <div id="banner"> </div> <div id="small_links"> </div> <div id="content1"> </div> <div id="content2"> </div> <div id="content_bottom"> </div> <div id="misc"> </div> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
Vince889 Posted July 14, 2010 Author Share Posted July 14, 2010 Again, amazing. Thank you so much, JoePHP. You're a good man =D Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.