CSS columns using inline-block divs - css

I'm trying to use inline-block divs to create a two-column feed (like google+ or pinterest), and for a number of reasons can't use CSS3 columns (partially because both columns should fill with the first elements, not just the first column). Ideally, I'd also like to avoid Javascript, but if that's impossible then whatever.
I've created this:
http://jsfiddle.net/JWjxP/1/
and am wondering why the div labeled '4' doesn't flow to fill the gap above it (like 3 does). I'd like for all the divs to begin at where the div above ends, with no space in between.
All the divs have the following rules (plus various heights):
.test1, .test2, .test3 {
background: white;
display: inline-block;
border: 1px solid black;
width: 50%;
float: left;
}
and the wrapper has the following rules:
.content {
background: #999;
height: 100%;
text-align: left;
}

You can accomplish this by breaking your test divs into two parent divs and applying inline-block display to those parents instead of the test divs themselves. This allows content to flow freely within the parent, and allows the divs to be positioned beside one another with no "gap" above.
HTML:
<div class="pure-u-3-4 content">
<div class="left">
<div class="test1">1</div>
<div class="test2">2</div>
<div class="test3">3</div>
</div>
<div class="right">
<div class="test3">4</div>
<div class="test1">5</div>
<div class="test2">6</div>
</div>
</div>
CSS:
.left, .right {
background: white;
display: inline-block;
border: 1px solid black;
width: 50%;
margin-right:-4px;
vertical-align:top;
}
.test1, .test2, .test3 {
width:100%;
}
FIDDLE: http://jsfiddle.net/JWjxP/27/

Related

Is it possible to over-ride 'overflow: hidden' parents with 'position: sticky'?

I have a two column layout where I want the right column to be position: sticky so it stays in view while scrolling the longer left column.
These are two bootstrap columns, so the first thing I had to do was remove the floats (and instead am using display: inline-block).
This works just fine on its own, or near the top of the DOM of this particular page, but in the rendered location (which, alas, is some 30 or so divs deep...don't ask...) I can't get it to work. Both columns just keep on scrolling.
I know if the parent element has an overflow property other than visible that can break position: sticky but that doesn't seem to be the issue here. Is it that if any parent element up the chain has overflow set that it can break sticky positioning?
I'm just sure what to be looking for in this situation as to determine what is breaking it in this situation. Are there other key things to look out for when it comes to sticky positioning?
EDIT: I reworded my question as it does definitely appear (after further investigation and testing) that the issue is a parent element near the top of the DOM was set to overflow-x: hidden. As this is shared code I'll have to hunt down the reason for that and why it's there.
But...in the interim, is there any known workarounds to this...where one can use an element further down the DOM tree as the containing element for the item positioned sticky?
In the example below, if you remove the overflow from .theproblem the page behaves as I want (right column 'sticks' as you scroll through the page).
.theproblem {
overflow-x: hidden;
}
.column {
display: inline-block;
width: 45%;
vertical-align: top;
}
.column1 {
border: 1px solid red;
height: 1000px;
}
.column2 {
border: 1px solid green;
position: sticky;
top: 1px;
}
<div class="theproblem">
<div class="columnwrapper">
<div class="column column1">
This is column 1 (the tall one)
</div>
<div class="column column2">
This is column 2 (the sticky one)
</div>
</div>
</div>
JSBin link
As you already noticed any overflow property between the sticky position and the scroll will break it (explained here: Why is 'position: sticky' not working with Core UI's Bootstrap CSS and here What are `scrolling boxes`?).
One workaround in your case is to move the scroll to another element and hide the default one:
.theproblem {
overflow-x: hidden;
}
/* Added this */
.columnwrapper {
height:100vh;
overflow:auto;
}
body {
overflow:hidden;
margin:0;
}
/**/
.column {
display: inline-block;
width: 45%;
vertical-align: top;
}
.column1 {
border: 1px solid red;
height: 1000px;
}
.column2 {
border: 1px solid green;
position: sticky;
top: 1px;
}
<div class="theproblem">
<div class="columnwrapper">
<div class="column column1">
This is column 1 (the tall one)
</div>
<div class="column column2">
This is column 2 (the sticky one)
</div>
</div>
</div>

Center a div, expand sibling divs to remaining space

I'm attempting to center a div and fill in to the left and right with divs.
The center div will be text of variable length, and the sibling divs will be lines filling in the available space.
Here's what I envision it looking like:
Here's the markup:
<div class='heading'>
<div class='lines'></div>
<div class='heading-link'>
<a>Link Text</a>
</div>
<div class='lines'></div>
</div>
<div class='heading'>
<div class='lines'></div>
<div class='heading-link'>
<a>Really Long Link Text that is still centered</a>
</div>
<div class='lines'></div>
</div>
Here's the barebones css:
.lines {
display: inline-block;
border-top: 1px solid #2c2c2c;
border-bottom: 1px solid #2c2c2c;
}
.heading {
text-align: center;
display: inline-block;
}
.heading-link {
display: inline-block;
}
The key point is that the text in .heading-link is variable in length, and I would like the .lines divs to fill the remaining space to the left and right of .heading-link
I don't want to set a percentage width on .heading-link because I don't know how wide the text will be. Should I be using a table based layout? Or just inlined divs?
Solution Using CSS Tables
The following might be close to what you need.
Your HTML is good as is:
<div class='heading'>
<div class='lines'></div>
<div class='heading-link'><a>Link Text</a></div>
<div class='lines'></div>
</div>
<div class='heading'>
<div class='lines'></div>
<div class='heading-link'> <a>Really Long Link Text that
is still centered</a></div>
<div class='lines'></div>
</div>
Try the following CSS:
.heading {
text-align: center;
display: table;
margin: 30px 0; /* for demo only */
}
.lines {
display: table-cell;
width: 48%; /* the exact value is not that critical... */
border-top: 1px solid #2c2c2c;
border-bottom: 1px solid #2c2c2c;
}
.heading-link {
display: table-cell;
white-space: nowrap; /* keeps the text from wrapping... */
padding: 10px 20px; /* for demo only, as needed... */
}
How This Works
Apply display: table to the parent container .heading, and then display: table-cell to the child elements .lines and .heading-link.
I am using the table display type to take advantage of the auto-sizing features of table cells.
I am assuming that your .heading-link text will fit on one line, so I force the text to stay on a single line by using white-space: nowrap. This will force the .heading-link element to expand to contain the text. You can use padding to control the white space as needed.
For the left and right .lines elements, set the with to be something like 48%. This will keep force the left and right .lines elements to compute to the same width, half of whatever space remains after the space used up by .heading-link.
You can also specify an overall width to .heading if needed.
Demo Fiddle: http://jsfiddle.net/audetwebdesign/eyGdG/

balanced alternating column layout in CSS3

I'm trying create a balanced (2-) column-layout.
The content is not text but blocks and varies in height.
The content should be placed alternatingly left and right, as long as "left" and "right" have (roughly) the same height..
I.e. in this image:
The space between 1 and 3's shouldn't be there.
Or in this image:
the 2's should stand alone on the right side and the 1, 3's and 4 should stand on the left side (without space between them).
I tried using "floating <li>'s" like this:
HTML:
<ol class="context">
<li class="gruppe">1</li>
<li class="gruppe">2.0<br />2.1</li>
<li class="gruppe">3.0<br />3.1</li>
<li class="gruppe">4</li>
</ol>
CSS:
ol.context
{
border: 1px solid #048;
list-style: none;
margin: 0;
padding: 0 0 8px 0;
overflow: auto;
}
li.gruppe
{
background: #048;
color: white;
float: left;
font: bold 32px Arial, sans-serif;
margin: 1px;
text-align: center;
width: calc(50% - 2px);
}
(See attempt 1 and attempt 2)
I have also tried to use column's (column-count: 2; column-fill: auto;) but this does not fill the columns left-to-right first. (It fills top-to-bottom first.)
Is this even possible without JavaScript?
I would say this is not possible without JS. Here is a fiddle I made based on an article from Ben Holland. At least to me looks like what you are after.
http://jsfiddle.net/QWsBJ/2/
HTML:
<body onload="setupBlocks();">
<div class="block">
<p>***Content***</p>
</div>
<div class="block">
<p>***Content***</p>
</div>
<div class="block">
<p>***Content***</p>
</div>
<div class="block">
<p>***Content***</p>
</div>
<div class="block">
<p>***Content***</p>
</div>
</body>
CSS:
.block {
position: absolute;
background: #eee;
padding: 20px;
width: 300px;
border: 1px solid #ddd;
}
JS:
var colCount = 0;
var colWidth = 0;
var margin = 20;
var blocks = [];
$(function(){
$(window).resize(setupBlocks);
});
function setupBlocks() {
colWidth = $('.block').outerWidth();
colCount = 2
for(var i=0;i<colCount;i++){
blocks.push(margin);
}
positionBlocks();
}
function positionBlocks() {
$('.block').each(function(){
var min = Array.min(blocks);
var index = $.inArray(min, blocks);
var leftPos = margin+(index*(colWidth+margin));
$(this).css({
'left':leftPos+'px',
'top':min+'px'
});
blocks[index] = min+$(this).outerHeight()+margin;
});
}
Array.min = function(array) {
return Math.min.apply(Math, array);
};
Updated: I believe this is almost impossible to achieve with CSS only. There are many different solutions, but they all require some compromises unless you are willing to use JavaScript or some server-side code.
Using CSS columns
Here's an alternate fiddle using reordered blocks. Here's a fiddle demo using CSS columns without reordering.
You can use CSS colunms to change your block flow to vertical unless you alter the order of their output. If you can output odd numbers first, then even numbers, you win.
<div class="wrapper">
<div class="block1">1</div>
<div class="block3">3</div>
<div class="block2">2</div>
<div class="block6">4</div>
</div>
.wrapper {
column-count: 2;
column-width: 100px;
-moz-column-width: 100px;
-webkit-column-width: 100px;
width: 260px;
}
div {
border: 1px solid #999;
display: inline-block;
margin: 10px;
width: 100px;
}
.block1 { height: 100px; }
.block2 { height: 130px; }
.block3 { height: 150px; }
.block4 { height: 100px; }
This solution is not compatible with IE9 and below.
Block Height Known
If you do know your block heights you can solve this problem by using absolute positioning.
block1 {
height: 100px;
position: absolute;
left: 0;
top: 0;
}
block2 {
height: 110px;
position: absolute;
left: 0;
top: 100px; /* The height of the div above it */
}
A big drawback is dynamic content; we seldom know block height. So this solution is very limited in its application unless you are willing to calculate the height block height.
If you are willing to use JS
Use a plugin like Masonry. Both in vanilla js or jQuery flavour.
Other Options
This leaves you with the following options that require some compromises.
Group your blocks into columns. See this Fiddle for a demo. This will alter the flow of your blocks to vertical, then horizontal.
Use display: inline-block; vertical-align: top; on your blocks. This will leave some white space below your blocks.
Force the height of your blocks, rendering this a non-issue. For blocks with additional content use the overflow property to allow in-block scrolling.
As others have commented, you could attempt to calculate the height of the blocks on the server.
You could try a mix of flex and float (only tested in Firefox/IE10 and safari 5.1.7 , cause to my own opinion, CSS is not your solution)
http://codepen.io/gcyrillus/pen/zgAiw
But, in any CSS case you choose, the best is to relay on the mansonry script.
CSS is not really adapted to this kind of layout. At this time you have many CSS method for layout and basicly: display and float.
You can easily use this together within your html tree structure but this methods are not meant to be mixed. A boxe will be floatting, an inline-level-box or block-level-box and each are suppose to interact in the flow.
Float, breaks a line before itself after a non floatting element or slides down untill it has enough room, that you dispatch right/left via CSS r not.
inline-block moves away from floatting elements and breaks a line if not enough room left, floatting elements among inline-blocks will keep breaking a line before floating.
Column CSS will fill columns with content one by one. see : http://codepen.io/gcyrillus/pen/AtazJ
Inline-flex elements seems to work with floatting elements ... but is it suppose to untill it's a validated rule ?
What seems to be wised to me , is to used a javascript for the layout expected and relay on float or display:inline-block + width as a fall back.
Last solution is to think this ahead on your server side and dispatch your items in 2 containers with another appropriate markup if that is possible ( no idea of your real life content dispatched in your ol li ).
The CSS for the FLEX test :
li.gruppe
{
background: #048;
color: white;
font: bold 32px Arial, sans-serif;
text-align: center;
box-sizing:border-box;
border-bottom:1px solid white;
border-bottom:1px solid white;
display: -webkit-inline-flex;
display: -moz-inline-flex;
display: -ms-inline-flex;
display: inline-flex;
width:50%;
}
li:nth-child(even){
float:right;
clear:right;
border-left:1px solid white;
margin-top:0;
}
EDIT: This is an interesting solution, but unfortunately it does not solve the problem that was asked for.
The solution I propose here puts subsequent elements into alternating columns, so: 1 -> left, 2 -> right, 3 -> left, 4 -> right, etc.
This is a interesting problem by itself, but not what was asked for.
Thanks to #Nils in the comments for pointing this out.
Original answer
Here is my attempt with flex!
https://jsfiddle.net/vqLr8t3e/
I am not sure if it works in IE11.
Code
.the-beginning {
background: green;
color: white;
font-weight: bold;
text-align: center;
cursor: pointer;
}
.the-end {
background: red;
color: white;
font-weight: bold;
text-align: center;
cursor: pointer;
}
.container-outer {
overflow: hidden;
}
.container {
display: flex;
flex-wrap: wrap;
flex-direction: column;
max-height: 19999px;
margin-top: -10000px;
}
.container > div {
width: 50%;
box-sizing: border-box;
border: 5px solid grey;
padding: 5px;
background: white;
order: 1;
}
.container > div:nth-child(odd) {
order: -1;
}
.container > div:nth-child(1),
.container > div:nth-child(2) {
margin-top: 10000px;
}
<div class="the-beginning">THE BEGINNING</div>
<div class="container-outer">
<div class="container">
<div>LEFT 0</div>
<div>RIGHT 0<br>RIGHT 0</div>
<div>LEFT 1<br>LEFT 1<br>LEFT 1</div>
<div>RIGHT 1</div>
<div>LEFT 2</div>
<div>RIGHT 2<br>RIGHT 2<br>RIGHT 2</div>
</div>
</div>
<div class="the-end">THE END</div>
Idea
Use flex-direction: column; and flex-wrap: wrap; on the container, and width: 50%; on the items, as a first step towards showing the items in columns.
Use order: -1; and order: 1 to sort odd and even elements into different columns.
Use a gratuitous margin-top: 10000px; on the first element of each column, and a max-height: 19999px; on the container, so that no two such items fit into one column. This will make sure each of these items starts in a new column. Compensate with a negative margin-top on the container. Cut it off with an outer container with overflow: hidden;.
I'm not sure if I got this right . .
"the 2's should stand alone on the right side and the 1, 3's and 4
should stand on the left side (without space between them)."
html:
<div id="box">
<div class="data">1</div>
<div class="data" style="float:right">2<br/>2<br/>2<br/>2</div>
<div class="data">3<br/>3</div>
<div class="data">4</div>
</div>
css:
#box {
width:100%;
height:auto;
float:left;
}
.data {
height:auto;
width:50%;
float:left;
background-color:#ccc;
border-bottom:solid 1px #000;
}
Fid:
http://jsfiddle.net/YdEW9/26/
This is pure css. Everything is floated left then gave inline-css to float:right on the div with (4) 2's
I kinda don't know how to set the inline-css without javascript. Server side maybe? but I doubt you can get the height of the elements.
Well anyway hope this helps.
PURE CSS SOLUTION:
Add the following to your css file:
ol.context li:nth-child(even) {
float: right;
}
DO NOT change your html or anything else.
Result in FF:
--
How it Works
Instead of floating all your elements "left" and creating gaps, we float each container according to the side/column the element they reside in.

Display 2 divs next to each other and together bigger then the screen

I've been searching for hours but I can't find a way to place 2 div's next to each other.
The below example works fine when the div's are smaller then the screen but when they are bigger then the screen they are below each other.
Also I would like the same classes for 2 pages:
1 page they both fit on the screen and I'd like to display them next to each other (not one on the left and one on the right)
the other page together they are bigger then the screen. (Sideways scrolling is no problem)
Take this example:
<style>
.wrapper
{
border:1px solid Red;
display: inline-block;
}
.left
{
float:left;
color: Green;
border:1px solid Green;
}
.right
{
float:right;
color: Blue;
border:1px solid Blue;
}
</style>
<div class="wrapper">
<div class="left">
ASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDF
</div>
<div class="right">
ASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDF
</div>
<div class="clear" />
</div>
In the actual design ASDF is replaced by a big <table>.
As I said above I've been searching for hours but can find a solution so I'm sorry if this has been asked before.
The wrapper div isn't necessary for the two to be lined up, but if you have it for other reasons (like a border, background, etc.), then it does not need to be set to inline-block.
Nothing technically needs to float. inline-block has the same effect and is more appropriate. Having said that, one float is needed to make things as fluid as possible and will be mentioned in a second.
Something that makes this and other css magic involving inline-block tricky and error-prone is that the element is treated in some ways like an inline element and in other ways like a block. This is not cross-browser consistent. Generally, this means that it can have block-level styling (like border, and width), and inline-level styling. Generally people just think of it as blocks that fall horizontally, "in a line". But inline element properties from a wrapper div such as font-size and white-space come in to effect as well (which is just annoying).
Having said all of that, here is the bare-bones recipe for side-by-side block elements that exceed the browser window and are inside of a block-level wrapper:
The inner blocks need to be set to inline-block.
The outer wrapper needs to have white-space set to nowrap, just as if you wanted a long line of text to expand horizontally beyond the browser window.
The outer wrapper needs to be set to float: left; clear: both;, because otherwise the wrapper's width will not go past the window width. The alternative is to set the width of the wrapper, but if you don't know how far it will expand, the float will force the wrapper to automatically shrink or grow to the width of it's contents. The clear:both prevents the floating from affecting any surrounding elements.
So for the following HTML:
<div class="wrapper">
<div class="left">ASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDF</div>
<div class="right">ASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDF</div>
</div>​
You would need the following CSS as a bare minimum:
.wrapper {
white-space: nowrap;
float:left;
clear: both;
}
.left, .right{
display: inline-block;
}
And then, for your example, you would add:
.wrapper {
border: 1px solid red;
}
.left
{
color: Green;
border:1px solid Green;
}
.right
{
color: Blue;
border:1px solid Blue;
}​
Demo: http://jsfiddle.net/crazytonyi/jTknm/
This is one approach that could be used, coupling white-space: nowrap in the parent .wrapper element with display: inline-block in the child .left and .right elements:
.wrapper
{
/* other stuff */
white-space: nowrap;
}
.left
{
display: inline-block;
/* other stuff */
}
.right
{
display: inline-block;
/* other stuff */
}​
JS Fiddle demo.
You can do this without floating by setting the inner divs to display: inline-block and letting the outer div have white-space: nowrap:
<div class="wrapper">
<div class="left">left</div><div class="right">right</div>
</div>
.wrapper { border: 1px red solid; white-space: nowrap }
.wrapper div { display: inline-block; width: 70% } /* 2*70% = 140% of .wrapper */
See it in action.
Be careful to not leave any whitespace between closing the first and opening the second div, because that will manifest as visible space in the render.
Erm, you need to use float:left for both them to begin with. Then force overflow:show for the wrapper or perhaps use the newer CSS 3 property overflow-x:scroll. Let me know if it still doesn't work.
Okay I have tested for you. The reason why this is not working is because you haven't specified fixed widths and some other stuff. Here is the working code:
<style>
.wrapper
{
border:1px solid Red;
width:100%;
overflow-x:scroll;
}
.left
{
float:left;
width:500px;
color: Green;
border:1px solid Green;
}
.right
{
float:left;
width:500px;
color: Blue;
border:1px solid Blue;
}
</style>
<body>
<div class="wrapper">
<div class="left">
ASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDF
</div>
<div class="right">
ASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDF
</div>
<div class="clear" />
</div>
Then if you want to specify widths, either use Javascript to determine them on page load or use CSS.
Your divs need widths, try:
<div id="left"><p>Some content here...</p></div>
<div id="right"><p>Some content here...</p></div>
<style>
#left, #right { float:left; color: Green; border:1px solid Green; width:49%; }
#left { margin-right:1%; }
</style>

Split Div Into 2 Columns Using CSS

I have been attempting to split a div into two columns using CSS, but I have not managed to get it working yet. My basic structure is as follows:
<div id="content">
<div id="left">
<div id="object1"></div>
<div id="object2"></div>
</div>
<div id="right">
<div id="object3"></div>
<div id="object4"></div>
</div>
</div>
If I attempt to float the right and left divs to their respective positions (right and left), it seems to ignore the content div's background-color. And other code that I have tried from various websites doesn't seem to be able to translate to my structure.
Thanks for any help!
This works good for me. I have divided the screen into two halfs: 20% and 80%:
<div style="width: 20%; float:left">
#left content in here
</div>
<div style="width: 80%; float:right">
#right content in there
</div>
When you float those two divs, the content div collapses to zero height. Just add
<br style="clear:both;"/>
after the #right div but inside the content div. That will force the content div to surround the two internal, floating divs.
Another way to do this is to add overflow:hidden; to the parent element of the floated elements.
overflow:hidden will make the element grow to fit in floated elements.
This way, it can all be done in css rather than adding another html element.
None of the answers given answer the original question.
The question is how to separate a div into 2 columns using css.
All of the above answers actually embed 2 divs into a single div in order to simulate 2 columns. This is a bad idea because you won't be able to flow content into the 2 columns in any dynamic fashion.
So, instead of the above, use a single div that is defined to contain 2 columns using CSS as follows...
.two-column-div {
column-count: 2;
}
assign the above as a class to a div, and it will actually flow its contents into the 2 columns. You can go further and define gaps between margins as well. Depending on the content of the div, you may need to mess with the word break values so your content doesn't get cut up between the columns.
The most flexible way to do this:
#content::after {
display:block;
content:"";
clear:both;
}
This acts exactly the same as appending the element to #content:
<br style="clear:both;"/>
but without actually adding an element. ::after is called a pseudo element. The only reason this is better than adding overflow:hidden; to #content is that you can have absolute positioned child elements overflow and still be visible. Also it will allow box-shadow's to still be visible.
For whatever reason I've never liked the clearing approaches, I rely on floats and percentage widths for things like this.
Here's something that works in simple cases:
#content {
overflow:auto;
width: 600px;
background: gray;
}
#left, #right {
width: 40%;
margin:5px;
padding: 1em;
background: white;
}
#left { float:left; }
#right { float:right; }
If you put some content in you'll see that it works:
<div id="content">
<div id="left">
<div id="object1">some stuff</div>
<div id="object2">some more stuff</div>
</div>
<div id="right">
<div id="object3">unas cosas</div>
<div id="object4">mas cosas para ti</div>
</div>
</div>
You can see it here: http://cssdesk.com/d64uy
Make children divs inline-block and they will position side by side:
#content {
width: 500px;
height: 500px;
}
#left, #right {
display: inline-block;
width: 45%;
height: 100%;
}
See Demo
You can use flexbox to control the layout of your div element:
* { box-sizing: border-box; }
#content {
background-color: rgba(210, 210, 210, 0.5);
border: 1px solid #000;
padding: 0.5rem;
display: flex;
}
#left,
#right {
background-color: rgba(10, 10, 10, 0.5);
border: 1px solid #fff;
padding: 0.5rem;
flex-grow: 1;
color: #fff;
}
<div id="content">
<div id="left">
<div id="object1">lorem ipsum</div>
<div id="object2">dolor site amet</div>
</div>
<div id="right">
<div id="object3">lorem ipsum</div>
<div id="object4">dolor site amet</div>
</div>
</div>
Best way to divide a div vertically --
#parent {
margin: 0;
width: 100%;
}
.left {
float: left;
width: 60%;
}
.right {
overflow: hidden;
width: 40%;
}
Pure old school CSS
I know this post is old, but if any of you still looking for a simpler solution.
#container .left,
#container .right {
display: inline-block;
}
#container .left {
width: 20%;
float: left;
}
#container .right {
width: 80%;
float: right;
}
If you don't care old browser and need a simple way.
#content {
display: flex;
}
#left,
#right {
flex: 50%;
}
Floats don't affect the flow. What I tend to do is add a
<p class="extro" style="clear: both">possibly some content</p>
at the end of the 'wrapping div' (in this case content). I can justify this on a semantic basis by saying that such a paragraph might be needed. Another approach is to use a clearfix CSS:
#content:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#content {
display: inline-block;
}
/* \*/
* html #content {
height: 1%;
}
#content {
display: block;
}
/* */
The trickery with the comments is for cross-browser compatibility.
This is best answered here Question 211383
These days, any self-respecting person should be using the stated "micro-clearfix" approach of clearing floats.
Make font size equal to zero in parent DIV.
Set width % for each of child DIVs.
#content {
font-size: 0;
}
#content > div {
font-size: 16px;
width: 50%;
}
*In Safari you may need to set 49% to make it works.
Divide a division in two columns is very easy, just specify the width of your column better if you put this (like width:50%) and set the float:left for left column and float:right for right column.

Resources