I'm working for a client that had the super good idea to integrate a horizontal scroll effect into his one pager flow layout. That means that the user keeps scrolling down, but at some point the page starts moving from right to left instead of bottom to top. I implemented that via ScrollMagic.
So the problem starts when it gets responsive. When I start scrolling horizontally, the screen is now fixed to the device height and I need to extend my page content to the right when it flows out, instead of the normal "my content just flows out of the bottom, which I can follow by vertically scrolling".
My first idea was to kind of manually solve the problem when managing the content. I.E. giving different versions of content for mobile and desktop content. But it seems devices are just too different and I need a CSS solution.
My Question is: Do you have any idea of how to make content grow horizontally? Like height auto, but width "auto" (which doesn't work bc it's not the same)? Or like display: inline-block in the following example, but the outer wrapper (yellow border) wrapping all sub-boxes, not just the first column.
#wrapper {
display: inline-block;
border: 2px solid #ffff00;
}
#main {
width: 100%;
height: 200px;
border: 1px solid #0000ff;
display: flex;
flex-flow: column wrap;
}
#main div {
width: 100%;
height: 50px;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="wrapper">
<div id="main">
<div style="background-color:coral;">A</div>
<div style="background-color:lightblue;">B</div>
<div style="background-color:khaki;">C</div>
<div style="background-color:pink;">D</div>
<div style="background-color:lightgrey;">E</div>
<div style="background-color:lightgreen;">F</div>
</div>
</div>
</body>
</html>
EDIT:
After reading Temani Afifs Answer I found an additional specification of my problem: I need it to work with "column-width", so that I am able to write text which automatically expands to a second column when using up all vertical space. Pretty much just like here. The only reason the linked example is not perfect for me is that the wrapping container div does not expand and a scrollbar appears. I want to be able to add another .container-div to the right.
Maybe using CSS grid:
#wrapper {
display: inline-block;
background:yellow;
}
#main {
max-height: 100vh; /* don't take more than the screen height */
border: 1px solid #0000ff;
box-sizing:border-box;
display: grid;
grid-auto-flow: column; /* column flow */
/* fill all the column and wrap to the next one if no more space */
grid-template-rows: repeat(auto-fill, minmax(50px, 1fr));
}
#main div {
padding:20px;
}
body {
margin: 0;
}
<div id="wrapper">
<div id="main">
<div style="background-color:coral;">A</div>
<div style="background-color:lightblue;">B</div>
<div style="background-color:khaki;">C</div>
<div style="background-color:pink;">D</div>
<div style="background-color:lightgrey;">E</div>
<div style="background-color:lightgreen;">F</div>
</div>
</div>
This question already has answers here:
Make a div fill the height of the remaining screen space
(41 answers)
Closed 2 years ago.
I have a flex container with flex children inside of it. In every flex-child there are 2 divs on top of each other, first one is with unknown height. I want to make the second div's height to fill the whole remaining height. Everywhere I look I see flex solution, but I don't know how to implement it since parent of the 2 divs is flex-child itself.
The whole case is more complex, but I'll try to simplify code here:
<div class="flex-parent-row">
<div class="flex-child">
<div class="auto-height"></div>
<div class="i-want-this-one-to-fill-remaining-height"></div>
</div>
...more flex children...
</div>
And putting ".auto-height" div inside ".i-want-this-one-to-fill-remaining-height" is not an option at this moment.
Please help :) Thank you!
EDIT: I've made a full Fiddle: https://jsfiddle.net/vanden1976/dLg20x4s/26
EDIT-2: Solved! Thank you for your suggestions! Here's the fiddle with the solution: https://jsfiddle.net/vanden1976/dLg20x4s/29
It would be more helpful when you would of provided your existing CSS to better understand what you are trying to do. However I hope the example below will help you figure out how to solve what you are trying to accomplish.
Html:
<div class="flex-parent-row">
<div class="flex-child">
<div class="auto-height"> auto div</div>
<div class="i-want-this-one-to-fill-remaining-height"> fill remaining div</div>
</div>
</div>
CSS:
.flex-parent-row {
display: flex;
flex-direction: column;
height: 200px;
width: 500px;
border: 1px solid #000;
}
.flex-child {
border: 1px solid #000;
background-color: red;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.auto-height {
background: orange;
}
.i-want-this-one-to-fill-remaining-height {
flex-grow: 1;
background-color: lightblue;
}
If you need additional help please provide more code.
I am trying to get three flex box divs placed next to each other in a row.
<div style="display: flex; flex-direction: row">
<div style="flex:1; border: 1px solid #ccc;">1<br />A<br />B<br />C<br />D<br />E</div>
<div style="flex:1; border: 1px solid #ccc;">2</div>
<div style="flex:1; border: 1px solid #ccc;">3</div>
</div>
Here, I have not applied any height style to the child divs but they show up like
Notice that the div with content 2 and 3 have assumed the height of 1st division with content, 1ABCDE
Fiddle of the above code
https://jsfiddle.net/4oddowjw/4/
I want it to look like this but I do not have the luxury to use height on these divs
I cannot specify the height. As in my application, height is dynamic and applied to children of these flex boxes.
Is there a way to make these divs wrap their content vertically ?
I tried adding 'height: auto' to the divs but it did not work out
Example with 'height: auto' applied https://jsfiddle.net/4oddowjw/5/
You have to add align-items:flex-start; to the container:
.container {
align-items:flex-start;
display: flex;
flex-direction: row;
}
.item {
flex:1;
border: 1px solid #ccc;
}
<div class="container">
<div class="item">1<br />A<br />B<br />C<br />D<br />E</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
Your updated fiddle: https://jsfiddle.net/4oddowjw/7/
Explanation:
The default alignment of the container items is stretch. All the items has the equals height. If you want to wrap the items by content you have to overwrite this default value on the container with align-items:flex-start;.
More information about flexbox you can find here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
The official W3C specification: https://drafts.csswg.org/css-flexbox-1/#align-items-property
I'm trying to center a div vertically in a parent div, where text is present. Here's what I've got:
It looks a little funny because the text seems to be centered properly, but the yellow boxes aren't. This is how I'm doing it:
.btn {
background-color: #ccc;
color: #000;
width: 200px;
border: solid 1px black;
text-align: center;
vertical-align: middle;
display: table-cell;
}
.square {
background-color: #ff0;
width: 20px;
height: 20px;
display: inline-block;
}
.inner {
display: inline-block;
}
<div class="btn">
<div class="square"></div>
<div class="inner">Hello</div>
<div class="square"></div>
</div>
Should my usage of "table-cell" + vertical-align be working? I only care about html5, I'm really just targeting the latest versions of mobile safari, so don't have to worry about older browsers etc.
Here's a js fiddle of this:
http://jsfiddle.net/TrJqF/
Thanks
Set vertical-align:top on the square class. The extra space comes from space reserved for descendant text elements like j, g, y etc. that drop below the line.
jsFiddle example
Actually there is no difference between both the height. Apply yellow background color to inner class and see the difference in explicit and no height.
both square div doesn't have content and inner div have content. The css box aligning by itself based on its content. Add empty space to the square div as follows:
<div class="btn">
<div class="square"> </div>
<div class="inner">Hello</div>
<div class="square"> </div>
</div>
If you want you can add top and bottom margin 1 or 2 pixel which will show your expectation.
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 1 year ago.
I want to build a fluid layout using percentages for widths. Here is my HTML:
<div style="width:50%; display:inline-table;">A</div>
<div style="width:50%; display:inline-table;">B</div>
The problem is that the elements won't display together on one line. However, the layout works fine if I remove the line break between the them in the HTML:
<div style="width:50%; display:inline-table;">A</div><div style="width:50%; display:inline-table;">B</div>
What is the problem with the first HTML, above? How can I do something like that, but without using absolute position and float?
The problem is that when something is inline, every whitespace is treated as an actual space. So it will influence the width of the elements. I recommend using float or display: inline-block. (Just don't leave any whitespace between the divs).
Here is a demo:
div {
background: red;
}
div + div {
background: green;
}
<div style="width:50%; display:inline-block;">A</div><div style="width:50%; display:inline-block;">B</div>
The problem is that if you have a new line between them in the HTML, then you get a space between them when you use inline-table or inline-block
50% + 50% + that space > 100% and that's why the second one ends up below the first one
Solutions:
<div></div><div></div>
or
<div>
</div><div>
</div>
or
<div></div><!--
--><div></div>
The idea is not to have any kind of space between the first closing div tag and the second opening div tag in your HTML.
PS - I would also use inline-block instead of inline-table for this
Wrap them around a div with the following CSS
.div_wrapper{
white-space: nowrap;
}
Give this parent DIV font-size:0. Write like this:
<div style="font-size:0">
<div style="width:50%; display:inline-table;font-size:15px">A</div>
<div style="width:50%; display:inline-table;font-size:15px">B</div>
</div>
How can i do something like that but without using absolute position
and float?
Apart from using the inline-block approach (as mentioned in other answers) here are some other approaches:
1) CSS tables (FIDDLE)
.container {
display: table;
width: 100%;
}
.container div {
display: table-cell;
}
<div class="container">
<div>A</div>
<div>B</div>
</div>
2) Flexbox (FIDDLE)
.container {
display: flex;
}
.container div {
flex: 1;
}
<div class="container">
<div>A</div>
<div>B</div>
</div>
For a reference, this CSS-tricks post seems to sum up the various approaches to acheive this.
CSS Flexboxes
Simple modern solution. Better than HTML tables!
.container {
display: flex;
}
.container div {
flex: auto; /* also 1 or 50% */
}
<div class="container">
<div>A</div>
<div>B</div>
</div>
Alternative: CSS Grids
.container {
display: grid;
grid-template-columns: 1fr 1fr; /* also 50% */
}
<div class="container">
<div>A</div>
<div>B</div>
</div>
<div id="wrapper" style="width: 400px">
<div id="left" style="float: left; width: 200px;">Left</div>
<div id="right" style="float: right; width: 200px;">Left</div>
<div style="clear: both;"></div>
</div>
I know this question wanted inline block, but try to view http://jsfiddle.net/N9mzE/1/ in IE 7 (the oldest browser supported where I work). The divs are not side by side.
OP said he did not want to use floats because he did not like them. Well...in my opinion, making good webpages that does not look weird in any browsers should be the maingoal, and you do this by using floats.
Honestly, I can see the problem. Floats are fantastic.
basically inline-table is for element table, I guess what you really need here is inline-block, if you have to use inline-table anyway, try it this way:
<div style="width:50%; display:inline-table;">A</div><!--
--><div style="width:50%; display:inline-table;">B</div>
Sorry but all the answers I see here are either hacky or fail if you sneeze a little harder.
If you use a table you can (if you wish) add a space between the divs, set borders, padding...
<table width="100%" cellspacing="0">
<tr>
<td style="width:50%;">A</td>
<td style="width:50%;">B</td>
</tr>
</table>
Check a more complete example here: http://jsfiddle.net/qPduw/5/
The problem you run into when setting width to 50% is the rounding of subpixels. If the width of your container is i.e. 99 pixels, a width of 50% can result in 2 containers of 50 pixels each.
Using float is probably easiest, and not such a bad idea. See this question for more details on how to fix the problem then.
If you don't want to use float, try using a width of 49%. This will work cross-browser as far as I know, but is not pixel-perfect..
html:
<div id="a">A</div>
<div id="b">B</div>
css:
#a, #b {
width: 49%;
display: inline-block;
}
#a {background-color: red;}
#b {background-color: blue;}