I would like to achieve the following layout using CSS [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.

---

Want to improve this question? Update the question so it focuses on one problem only by editing this post.

Closed 4 years ago.

Improve this question

I do not want to use tables. I want to make a styling file, such that it can be applied to all pages I want.

It's like a template, using css

note

I am a beginner using this "css" yes there are numerous tutorials, that's the main problem. Please give specific examples and links which would help.

Also, is it possible to make the above template such that the controls exceeding the width of the cell are wrapped? meaning grow in length but stay within width limits? It should be

• page divided into three columns, left right and center
• center the biggest and left right of equal width
• these columns divided into six rows
• all rows of equal width initially

and,

• a开发者_JAVA技巧 way to place controls within the cells obtained from the above

---

have a look a 960.gs or dl directly from here. It gives you a lot of flexibility. It does take some time to get used to though if CSS is not your thing - however it's pretty simple once you get to grips with the classes. However, for the most part using 960.gs is plug and play IMO. There are other variations available that also define grids based on liquid layouts compared to the fixed approach of 960.gs

So in your case you probably will use grid_2 and grid_8 CSS classes to give you the columns. However, you actually should start by declaring rows rather than columns - which I think will give you the equal rows you are after.

<div id="mainContent">
    <div class="clear"></div> 
    <div class="container_12" id="row1">
        <div class="grid_2"></div>
        <div class="grid_8"></div>
        <div class="grid_2"></div>
    </div>

    <-- other row declarations here -->

   <div class="clear"></div>
   <div class="container_12" id="row6">
       <div class="grid_2"></div>
       <div class="grid_8"></div>
       <div class="grid_2"></div>
   </div>
</div>