More in this section
Forums / Designing & Styling / CSS Width Question

CSS Width Question

The forums are in read-only mode. In case that you want to directly contact the Progress Sitefinity team use the support center. In our Google Plus group you can find more than one thousand Sitefinity developers discussing different topics. For the Stack Overflow threads don’t forget to use the “Sitefinity” tag.
6 posts, 0 answered
  1. Oguz
    Oguz avatar
    10 posts
    Registered:
    01 Feb 2011
    04 Feb 2011
    Link to this post
    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!
  2. Oguz
    Oguz avatar
    10 posts
    Registered:
    01 Feb 2011
    07 Feb 2011
    Link to this post
    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
  3. Sonya
    Sonya avatar
    205 posts
    Registered:
    09 Dec 2016
    07 Feb 2011
    Link to this post
    Hi Oguz,

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

    <div class="sf_cols Menu">
        <div class="sf_colsOut sf_1col_1_100" style="width: 941px;">
          <div class="sf_colsIn sf_1col_1in_100" id="T4F5C4460017_Col00"> menu with left and right border </div>

    Greetings,
    Sonya
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  4. Berrabah
    Berrabah avatar
    25 posts
    Registered:
    12 Feb 2012
    05 Mar 2012
    Link to this post
    Hi,
    I want to apply this css on the body
    body 
    {
    background-color:#000000;
    width:1342;
    }
    What should I do ?
  5. Jen Peleva
    Jen Peleva avatar
    568 posts
    Registered:
    10 Nov 2016
    07 Mar 2012
    Link to this post
    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
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  6. Berrabah
    Berrabah avatar
    25 posts
    Registered:
    12 Feb 2012
    08 Mar 2012
    Link to this post
    Thankx for help :)
6 posts, 0 answered