So on my page, I have a two column layout - 75% (left - blue) and 25% (right - red). I can't get the red column to fill. In Chrome's inspector I see that the container classed <div> has expanded vertically to the size of #left, but I just cannot coax #right to expand appropriately. Here's the jfiddle link for my css and html (followed by the code itself in case you don't want to click to tinker):
Just one quick note: In my actual development code I don't use blue and red (left and right div background colours) - I use white and navy, respectively.
http://jsfiddle.net/EG3zb/
<div class="container">
<div id="left">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam id nunc bibendum ligula tempus interdum a ac urna. Fusce sed nunc molestie, consequat orci eu, vehicula orci. Suspendisse nec leo sit amet tellus varius feugiat. Maecenas lacinia neque euismod, tincidunt nisi et, fermentum ipsum. Vivamus ut gravida velit, vitae ultrices ante. Nullam varius mattis tellus, vitae consectetur tortor porttitor eu. Donec congue eros mauris. Ut consequat aliquam mattis. Aliquam non neque eros.</p>
</div>
<div id="right">
Blah.
</div>
</div>
And the accompanying CSS:
.container {
width: 100%;
min-height: 100%;
overflow: auto;
}
#left, #right {
padding-top: 2%;
}
#left {
float: left;
width: 75%;
color: #fff;
background-color: blue;;
}
#right {
float: right;
width: 25%;
background-color: red;
color: #fff;
}
this is working
.container {
width: 100%;
min-height: 100%;
overflow: auto;
display:flex;
}
.container #left,.container #right{
-webkit-flex: auto;
-ms-flex:auto;
flex:auto;
}
here is working demo
http://jsfiddle.net/mauryaashish945/EG3zb/5/
Instead of default display:block you can use display:table-cell so there is no need for float:left\right :
#left, #right {
display:table-cell;
}
Example
Related
I have two divs with two main properties display block and width
#block1 {
display:block;
width:20%;
background-color:red;
height:100px;
}
#block2 {
display:block;
width:70%;
background-color:yellow;
height:100px;
}
<div id="block1">
</div>
<div id="block2">
</div>
when I add float propery it makes the two divs behave like an inline-block :
#block1 {
display:block;
width:20%;
float:left;
background-color:red;
height:100px;
}
#block2 {
display:block;
width:70%;
float:left;
background-color:yellow;
height:100px;
}
<div id="block1">
</div>
<div id="block2">
</div>
Why adding the property float:left makes the div behave like an inline-block
Using float takes the elements out of the normal document flow in a way that other inline elements can wrap around them; it does not make them behave like inline-block elements.
If you would like alternative ways to achieve the same effect, give a look at the following examples.
Example 1:
Here's an example using display: flex on the parent element to make the children stay on the same line.
body {
display: flex;
}
#block1 {
width: 20%;
background-color: red;
height: 100px;
}
#block2 {
width: 70%;
background-color: yellow;
height: 100px;
}
<div id="block1"></div>
<div id="block2"></div>
Example 2:
Here is an example using display: inline-block on both elements to make them stay on the same line. Also, font-size: 0 is used on the parent to ensure that the gap in-between vanishes.
body {
font-size: 0;
}
#block1 {
width: 20%;
display: inline-block;
background-color: red;
height: 100px;
}
#block2 {
width: 70%;
display: inline-block;
background-color: yellow;
height: 100px;
}
<div id="block1"></div>
<div id="block2"></div>
Example 3:
Here is an example using display: table-cell on both elements to make them stay on the same line, while display: table is used on the parent.
body {
width: 90%;
display: table;
}
#block1 {
width: 22.2222222%; /* 20% of 90% */
display: table-cell;
background-color: red;
height: 100px;
}
#block2 {
width: 77.7777778%; /* 70% of 90% */
display: table-cell;
background-color: yellow;
height: 100px;
}
<div id="block1"></div>
<div id="block2"></div>
You are correct in saying that this particular situation float behaves like inline-block. But in reality it just looks like it's behaving the same way. To show the difference... let's say you were to float:left with some text below it: then your div would appear to the left and the remaining available horizontal room would be filled with the text.
With float:
.floatie {
float:left;
width:170px;
height:170px;
background:blue;
}
<p>
Lorem ipsum dolor sit amet, <div class="floatie"></div>consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.</p>
But then if you display:inline-block you get a different result:
.floatie {
display:inline-block;
width:170px;
height:170px;
background:blue;
}
<p>
Lorem ipsum dolor sit amet, <div class="floatie"></div>consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.</p>
Adding the property left to your div's css haven't made them as inline-block. It has made them floated in the DOM.
A floated element is removed from the normal flow of the document (but not exactly like an absolutely-positioned element).
That's why the next element moves to the top row and sits next to the floated element.
If you want the next element to stay at the bottom row, you need to use the clear property.
#block1 {
display: block;
width: 20%;
float: left;
background-color: red;
height: 100px;
}
#block2 {
clear: both; /* NEW */
display: block;
width: 70%;
float: left;
background-color: yellow;
height: 100px;
}
<div id="block1"></div>
<div id="block2"></div>
So basically I am trying to make a page with 2 responsive columns, the same size side by side and instead of using px for measurement I'm sizing them using percentage. No matter what I do, setting both divs to have a margin of 5% and width of 40% they should sit side by side in a container with 'display: inline-block'. But for some reason it's not.
Here's the J-Fiddle demonstrating my issue. I have content above and below these divs on the page I'm working on... so they can't interfere with that, using, declaring float positions just seems to complicate things further.
http://jsfiddle.net/avh9s6pa/
If you guys could help I'd really appreciate it. It'll be something simple no doubt, but it's driving me nuts.
.post-reg-columns {
width: 100%;
display:block;
}
.firstcolumn {
display: inline-block;
max-width: 40%;
margin:5%;
padding:10px;
}
.firstcolumn button {
color: #fff;
background-color: #6496c8;
text-shadow: -1px 1px #417cb9;
border: none;
font-size: 1.4em;
font-family: 'Bree Serif', serif;
font-weight:bold;
width: 100%;
padding:15px;
}
.firstcolumn button:hover {
background-color: #416386;
}
.secondcolumn {
display: inline-block;
background:#fff7ca;
max-width: 40%;
margin:5%;
padding:10px;
}
<div class="post-reg-columns">
<div class="firstcolumn">
<div class="title2"> Basic Listing </div>
<button>Test Button</button>
ewfwefw efwefwefw fwefwef wefwefwef wefwefwe fwefwef wefefw efwe fefwefwefw eiofj erio jweriojgjphi owriog jerioj gerijg ejfwefwef wefj weijfwe jfjiw efjwej wef weijf hello this is a test blah blah blah! My name is Chris Mayberry and this is a test
</div>
<div class="secondcolumn">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod sollicitudin magna, sed placerat dui pretium quis. Vivamus sit amet velit nisi. Etiam consectetur mauris ligula, id fermentum felis fermentum ac. Phasellus pharetra a lorem ac dictum. Nullam vitae tempor ex. Mauris in vehicula augue. Maecenas sit amet porttitor enim, eu vehicula orci. Aliquam id nisl non sem mattis varius in sed nulla. Nulla ultrices fringilla erat, vitae tincidunt turpis malesuada vitae. Cras vehicula ex at arcu eleifend cursus. Sed varius dignissim risus eu fringilla.
</div>
</div>
As per your code, both divs have 40% width which means total 80%. Further, 5% margin which mean 5*4 =20%. So total becomes 100% here. And in your second div it has also 5% margin which force it to break as (100%+20%) there is no more space. You need to remove margin:5%; from .firstcolumn.
Check this fiddel
Remove margin:5%; from .firstcolumn class.
Demo here
Update answer
.post-reg-columns {
width: 100%;
display:block;
margin:5%
}
Demo Here
I have this fixed right side bar layout working perfectly for me for a long time, it works in most of the browsers and devices too.
But the recent chrome update to 45 which happened few days ago, broke the layout by adding a horizontal scrollbar.
There are different ways to achieve the fixed right side bar layout, but this layout needs to extend the background color of main and side columns to the browser width extent with fixed max-width container(marked in red) and with shadow between columns.
And this below code was the best way I could achieve it.
Now all I need is no scrollbar in Chrome 45, I tried different ways to avoid it but none works. I know this wont be a easy fix, but any help on this would be appreciated.
http://jsfiddle.net/chetanjk/ptuxn2dq/
HTML
<div class="container" style="background:#000; color:#fff; text-align:center">
------page content max width for reference ----
</div>
<div class="page-cols">
<div class="container ">
<div class="cols-wrap">
<section class="main-col">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ipsum sapien, tincidunt ac augue sodales, consequat sodales elit. Nunc pharetra eget velit sed pharetra.
</section>
<aside class="aside-col">
<div class="pack">
Sed luctus nisl ut ipsum scelerisque semper. Nullam euismod eros vitae odio viverra tristique. Nam pulvinar massa at diam congue, vitae fringilla neque varius. In molestie quis neque luctus facilisis.
Vestibulum sit amet mi ut odio condimentum dictum vel a metus. Morbi ultrices enim ut accumsan lacinia. Praesent augue purus, bibendum in odio in, pharetra consectetur mi. Vivamus ac arcu dignissim, placerat ipsum eu, tempor magna. Integer nec ipsum dui. Quisque at diam est. Aliquam ut placerat ligula, eu venenatis turpis. Sed nec eros vel ante ornare eleifend. Suspendisse aliquam nulla consectetur tellus molestie efficitur.
</div>
</aside>
</div>
</div>
</div>
CSS
body{
font-family: arial;
font-size: 14px;
color: #333;
line-height: 1.5;
overflow-y: scroll;
margin:0;
padding: 0;
}
*, *::before, *::after {
box-sizing: border-box;
}
.container:after,
.cols-wrap:after,
.page-cols:after{
clear: both;
content: "";
display:table;
}
.container{
margin: 0 auto;
max-width: 1200px;
min-width: 300px;
padding:0 10px;
position: relative;
}
.page-cols{
background-color: #999;
}
.cols-wrap{
width: 100%;
position: relative;
background-color: #ccc; /*this can be #fff too to match body bg*/
box-shadow: 10px 10px 10px -10px #000;
right: 320px;
}
.cols-wrap .main-col{
float: left;
left: 320px;
position: relative;
width: 100%;
padding-right: 340px;
}
.cols-wrap .aside-col{
float: right;
position: relative;
width: 320px;
margin-right: -320px;
padding-left: 20px
}
I use display:table and vertical-align:middle to vertically center a div with dynamic height.
CSS
.table {
display:table;
height: 100%;
width: 100%;
}
.cell {
display: table-cell;
vertical-align: middle;
text-align:center;
}
.content {
display: inline-block;
width: 100px;
overflow-y: auto; /* Useless */
}
HTML
<div class="table">
<div class="cell">
<div class="content">
Then this text becomes too long, it will cause
the .table div to expand beyond its container
even if set to height: 100%
</div>
</div>
</div>
How do I get the content div to get a vertical scroll when its height becomes greater than the table div (or rather the table div's parent)?
JS Fiddle example
Instead of a CSS tables approach, you can use the Centering in the unknown approach:
.cell, .cell:before {
height: 100%;
}
.cell:before {
content: '';
margin-right: -0.25em; /* Adjusts for spacing */
}
.cell:before, .cont {
vertical-align: middle;
display: inline-block;
}
.cont {
max-height: 100%;
overflow-y: auto;
}
.margin {
position: absolute;
left: 32px;
right: 32px;
top: 32px;
bottom: 32px;
background: yellow;
text-align: center;
}
.cell, .cell:before {
height: 100%;
}
.cell:before {
content: '';
margin-right: -0.25em; /* Adjusts for spacing */
}
.cell:before, .cont {
vertical-align: middle;
display: inline-block;
}
.cont {
width: 240px;
padding: 0px 12px;
background: #ddd;
text-align: left;
border: 1px solid #000;
max-height: 100%;
overflow-y: auto;
}
<div class="margin">
<div class="cell">
<div class="cont">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus lacinia ipsum quis pharetra. Donec vitae quam placerat lectus lobortis congue. Suspendisse maximus euismod aliquam. Ut sagittis risus vitae mauris imperdiet, ac venenatis orci dignissim. Nam felis dui, commodo non venenatis in, pulvinar a lectus. Duis lacus nulla, fringilla ut malesuada vel, iaculis ut dui. Nunc venenatis imperdiet tortor, eu sollicitudin velit vulputate finibus. In placerat justo lacus, quis faucibus leo varius ornare. Mauris vestibulum ligula in est pellentesque commodo. Donec sollicitudin dui quis quam pretium, eget sollicitudin risus pellentesque. Duis eget lacus varius, finibus augue ac, auctor eros. Proin vestibulum mauris vitae urna volutpat, non ultrices felis ultricies.</p>
</div>
</div>
</div>
You can add a .row element:
<div class="table">
<div class="row">
<div class="cell">
<div class="content">Long text</div>
</div>
</div>
</div>
With this CSS:
.table {
display: table;
height: /* something */;
}
.row {
display: table-row;
height: 100%;
}
.cell {
display: table-cell;
height: 0;
}
.cont {
max-height: 100%;
overflow-y: auto;
}
This reduces the height of .cell as much as possible –making .cont overflow–, but since .row has height: 100%, it will cover .table.
.margin {
position: absolute;
left: 32px;
right: 32px;
top: 32px;
bottom: 32px;
background: yellow;
}
.table {
display: table;
width: 100%;
height: 100%;
}
.row {
display: table-row;
height: 100%;
}
.cell {
display: table-cell;
vertical-align: middle;
text-align: center;
height: 0;
}
.cont {
width: 240px;
padding: 0px 12px;
background: #ddd;
display: inline-block;
text-align: left;
border: 1px solid #000;
max-height: 100%;
overflow-y: auto;
}
<div class="margin">
<div class="table">
<div class="row">
<div class="cell">
<div class="cont">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus lacinia ipsum quis pharetra. Donec vitae quam placerat lectus lobortis congue. Suspendisse maximus euismod aliquam. Ut sagittis risus vitae mauris imperdiet, ac venenatis
orci dignissim. Nam felis dui, commodo non venenatis in, pulvinar a lectus. Duis lacus nulla, fringilla ut malesuada vel, iaculis ut dui. Nunc venenatis imperdiet tortor, eu sollicitudin velit vulputate finibus. In placerat justo lacus, quis
faucibus leo varius ornare. Mauris vestibulum ligula in est pellentesque commodo. Donec sollicitudin dui quis quam pretium, eget sollicitudin risus pellentesque. Duis eget lacus varius, finibus augue ac, auctor eros. Proin vestibulum mauris
vitae urna volutpat, non ultrices felis ultricies.</p>
</div>
</div>
</div>
</div>
</div>
An alternative to achieve the same effect is to use display: flex instead of display: table
.flex {
position:absolute;
left:32px; right:32px; top:32px; bottom:32px;
display: flex;
align-items: center;
justify-content: center;
background:yellow;
}
.item {
max-height: 100%;
box-sizing: border-box;
width: 264px;
padding: 0px 12px;
background: #ddd;
border: 1px solid #000;
overflow:auto;
}
<div class="flex">
<div class="item">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus lacinia ipsum quis pharetra. Donec vitae quam placerat lectus lobortis congue. Suspendisse maximus euismod aliquam. Ut sagittis risus vitae mauris imperdiet, ac venenatis orci dignissim. Nam felis dui, commodo non venenatis in, pulvinar a lectus. Duis lacus nulla, fringilla ut malesuada vel, iaculis ut dui. Nunc venenatis imperdiet tortor, eu sollicitudin velit vulputate finibus. In placerat justo lacus, quis faucibus leo varius ornare. Mauris vestibulum ligula in est pellentesque commodo. Donec sollicitudin dui quis quam pretium, eget sollicitudin risus pellentesque. Duis eget lacus varius, finibus augue ac, auctor eros. Proin vestibulum mauris vitae urna volutpat, non ultrices felis ultricies.</p>
</div>
</div>
This works in Chrome (v39), Firefox (v36), and IE11. However, IE11 doesn't seem to regrow the item div once the scrollbar has been added, even if there is space for it.
It's not the .table div that expands beyond its container. It's the .cont div.
.cont {
width: 240px;
padding: 0px 12px;
background: #ddd;
display: inline-block;
text-align: left;
border: 1px solid #000;
overflow:auto;
}
Nothing in this class limits the height to 100%, so the .cont div will expand beyond the borders of .table
Just add max-heigh:100% to limit it to 100% of the parent's (.cell) height. And then the overflow:auto (that was already there) should do the rest of the job
http://jsfiddle.net/0q78gbvh/1/
EDIT: This will not work in all browsers, because you can't set the max-height from display:table directly in those browsers.
Is this what you are looking for?
Since you have a <p> element in ur jsFiddle Eg, set a max height to the container equal to the .margin
.cont {
width: 240px;
padding: 0px 12px;
background: #ddd;
display: inline-block;
text-align: left;
border: 1px solid #000;
max-height:300px; /* Fixed max-height of container... */
overflow-y:scroll;
}
JSFiddle Example
I know this will be easy for someone experienced in CSS. I made a mock-up of my code here to show what I have. I'm trying to get the background colors, pink and green, extend to the bottom of the white column... or whichever one is longest. I thought the clear:both would work but I'm missing something I know is simple. Help appreciated, snickers expected.
JSFiddle
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color:lightblue;
}
#mainColumn {
float: left;
margin-left: 0;
margin-right: 0;
width: 830px;
background-color: white;
}
#leftColumn {
float: left;
margin-left: 0;
margin-right: 0;
width: 195px; /* modified - shortened */
background-color:pink;
}
#rightColumn {
float: left;
width: 195px;
background-color:green;
}
#myWrapper {
background-color: black;
}
.clearit {
clear: both;
}
</style>
</head>
<body>
<div id="myWrapper">
<div id="leftColumn">
some content
</div>
<div id="mainColumn">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ullamcorper urna a magna euismod, vitae dapibus justo feugiat. Pellentesque ac dui lorem. Fusce ligula urna, ultrices a lectus sit amet, luctus semper est. Curabitur a egestas elit, vitae tincidunt elit. Donec quis nunc id nibh fermentum lobortis egestas id eros. Aenean eget purus erat. In auctor, ipsum in dapibus imperdiet, nulla elit posuere neque, ultrices convallis ligula odio eget felis. Maecenas quis turpis nulla. Nam a velit non lorem semper tincidunt eget iaculis sem. Donec vitae venenatis libero. Duis consequat augue sed sapien cursus dapibus.
</div>
<div id="rightColumn">
even more content
</div>
</div>
<div id="EvenUp" class="clearit">
</div>
<p> On with life </p>
</body>
One solution is to place both left and right columns inside mainColumn and use display:table and display:table-cell
css
body {
background-color:lightblue;
}
#mainColumn {
margin-left: 0;
margin-right: 0;
width: 830px;
background-color: white;
display: table;
}
#leftColumn {
display: table-cell;
margin-left: 0;
margin-right: 0;
width: 195px;
/* modified - shortened */
background-color:pink;
}
#rightColumn {
display: table-cell;
width: 195px;
background-color:green;
}
#myWrapper {
background-color: black;
}
.clearit {
clear: both;
}
fiddle