This question already has answers here:
How do I keep CSS floats in one line?
(10 answers)
Closed 9 years ago.
Consider the following fragment:
<html>
<head>
<style type="text/css">
#container {
width: 400px;
height: 600px;
background-color: lightgrey;
}
.item {
width: 50px;
overflow: hidden;
white-space: nowrap;
float: left;
border: 1px solid red;
}
</style>
</head>
<body>
<div id="container">
<div class="item">ITEM 1</div>
<div class="item">ITEM 2</div>
<div class="item">ITEM 3</div>
<div class="item">ITEM 4</div>
<div class="item">ITEM 5</div>
<div class="item">ITEM 6</div>
<div class="item">ITEM 7</div>
<div class="item">ITEM 8</div>
<div class="item">ITEM 9</div>
<div class="item">ITEM 10</div>
<div class="item">ITEM 11</div>
<div class="item">ITEM 12</div>
<div class="item">ITEM 13</div>
<div class="item">ITEM 14</div>
<div class="item">ITEM 15</div>
<div class="item">ITEM 16</div>
</div>
</body>
</html>
It gives me the following result:
What I want is for all the inner boxes to stay on the same line yet the container having the width 400px in case when the inner boxes don't fill it up completely, like this:
I'd really appreciate if someone hinted me on this. Thanks in advance!
You could try working with display:table(-row)(-cell) instead of floating, see my answer to this question: Force <DIV> to stay in one line with scroll bar
Important remark, however, is that this won't work in IE7...
You can do a white-space: nowrap on the elements in the container that you don't want to wrap.
Demo here http://www.w3schools.com/cssref/pr_text_white-space.asp
Related
I am building a Gantt chart using CSS. I calculate the 'offset' of a task from the first date in the header, and the width of the task based on the duration as a percentage of the total range between the dates in the header - see example. This largely works fine except for when there are too many months in the header, and so the overflow starts to scroll, because the percentage of the offset & width are applied to the container width excluding the scrollable portion. How can I fix this so the these values are applied to the actual scrollable width of the container? (Hopefully without using any JS)
In the example, the task should start at 50% (i.e. start of month 7) and run for 25% (i.e. to end of month 9). You can check this by removing the min-width:300px;
(Note that the red background will ultimately be transparent)
.container {
overflow-x: auto;
width:100%;
background-color:#eee;
}
.container .months {
display:flex;
flex-direction:row;
}
.container .months .month {
min-width:300px;
padding:5px 10px;
border:solid 1px black;
flex: 1 0 0%;
}
.container .bars .bar {
display:flex;
flex-direction:row;
}
.container .bars .bar .spacer {
background-color:red;
}
.container .bars .bar .task {
background-color:yellow;
}
<div class="container">
<div class="months">
<div class="month">Month 1</div>
<div class="month">Month 2</div>
<div class="month">Month 3</div>
<div class="month">Month 4</div>
<div class="month">Month 5</div>
<div class="month">Month 6</div>
<div class="month">Month 7</div>
<div class="month">Month 8</div>
<div class="month">Month 9</div>
<div class="month">Month 10</div>
<div class="month">Month 11</div>
<div class="month">Month 12</div>
</div>
<div class="bars">
<div class="bar">
<span class="spacer" style="width:50%"></span>
<span class="task" style="width:25%">Task 1</span>
</div>
</div>
</div>
display: grid on the container will fix the issue. The bars will be inside a track that has the same size as the months element
.container {
overflow-x: auto;
display: grid;
background-color:#eee;
}
.container .months {
display:flex;
flex-direction:row;
}
.container .months .month {
min-width:300px;
padding:5px 10px;
border:solid 1px black;
flex: 1 0 0%;
}
.container .bars .bar {
display:flex;
flex-direction:row;
}
.container .bars .bar .spacer {
background-color:red;
}
.container .bars .bar .task {
background-color:yellow;
}
<div class="container">
<div class="months">
<div class="month">Month 1</div>
<div class="month">Month 2</div>
<div class="month">Month 3</div>
<div class="month">Month 4</div>
<div class="month">Month 5</div>
<div class="month">Month 6</div>
<div class="month">Month 7</div>
<div class="month">Month 8</div>
<div class="month">Month 9</div>
<div class="month">Month 10</div>
<div class="month">Month 11</div>
<div class="month">Month 12</div>
</div>
<div class="bars">
<div class="bar">
<span class="spacer" style="width:50%"></span>
<span class="task" style="width:25%">Task 1</span>
</div>
</div>
</div>
How can I select one element after a specific element? In e.g.
<div class="general">
<div class="inner">Foo 1</div>
<div class="inner">Foo 2</div>
<div class="inner">Foo 3</div>
<div class="header">Bar</div>
<div class="inner">Foo 4</div>
<div class="inner">Foo 5</div>
<div class="inner">Foo 6</div>
<div class="inner">Foo 7</div>
<div class="inner">Foo ...</div>
<div class="inner">Foo n</div>
</div>
How can I select the 4 div.inner after .header without selecting first three div.inner?
FYI, I am unable to modify any HTML, I am able to modify only CSS.
EDIT
I have not made the correct question. I just need all the .inner elements after .header skipping the first n ('n' might change in the future) elements.
EDIT
Goal is to style "Foo 7" to "Foo n", inclusive.
use the general sibling selector ~ as it will only match if the sibling comes afterwards.
.header ~ .inner { }
Okay, now that the question has been edited once more, again making my previous answer looking wrong, I change my answer once more to make it fit the question:
You can use several + selectors to "count up" to the first sibling that should be affected and then add a ~ selector after that to select all following siblings with the same class:
.header + .inner + .inner + .inner ~.inner {
color: red;
}
<div class="general">
<div class="inner">Foo 1</div>
<div class="inner">Foo 2</div>
<div class="inner">Foo 3</div>
<div class="header">Bar</div>
<div class="inner">Foo 4</div>
<div class="inner">Foo 5</div>
<div class="inner">Foo 6</div>
<div class="inner">Foo 7</div>
<div class="inner">Foo ...</div>
<div class="inner">Foo ...</div>
<div class="inner">Foo ...</div>
<div class="inner">Foo n</div>
</div>
That's the best way to get what you're looking for
I hope I get it right
.header ~ .inner
demo Link
In this scenario is it possible to use CSS selector to only select item 4?
<div>
<div class="a">item 1</div>
<div class="a">item 2</div>
<div class="a">item 3</div>
</div>
<div class="a">item 4</div>
<div class="a">item 5</div>
In this exact example, yes - though if you get much more complex it's going to get ugly and you'll probably need some (relatively simple) JavaScript.
In this example just use the Adjacent Sibling selector in combination with the :not() pseudo-class. This will target any class="a" that immediately follows a div that's not class="a".
div:not(.a) + .a {
color: red;
}
<div>
<div class="a">item 1</div>
<div class="a">item 2</div>
<div class="a">item 3</div>
</div>
<div class="a">item 4</div>
<div class="a">item 5</div>
This question already has answers here:
How to prevent column break within an element?
(19 answers)
Closed 4 years ago.
I have the following (codepen)
.container{column-count:2; width: 50%; border: 1px solid;}
.entry{border: 1px dotted red;}
<div class="container">
<div class="entry">
<h3>header 1</h3>
<div class="item">item 1</div>
<div class="item">item 2</div>
<div class="item">item 3</div>
</div>
<div class="entry">
<h3>header 1</h3>
<div class="item">item 1</div>
<div class="item">item 2</div>
<div class="item">item 3</div>
</div>
<div class="entry">
<h3>header 1</h3>
<div class="item">item 1</div>
<div class="item">item 2</div>
<div class="item">item 3</div>
</div>
<div class="entry">
<h3>header 1</h3>
<div class="item">item 1</div>
<div class="item">item 2</div>
<div class="item">item 3</div>
</div>
<div class="entry">
<h3>header 1</h3>
<div class="item">item 1</div>
<div class="item">item 2</div>
<div class="item">item 3</div>
</div>
</div>
is there a way to keep the "red" blocks to be inseparable? I mean, pass to the second column entirely, as a whole block?
Adding display: inline-block to the entry class should work.
CSS:
.container{
column-count: 2;
width: 50%;
border: 1px solid;
}
.entry{
border: 1px dotted red;
display: inline-block;
width: 100%;
}
I'm trying to implement layout where on desktop screen size we have 2 columns, and one column on mobile/tablets
is it possible to make this code:
<div class="posts-2-col">
<div class="post">Post 1</div>
<div class="post">Post 2</div>
<div class="post">Post 3</div>
<div class="post">Post 4</div>
<div class="post">Post 5</div>
<div class="post">Post 6</div>
</div>
to render like this:
(knowing that height of each post can e different)
I just put the fixed height to image a higher post
Jsfiddle
*{
box-sizing: border-box;
}
.posts-2-col{
width: 300px;
margin: 0 -10px;
}
.posts-2-col .post{
border: 1px solid red;
width: 135px;
margin: 0 5px;
margin-bottom: 10px;
float: left;
}
<div class="posts-2-col">
<div class="post">Post 1</div>
<div class="post">Post 2</div>
<div class="post" style="height: 50px">Post 3</div>
<div class="post">Post 4</div>
<div class="post">Post 5</div>
<div class="post">Post 6</div>
<div class="post">Post 7</div>
</div>