CSS Width Question

Hello,

I'm trying to create a template from scratch.

What I'm trying to do is that a centered main block with fixed size (943px) including a header, a menu and a content divs.

I want to make the menu with a left and right border (1px) but its size expands to 945px. I want to make it fixed size like header and content (943px).

Below is the HTML code for main wrapper:

  <div class="sf_cols Header">
    <div class="sf_colsOut sf_1col_1_100" style="width: 100%;">
      <div class="sf_colsIn sf_1col_1in_100" style="margin: 0%;" id="T4F5C4460000_Col00">
        <div class="sfContentBlock"> header part </div>
      </div>
    </div>
  </div>
  <div class="sf_cols Menu">
    <div class="sf_colsOut sf_1col_1_100" style="width: 100%;">
      <div class="sf_colsIn sf_1col_1in_100" style="" id="T4F5C4460017_Col00"> menu with left and right border </div>
    </div>
  </div>
  <div class="sf_cols Content">
    <div class="sf_colsOut sf_1col_1_100" style="width: 100%;">
      <div class="sf_colsIn sf_1col_1in_100" id="T4F5C4460012_Col00">
      </div>
    </div>
  </div>  
</div>


And this is the CSS:
body

    background-image: url('../Images/bodyBg1.gif');
    background-repeat: repeat-x;
    margin: 0;
    padding: 0;


.sfPublicWrapper

    width: 943px;
    margin: 0 auto;   

.Menu

    background-color: #f79c2a;
    height: 50px;      
    border-left: 1px solid #af752c;
    border-right: 1px solid #af752c;   



Thank you!

I achieved what I was trying to do with 960 grid system and developing a MasterPage within Visual Studio.

As a suggestion, I think integrating the Sitefinity layout UI with 960 grid system will be nice.

Thank you

Hi Oguz,

The width of the menu should be 941px minus left(1px) and right(1px) borders.

<div class="sf_cols Menu">

Hi,
I want to apply this css on the body

Hi Berrabah,

You can either add it to the theme of your template, or with a css widget.

All the best,
Jen Peleva
the Telerik team

Thankx for help :)