how to make this type layout by css,php,html. i am trying to make a wordpress thems . this is the content layout of index.php page
Create something similar like this. <html> <body> <div id="header"> <!--HTML codes here--> </div> <div id="sidebar"> <!--HTML codes here--> </div> <div id="content"> <div class="column"> <!--HTML codes here--> </div> <div class="column"> <!--HTML codes here--> </div> <div class="column"> <!--HTML codes here--> </div> </div> <!--end of div#content </body> </html> HTML: Adjust CSS rules as necessary. Easiest: #header { margin: 0 auto; width: 100%; } #sidebar { float: left; width: 25%; } #content { float: right; width: 75%; } .column { width: 33%; display: inline; } Code (markup):
You might want to be careful with that. Elements that are {display: inline;} do not have explicit widths or heights (though MSIE has a long history of screwing that up). You could use {display: inline-block;} instead. Second, you're going have a gotcha biting your rump if you don't account for word-spacing between the elements. cheers, gary
I also wouldn't use % for the narrower column as that tends to fall apart quickly. It's also sloppy to float BOTH columns, and in an ideal world usually you want the larger column FIRST since without the CSS layout you want the page to be more useful to visitors. Again, the "content first" approach to development. Which of course is why dicking around making columns without the semantic markup FOR those columns is utterly and completely back-assward. but then those bottom three equal width equal height elements? How are those going to adjust to differing content sizes? Again, goofy graphical crap that you might be able to do in a paint program, but has no business in a layout if you care about accessibility, graceful degradation, or are even simply trying to make a proper semi-fluid elastic responsive layout; three things ALL designs should be from this point onwards. MOST of which they are supposed to have been all along!