css width with an inline-block element

Question

I'm trying to make a layout like this. All the banners have static dimensions and a bottom margin. And the article needs padding. The problem is the value of the width property of article. After locating the banners, I want to give the rest of the entire page width to article element. Here is my code:

#SidePane {
  display: inline-block;
  float: left;
}
.SideBanner {
  display: block;
  width: 250px;
  height: 157px;
  margin: 0 0 5px 0;
}
#SiteEye {
  width: ???????????????????????;
  height: 700px;
  padding: 10px;
  color: #4F2412;
  background-color: #F9F6F4;
  display: inline-block;
}

<div id="SiteCenter">

  <div id="SiteEye">
    <h1>title</h1>
    <p>p1</p>
    <p>p2</p>
  </div>

  <div id="SidePane">
    <a href="">
      <img class="SideBanner" src="images/banners/b1.jpg" alt="banner1" />
    </a>
    <a href="">
      <img class="SideBanner" src="images/banners/b2.jpg" alt="banner1" />
    </a>
    <a href="">
      <img class="SideBanner" src="images/banners/b3.jpg" alt="banner1" />
    </a>
    <a href="">
      <img class="SideBanner" src="images/banners/b4.jpg" alt="banner1" />
    </a>
  </div>

</div>

Bhojendra Rauniyar · Accepted Answer · 2015-07-23 09:00:49Z

2

You may use calc method:

width: calc(100% - 250px);

See can i use calc? before using it for it's browser compatibility.

answered Jul 23, 2015 at 9:00

Bhojendra Rauniyar

86k36 gold badges179 silver badges241 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Stack crawler Over a year ago

Thank you for quick answer. I just forget to add padding property to 'SiteEye' class. So that would be something like width: calc(100% - 270px); with a paddding of 10px for SiteEye. Is there a more dynamic way to do this without hard-coding values based on dimensions and padding?

Jamie Barker · Accepted Answer · 2015-07-23 09:23:25Z

1

RE: Comment on Bhojendra's answer

There is another way, it involves using box-sizing:border-box;, one of the most useful additions to CSS, like, ever!

I've also updated your images to use a top padding on all except the first one because you were causing some white-space at the bottom of the page with the previous method.

* {
  box-sizing:border-box; /* Make all height/width inclusive of padding and border */
}
body {
  margin:0;
  padding:0;
}
#SidePane {
  display: inline-block;
  float: left;
}
.SideBanner {
  display: block;
  width: 250px;
  height: 175px;
  padding: 5px 0 0 0;
}
#SidePane a:first-child .SideBanner {
  padding:0;  
}
#SiteEye {
  width: calc(100% - 250px);
  height: 700px;
  color: #4F2412;
  background-color: #F9F6F4;
  display: inline-block;
  padding:10px;
}

<div id="SiteCenter">

  <div id="SiteEye">
    <h1>title</h1>
    <p>p1</p>
    <p>p2</p>
  </div>

  <div id="SidePane">
    <a href="">
      <img class="SideBanner" src="http://placehold.it/250x170" alt="banner1" />
    </a>
    <a href="">
      <img class="SideBanner" src="http://placehold.it/250x170" alt="banner1" />
    </a>
    <a href="">
      <img class="SideBanner" src="http://placehold.it/250x170" alt="banner1" />
    </a>
    <a href="">
      <img class="SideBanner" src="http://placehold.it/250x170" alt="banner1" />
    </a>
  </div>

</div>

answered Jul 23, 2015 at 9:23

Jamie Barker

8,2663 gold badges31 silver badges64 bronze badges

2 Comments

Stack crawler Over a year ago

Great! Now, is there some way that I can calculate the number of characters which fit in article's box so that I can take a substring of article's content and fit it in the box? Since this is going to be a random article, it might be short or long.

Jamie Barker Over a year ago

@Stackcrawler There is only even a remote chance of being able to do that if you're using a monospace font. Otherwise, each character will take up a different amount of space.

Collectives™ on Stack Overflow

css width with an inline-block element

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related