CODEWITHSUNDEEP
css
user1871245
user1871245

Reputation:

Setting width to be 100% while margin is also set

I have two sections of a page, a side bar and a main content area. The side bar is 225px wide and I'd like the main content area to be 100% width of the page, minus the 225px for the sidebar. So I set the main content area to have a margin of 225 on the left so that it doesn't overlap the side bar, then I set its width to 100%, but doing this pushes the entire document out by 225pxs on the right, skewing the entire page. How can I set the width to be 100% while also having a margin and not pushing the document out as well? I have:

#main-content {
   position: absolute;
   margin-left: 225px;
   height: 100%;
   width: 100%;
}

#sidebar {
   position: relative;
   width: 225;
   height: 100%;
   background-color: #c00000;
}

Upvotes: 1

Views: 81

Answers (1)

scottlimmer
scottlimmer

Reputation: 2268

Try 

#main-content {
  position: absolute;
  left: 225px;
  right: 0;
  top: 0;
  bottom: 0;
}

Upvotes: 2

Related Questions