Search code examples
htmlcssposition

Position divs with dynamic widths horizontally relative to one another

I'm creating an app using Angular JS that will have dynamic content. How can I use CSS to position a variable number of divs with dynamic widths horizontally relative to one another?

To be more specific here's a diagram:

enter image description here

These three divs are inside of another div (in grey) with overflow-x: scroll and overflow-y:hidden. At the moment the divs are positioned with float: left, but when I resize the window to make the grey div smaller, the green div will disappear as it jumps below the two other ones.

I'd rather have the green div stay in line and have the grey div's scroll-bar account for it. I already tried white-space: nowrap Is there any way to do this?

Code can be viewed here.

root {
	display: block;
}

.cardPanel {
	position: absolute;
	top: 125px;
	bottom: 75px;
	left: 0px;
	right: 0px;
	overflow-x: scroll;
	overflow-y: hidden;
	background-color: #BFBFBF;
}

.cardPanelDiv {
	float: left;
	top: 0px;
	height: 100%;
	white-space:nowrap;
}

.cardDividerDiv {
	float: left;
	top: 0px;
	height: 100%;
	width: 75px;
	white-space:nowrap;
}

.cardDivider {
	position: abolute;
	margin-left: 10px;
	top: 0px;
	bottom: 0px;
	width: 5px;
	background-color: #808080;
}

.cardDividerWords {
	position: abolute;
	left: 0px;
	top: 0px;	
}
<div class="cardPanel">
  <div class="cardDividerDiv" style="background-color: yellow">This is a div</div>
  <div class="cardPanelDiv" style="background-color: red">More div things I just love. I just noticed that I randomly picked the colours of stoplights for this.</div>
  <div class="cardPanelDiv" style="background-color: green">Just more oh so nice div. It is just so lovely to look at because this one is GREEN!</div>
  <div class="cardPanelDiv" style="background-color: blue">Here's another div that jumps down to the next line. It shouldn't jump. It should just scroll.</div>
</div>

Solution

  • I guess I didn't do the greatest job explaining the question. Anyway, I figured out how to do it:

    .container {
  position: absolute;
  top: 75px;
  bottom: 75px;
  background-color: #808080;
  display: block;
  width: 100%;
  overflow-x: scroll;
  white-space: nowrap;
}
.container .panel-outer {
  display: inline-block;
  height: 100%;
}
.container .panel-inner {
  display: inline-block;
}
    <div class="container">
  <div class="panel-outer" style="background-color:yellow">
    <div class="panel-inner" />adsfasdfasdfasdfassdfasdfadsfasdfasdfasdfdfasdfdsfasdfasdfasdfadsfasdfadsfdf
  </div>
  <div class="panel-outer" style="background-color:green">
    <div class="panel-inner" />jdklf;uoijdhksjkasdfjksasldkfjasdlfkasd;fksdsdf
  </div>

  <div class="panel-outer" style="background-color:blue">
    <div class="panel-inner" />adsfasdfasdfasdfassdfasdfadsfasdfasdfasdfdfasdfdsfasdfasdfasdfadsfasdfadsfdf
  </div>
  <div class="panel-outer" style="background-color:red">
    <div class="panel-inner" />adsfasdfasdfasdfassdfasdfadsfasdfasdfasdfdfasdfdsfasdfasdfasdfadsfasdfadsfdf
  </div>
  <div class="panel-outer" style="background-color:cyan">
    <div class="panel-inner" />adsfasdfasdfasdfassdfasdfadsfasdfasdfasdfdfasdfdsfasdfasdfasdfadsfasdfadsfdf
  </div>
</div>