CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
CedricLaberge
CedricLaberge

Reputation: 662

CSS: give element same width as "grandparent" element

I have a supercontainer (fitting screen width, with margins and padding) , which contains a wider container, which in turn contains (sorry for the redundancy) an undetermined (DB-driven) number of left-floated boxes. It is all part of a Backbone/Underscore template.

I want the boxes to have the same width as the supercontainer, in order to make only one visible at a time (there's a horizontal scroller-function in the Backbone View). I know I could use jQuery to get the supercontainer's width and apply it to boxes upon rendering, but I would definitely prefer a pure-CSS solution to avoid issues with screen resizing.

To make things clear:

HTML:

<div id="supercontainer">
  <div id="wide-container">
    <div class="fun-box"></div>
    <div class="fun-box"></div>
    <div class="fun-box"></div>
  </div>
</div>

CSS: 

#supercontainer {
  width:100%;
  overflow:hidden;
  margin:50px;
}

#wide-container {
  display:table;
}

.fun-box {
  height:100%;
  float:left;
  width: ???; /* something that makes it as wide as the supercontainer */
}

How can I do that?

Upvotes: 0

Views: 3511

Answers (2)

Oriol
Oriol

Reputation: 288520

You can try making .fun-box a third of #wide-container's width, and #wide-container three times #supercontainer:

#wide-container {
    width: 300%;
}
.fun-box {
    width: 33.33%;
}

Demo

Upvotes: 0

T J
T J

Reputation: 43166

If the #supercontainer always has 100% width of window, you can match it by applying width: 100vw for the boxes

.fun-box {
  height:100%;
  float:left;
  width: 100vw; 
}

Viewport-percentage lengths defined a length relatively to the size of viewport, that is the visible portion of the document.

1vw =1/100th of the width of the viewport

-MDN

Upvotes: 2

Related Questions