CODEWITHSUNDEEP
css
nicholas79171
nicholas79171

Reputation: 1273

How do I make the aside have the width of the remaining area?

I have a simple page with content on the left and an aside on the right. I would like the div on the left to be 70% of the width of the container and then the aside take up the rest of the space, but I can't figure out how to give it a variable width.

I've tried setting the width of the aside to be 30%, but that doesn't leave any room for the 24px of space I'd like between the div and the aside. I also tried setting the width of the aside to be 28% and that gets it close, but I figured there's a more precise way of doing it.

Here's a simple example:

.container {
  width: 80%;
  margin: auto;
  background-color: #ccc;
  height: 500px;
  padding: 24px;
}
.left {
  background-color: white;
  width: 70%;
  height: 100%;
  float: left;
}
.right {
  background-color: white;
  width: 28%;
  height: 100%;
  float: right;
}
<div class="container">
  <div class="left"></div>
  <aside class="right"></aside>
</div>

Upvotes: 0

Views: 2518

Answers (2)

Orun
Orun

Reputation: 4603

Without getting into Sass, you can use the CSS calc(); function.

Note that in the CSS below, I'm keeping your 28% value for graceful degradation on older browsers that do not support calc() (Old Android browsers, Opera Mini and IE8-).

Live example here.

.container {
  width: 80%;
  margin: auto;
  background-color: #ccc;
  height: 500px;
  padding: 24px;
}
.left {
  background-color: white;
  width: 70%;
  height: 100%;
  float: left;
}
.right {
  background-color: white;
  width: 28%;
  width: calc(30% - 24px);
  height: 100%;
  float: right;
}

Upvotes: 2

HaukurHaf
HaukurHaf

Reputation: 13806

Ok, how about this:

http://jsfiddle.net/9fy6txpa/

.left {
  background-color: white;
  width: 70%;
  height: 100%;
  float: left;
  border-right:24px solid #ccc;
  box-sizing:border-box;
}

Set the widths to 70% and 30% as desired. Instead of having a margin/padding between the div and the aside, give the div a 24px wide right-border and then change it's box-sizing property to border-box. That way, it's width will be 70% including the added border (a total width of 70%, not 70% plus the border as the default box model does).

Upvotes: 0

Related Questions