Is there a "pure" way to achieve this layout where there is fixed content and equal fluid gutters, i.e. a way without using calc?
Fiddle
HTML:
<body>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
</body>
CSS:
body {
min-width: 300px;
}
.content {
width: 100px;
height: 100px;
background: blue;
float: left;
margin-left: calc((100% - 300px) / 4);
}
Unfortunately not. You could use a way to "almost" make it like that by using wrapper divs for each .content and style the wrappers to be one third of the body width. Within each wrapper you center the blue boxes. The drawback of that is the distance between the blue boxes is twice as wide as the distance from the outer blue boxes to the body border.
* {
margin: 0;
padding: 0;
border: 0;
}
body {
min-width: 300px;
width: 100%;
}
.content-wrapper {
width: 33.3333%;
text-align: center;
float: left;
}
.content {
width: 100px;
height: 100px;
background: blue;
margin: 0 auto;
}
<body>
<div class="content-wrapper"><div class="content"></div></div>
<div class="content-wrapper"><div class="content"></div></div>
<div class="content-wrapper"><div class="content"></div></div>
</body>
I fiddled around a bit and almost achieved a solution:
Fiddle
HTML:
<body>
<div id="wrap">
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
</div>
</body>
CSS:
body {
margin: 0;
}
#wrap {
text-align: justify;
}
.content {
width: 100px;
height: 100px;
background: blue;
display: inline-block;
}
#wrap:before {
content:"";
display: inline-block;
}
#wrap:after {
content:"";
width:100%;
display: inline-block;
}
If multiple pseudo-elements were possible, we could generate an empty inline-block (the same "empty word" as the :before) as :after(1) and the element with width:100% as :after(2).
Well, I couldn't get it to work. But thanks to you Paul for your answer and thanks chipChocolate.py and myfunkyside for the edit!
Related
JsFiddle Demo
I have 2 divs in a container (actually I tagged the first as h1) and I'd like the 2nd div to take the remaining space of it's parent div. Doing height:100% makes it use 100% of its parent height causing it to be larger then the parent because of the other div. In the demo you can see the blue pass the grey.
How do I tell it to use the remaining height? The HTML may change but try not to go crazy
HTML:
<div class="outer_box">
<div class="container">
<h1>Title</h1>
<div class="box">Box</div>
</div>
<div class="container">
<h1>Title</h1>
<div class="box2">Box</div>
</div>
</div>
CSS:
.outer_box {
height: 500px;
}
.container {
width: 30%;
height: 100%;
background-color: grey;
float:left
}
.box {
background-color: blue;
height: 100%;
}
.box2 {
background-color: green;
}
You could do the CSS table layout, and set the box to height:100% to push the title to its minimal height.
http://jsfiddle.net/0w7pqeo6/3/
.outer_box {
height: 300px;
}
.container {
width: 30%;
height: 100%;
background-color: grey;
float: left;
display: table;
}
.container h1, .container > div {
display: table-row;
}
.box {
background-color: blue;
height: 100%;
}
.box2 {
background-color: green;
height: 100%;
}
<div class="outer_box">
<div class="container">
<h1>Title</h1>
<div class="box">Box</div>
</div>
<div class="container">
<h1>Title</h1>
<div class="box2">Box</div>
</div>
</div>
http://jsfiddle.net/utsavoza/9v0dfv39/
HTML part
Title
<div class="box">Box</div>
</div>
<div class="container">
<h1>Title</h1>
<div class="box2">Box</div>
</div>
CSS
.outer_box {
height: 500px;
}
.container {
width: 30%;
height: 100%;
background-color: grey;
float:left
}
.box {
background-color: blue;
height: 84%;
}
.box2 {
background-color: green;
height: 84%;
}
Use height 84% instead of 100%. you can see it in the above link..
I'm trying to create 3 columns layout, where structure should be main, left column, right column. The main column is auto-width to fill rest of page.
Unfortunately I cannot change the HTML, which is currently like this:
<div class="wrap">
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>
</div>
Yes: That means I cannot change the order of divs.
I've found some solutions, one of these is by using display: table-cell, but there is issue when using float. Second solutions is layout by using flexbox, it is pretty good solution, but I cannot use it because of IE9 where this CSS style isn't supported.
Just to restate the aim: My need is to have left and right with fixed width, and main will fill rest of free space.
<---250px--><----------------auto-width-------------><---200px--->
<---Left-----><------------------main------------------><---right----->
Have anyone any solutions for this in pure CSS without any JavaScript?
Here you go. A simple CSS solution. Remember you should always clear your floats.
HTML
<div class="left"></div>
<div class="right"></div>
<div class="main"></div>
<div class="clear"></div>
CSS
.main, .left, .right {
min-height: 250px;
}
.left {
float: left;
background-color: green;
width: 50px;
}
.right {
float: right;
background-color: blue;
width: 50px;
}
.clear {
clear: both;
}
.main {
background-color: gray;
}
JSFiddle: http://jsfiddle.net/18rvc23q/
You could try floating the sidebars to the left and right respectively, and then applying some padding to the .main div to keep it from overlapping them.
<style>
.left {float: left; width: 250px;}
.right {float: right; width: 200px;}
.main {padding: 0 200px 0 250px;}
</style>
<div class="wrap">
<div class="right">right</div>
<div class="left">left</div>
<div class="main">main</div>
</div>
https://jsfiddle.net/1ofqkLmw/
Note that in this markup I've moved the main div to be the last child of wrap.
Also note that you can just as well use margin instead of padding - if you don't want the border and background to overlap the sidebars, then margin is the way to go.
You could use a mix of left and right margin on .main and then absolute position the .left and .right columns.
HTML
<div class="wrap">
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>
</div>
CSS
.wrap {
position: relative;
}
.main {
border: 1px dashed red;
margin: 0 100px;
min-height: 300px;
}
.left,
.right {
width: 100px;
min-height: 300px;
position: absolute;
top: 0;
}
.left {
left: 0;
background-color: yellow;
}
.right {
right: 0;
background-color: blue;
}
Here's a jsFiddle of it in action: http://jsfiddle.net/1u9gzyh6/
Two ways to do this:
HTML
<div class="wrap">
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
</div>
The better (but unsupported in IE9-) way
.wrap {
display:flex;
}
.left {
flex-basis:250px;
}
.right {
flex-basis:200px;
}
.main {
flex-grow:1;
}
The somewhat hackier, but supported in IE9 (but not IE8- or certain mobile browsers) way
.wrap {
display:block;
}
.left {
width:250px;
}
.right {
width:200px;
}
.main {
width:calc(100% - 450px);
}
UPDATE: if you wanted to dynamically add / remove columns, just add a few extra classes in your CSS file:
.main.no-left {
width:calc(100% - 200px);
}
.main.no-right {
width:calc(100% - 250px);
}
.main.no-left.no-right {
width:100%;
}
And apply the classes dynamically via JS as needed. Anything else requires a JS solution that actually sets the width as an inline style, or makes use of position:absolute;, which can get real hacky, real fast.
EDITED:
<style>
div {
margin: 0;
padding: 0
}
div.main-wrapper {
overflow: hidden;
width: 700px;
margin: 0 auto;
}
div.left-wrapper {
float: left;
width: 500px;
}
div.left-col {
float: left;
width: 200px; /*change to what value you desire*/
background-color: #5446EB;
height: 400px;
}
div.main-col {
background-color: #DDEB46;
height: 400px;
}
div.right-col {
float: right;
width: 200px; /*change to what value you desire*/
background-color: #EB838D;
height: 400px;
}
</style>
<div class="main-wrapper">
<div class="left-wrapper">
<div class="left-col">
insert content of the left col here
</div>
<div class="main-col">
insert content of the main col here.
</div>
</div>
<div class="right-col">
insert content of the right col here
</div>
</div>
I think this should solve your problem:
.main, .left, .right {
height: 250px;
}
.left {
float: left;
background-color: green;
width: 50px;
position: relative;
margin-left: -300px; // negative width of main
}
.right {
float: left;
background-color: blue;
width: 80px;
margin-left: 50px; // width of left
}
.main {
width: 300px;
background-color: gray;
float: left;
position: relative;
left: 50px; // width of left
}
.wrap:after {
content: "";
clear: both;
}
<div class="wrap">
<div class="main">Main</div>
<div class="left">Left</div>
<div class="right">Right</div>
</div>
I am a bit newbie with CSS and i am pretty obfuscated trying to center a group of divs inside a div. What i want:
divs 2,3 and 4 should be centered inside div1.
My approach:
.div1 {
display: inline-block;
margin: 0 auto;
text-align: center;
}
.restofdivs {
width: 470px;
margin: 20px;
min-height: 1px;
float:center
}
the result is: the 3 divs (2,3 and 4) one on top of another...
Regards,
This can easily be done with table display:
.table-display {
display: table;
width: 100%;
}
.cell-display {
display: table-cell;
}
.div1, .div2, .div3, .div4 {
padding: 40px;
}
.div1 {
background: #ABC;
}
.div2 {
background: #DEF;
}
.div3 {
background: #CAD;
}
.div4 {
background: #FAD;
}
<div class="div1">
<div class="table-display">
<div class="cell-display div2"></div>
<div class="cell-display">
<div class="div3"></div>
<div class="div4"></div>
</div>
</div>
</div>
Maybe set a width on .div1 and remove inline-block from .div1
.div1 {
width: 960px;
margin: 0 auto;
text-align: center;
}
.restofdivs {
width: 470px;
margin: 20px;
min-height: 1px;
}
The most common way to center a block element if you know it's width is to define the width and use "margin: 0 auto". This tells the browser to give a top and bottom margin of 0, and to automatically determine equal margins on the left and right.
Using floats, you can create the layout you described as follows:
http://jsfiddle.net/ynt4suee/
Markup:
<div>
<div id="one" class="border clearfix">one
<div id="wrapper">
<div id="two" class="border">two</div>
<div class="subcontainer">
<div id="three" class="border">three</div>
<div id="four" class="border">four</div>
</div>
</div>
</div>
CSS:
div.border{
border: 1px solid red;
}
div#wrapper{
width: 400px;
margin: 0 auto;
}
div#two{
width: 250px;
float: left;
}
div.subcontainer{
float: right;
width: 130px;
}
.clearfix:after {
content: " "; /* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
Here's another approach, using inline-block elements for the inner divs instead:
http://jsfiddle.net/xojqq4v5/
Markup:
<div id="one" class="border">
div 1
<div id="wrapper">
<div id="two" class="border">div 2</div>
<div id="subcontainer">
<div id="three" class="border">div 3</div>
<div id="four" class="border">div 4</div>
</div>
</div>
</div>
CSS:
div.border{
border: 1px solid red;
margin-bottom: 5px;
}
div#wrapper{
width: 450px;
margin: 0 auto;
}
div#two, div#subcontainer{
display: inline-block;
vertical-align: top;
}
div#two{
width: 300px;
}
div#three, div#four{
width: 140px;
}
Still, so long as you know the total width of the inner divs, you can center the wrapper using "margin: 0 auto", which has the advantage of not centering text on all child elements unless otherwise specified.
The difference here is that to lay out the inner divs in columns, div 2 and the container div containing divs 3 and 4 are defined as inline-block elements.
I have to make something like columns, but without table. This is example code:
<div class="main">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
<div class="endfloat"></div>
</div>
.left is on a left side, .center is in the middle and .right should be on a right side. But, .center should be also vertically aligned to the middle. Here is example and CSS example:
jsFiddle
Wrap the actual elements is a table-cell:
HTML
<div class="main">
<div class="table-cell">
<div class="left"></div>
</div>
<div class="table-cell">
<div class="center"></div>
</div>
<div class="table-cell">
<div class="right"></div>
</div>
</div>
SCSS
#mixin defaultDiv($bg, $height: 300px) {
width: 200px;
height: $height;
background-color: $bg;
display: table-cell;
}
.main {
outline: 1px solid red;
width: 600px;
display: table;
.table-cell {
display: table-cell;
width: 200px;
vertical-align: middle;
}
.left {
#include defaultDiv(green);
}
.center {
#include defaultDiv(blue, 200px);
}
.right {
#include defaultDiv(yellow, 250px);
}
}
JSFiddle demo: http://jsfiddle.net/3728vxa9/2/
Depending on if the height of the center element is in pixels or percent, you can place a div on top and below it. For instance, if it's height is 50 percent, place a div above and below it, each with a height of 25 percent.
HTML will look like this
<div class="main">
<div class="left"></div>
<div class="centerTop"></div>
<div class="center"></div>
<div class="centerBottom"></div>
<div class="right"></div>
<div class="endfloat"></div>
</div>
CSS will look like this
.centerTop {
height: 25%
}
.center {
height: 50%
}
.centerBottom {
height: 25%
}
Here are two examples of ways in which you could align a div in the middle:
Using HTML:
<div class="center" style="margin: 0 auto;"></div>
Styling in a separate CSS file:
.center { margin: 0 auto; }
If you are making three columns and want them to resize according to the window width, you set the value of their width to be 33%. Here is an example:
.center {
width: 33%;
}
.left {
width: 33%;
}
.right {
width: 33%;
}
Please see this link,
http://jsfiddle.net/n6t3qrux/
#mixin defaultDiv($bg, $height: 300px) {
float: left;
width: 200px;
height: 300px;
background-color: $bg;
}
.main {
outline: 1px solid red;
width: 600px;
height: 300px;
position: relative;
.left {
#include defaultDiv(green);
margin: auto;
position: absolute;
left: 0;
top: 0;
}
.center {
#include defaultDiv(blue, 200px);
margin: auto;
position: absolute;
left:0;
right: 0;
top: 0;
bottom: 0;
height: 200px;
}
.right {
#include defaultDiv(yellow, 250px);
margin: auto;
position: absolute;
right: 0;
top: 0;
}
.endfloat {
clear: both;
}
}
I wish this help you
Here is an example
http://jsfiddle.net/BringMeAnother/LwXhE/
// html
<div class="container clearfix">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
// css
.container {
background: red;
padding: 10px;
}
.child {
width: 100px;
height: 100px;
float: left;
}
.child:nth-child(even) {
background: green;
}
.child:nth-child(odd) {
background: blue;
}
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
The container with the red background seem to always stretch to 100%. What I'd like to do is to make its width depend on the floating children, so in this case, 3 times 100px.
The reason I'd like to have this is as follow. In a flexible layout, I have a container that contains several child elements of different sizes. The width and amount of those children can vary. The children always float. The goal is to have the floating children centered. So, if I always have one child element, I'd simply set its margin-right and margin-left to auto. However, there are several children which I wish to put next to each other, but after they have been ordered horizontally, I'd like that row to be centered on the page. I cannot give a fixed width to the container since the amount of children and each of their width are not determined in advance.
I think I might be able to do this with javascript, but I wonder if there is a pure css solution. Thanks
Besides Adsy suggestion (to set the container's position to fixed), you could:
1) Use position absolute on the container:
HTML:
<div class="container">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
CSS:
.container {
background: red;
padding: 10px;
position:absolute;
}
.child {
width: 100px;
height: 100px;
float: left;
}
.child:nth-child(even) {
background: green;
}
.child:nth-child(odd) {
background: blue;
}
http://jsfiddle.net/tKz8b/
2) Set a float on the container, which is good if you need it with relative / static positioning:
HTML:
<div class="container">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
<div class="clearfix"></div>
<div>Next</div>
CSS:
.container {
background: red;
padding: 10px;
float: left;
}
.child {
width: 100px;
height: 100px;
float: left;
}
.child:nth-child(even) {
background: green;
}
.child:nth-child(odd) {
background: blue;
}
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
http://jsfiddle.net/LYrWx/1/
By wrapping your container div in another wrapper div, you can centre your red container div, and the red div will only be as wide as its floating children.
HTML
<div class="centered">
<div class="container">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</div>
CSS
.centered {
text-align: center;
}
.container {
background: red;
padding: 10px;
display: inline-block;
}
.child {
width: 100px;
height: 100px;
float: left;
}
.child:nth-child(even) {
background: green;
}
.child:nth-child(odd) {
background: blue;
}
Fiddle: http://jsfiddle.net/SbPRg/
Late to the party here, but all you really need is to add display: inline-block. And to center the .container div, just apply text-align: center to whatever contains it.
JSFiddle: http://jsfiddle.net/LwXhE/24/
Add position:fixed; to container
.container {
background: red;
padding: 10px;
position:fixed;
Fiddle