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] Link to comment https://forums.phpfreaks.com/topic/207661-help-with-html-layout/ 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 Link to comment https://forums.phpfreaks.com/topic/207661-help-with-html-layout/#findComment-1085629 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) Link to comment https://forums.phpfreaks.com/topic/207661-help-with-html-layout/#findComment-1085866 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> Link to comment https://forums.phpfreaks.com/topic/207661-help-with-html-layout/#findComment-1085950 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 Link to comment https://forums.phpfreaks.com/topic/207661-help-with-html-layout/#findComment-1085961 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.