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
Related
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 3 years ago.
I use display: inline-block for div.left - div.right and div.red - div.yellow but none of them are in the same line. I set the width exactly. But it does not work at all.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
margin: 0 auto;
width: 800px;
}
.left, .right, .red, .yellow {
display: inline-block;
vertical-align: top;
}
.left {
width: 250px;
height: 500px;
background: gray
}
.right {
width: 550px;
height: 550px;
background: blue;
}
.red {
background: red;
width: 275px;
height: 200px;
}
.yellow {
background: yellow;
width: 275px;
height: 200px;
}
<div class="container">
<div class="left"></div>
<div class="right">
<div class="red-yellow">
<div class="red"></div>
<div class="yellow"></div>
</div>
</div>
</div>
Update
If you need to keep inline-block styles, you need the .left and .right divs to add up to 800px. The thing with inline-block is that it will include white space and add it to the width. This is why the wrapping is still occurring. The following image shows the white space that is causing the wrapping.
There are many ways to remove white space and make this fit. One way is to add an HTML comment between the .left and right div, which removes all white space.
<div class="container">
<div class="left"></div><!--
--><div class="right">
<div class="red-yellow">
<div class="red"></div>
<div class="yellow"></div>
</div>
</div>
</div>
Demo
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
margin: 0 auto;
width: 800px;
}
.left, .right, .red, .yellow {
display: inline-block;
vertical-align: top;
}
.left {
width: 250px;
height: 500px;
background: gray
}
.right {
width: 550px;
height: 550px;
background: blue;
}
.red {
background: red;
width: 275px;
height: 200px;
}
.yellow {
background: yellow;
width: 275px;
height: 200px;
}
<div class="container">
<div class="left"></div><!--
--><div class="right">
<div class="red-yellow">
<div class="red"></div>
<div class="yellow"></div>
</div>
</div>
</div>
If you add display: flex to the .container, the immediate children (.left and .right) will align in the same row. The .right div is 50px taller than the .left div because of the explicit width being set (550px for .right, 500px for .left).
Also, you can remove this, as it will no longer have any effect due to the flexbox container.
.left, .right, .red, .yellow {
display: inline-block;
vertical-align: top;
}
Demo
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
margin: 0 auto;
width: 800px;
display: flex;
}
.left {
width: 250px;
height: 500px;
background: gray
}
.right {
width: 550px;
height: 550px;
background: blue;
}
.red {
background: red;
width: 275px;
height: 200px;
}
.yellow {
background: yellow;
width: 275px;
height: 200px;
}
<div class="container">
<div class="left"></div>
<div class="right">
<div class="red-yellow">
<div class="red"></div>
<div class="yellow"></div>
</div>
</div>
</div>
if use display: inline-block , there will be some space between the elements. In order to overcome that u can use float property so that every element will be aligned in the same line.
If u want to go with display: inline-block property, you have to reduce the width of .red and .yellow,say for example
.red,.yellow{ width: 270px}
I struggle with following problem: we have absolutely positioned two divisions, one is for content, one for navbar. Left one contains huge amount of text, so it's usually stretched far over page height. I want the right one (navbar) to stretch as well. Sadly, I can't obtain it with known methods.
.left, .right {
position: absolute;
top: 0;
bottom: 0;
}
.left {
left: 0;
width: 70%;
}
.left .leftc {
background: red;
}
.right {
right: 0;
width: 30%;
background: green;
}
<div class="left">
<div class="leftc">
ABC <!-- large amount of text -->
</div>
</div>
<div class="right">
</div>
Fiddle
Note: I know how to make right bar with fixed position but I want navbar to be scrolled with whole page as well as rest of content. No fixed positions please.
You can achieve that using display: flex on the body. (I erased all the position settings)
for (i = 0; i < 100; i++)
$(".leftc").append("<p>xxx</p>");
body {
display: flex;
margin: 0;
}
.left {
width: 70%;
}
.leftc {
height: 100%;
background-color: red;
}
.right {
width: 30%;
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="left">
<div class="leftc">
ABC
</div>
</div>
<div class="right">
</div>
https://jsfiddle.net/tknna6ww/1/
The left div is stretched by its content, not by a defined height. You can set the height of the right div to the same height of the left one using JavaScript:
$(".right").css("height", $(".leftc").css("height"));
Note that you have to put this line after the page is rendered to make sure that the browser has already calculated the correct height. Here is a demo:
for (i = 0; i < 100; i++)
$(".leftc").append("<p>xxx</p>");
$(".right").css("height", $(".leftc").css("height"));
.left,
.right {
position: absolute;
top: 0;
bottom: 0;
}
.left {
left: 0;
width: 70%;
}
.left .leftc {
background-color: red;
}
.right {
right: 0;
width: 30%;
background-color: green;
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="left">
<div class="leftc">
ABC
</div>
</div>
<div class="right">
</div>
This is a rather simple if you can put them in the same container.
That container then only needs to have display: flex; (and flex-direction: row; since you want it horizontally)
.wrapper {
display: flex;
flex-direction: row;
}
.left {
background-color: blue;
}
.right {
width: 50px;
background-color: red;
}
<div class="wrapper">
<div class="left">
<textarea></textarea>
</div>
<div class="right"></div>
</div>
The newer way to do this, that is widely but not fully supported is grid:
.wrapper-of-your-whole-site-potentially {
display: grid;
grid-template-rows: 50% 50%;
grid-template-columns: auto;
grid-template-areas: "left right";
}
.left {
grid-area: left;
height: 500px;
background-color: blue;
}
.right {
grid-area: right;
background-color: red;
}
<div class="wrapper-of-your-whole-site-potentially">
<div class="left">
</div>
<div class="right"></div>
</div>
make red side height: 100%;
.left, .right {
position: absolute;
top: 0;
bottom: 0;
}
.left {
left: 0;
width: 70%;
}
.left .leftc {
background: red;
height: 100%;
}
.right {
right: 0;
width: 30%;
background: green;
}
<div class="left">
<div class="leftc">
ABC <!-- large amount of text -->
</div>
</div>
<div class="right">
</div>
I am attempting to position two elements in the center of their given space regardless of the size of the page.
Example
https://jsfiddle.net/57q9dn78/
<div id="parent">
<div class="child right">
I am a child.
</div>
<div class="child left">
I am a child.
</div>
</div>
.child {
background-color: #ff0000;
height: 20px;
width: 100px;
max-width: 50%;
}
.right {
float: right;
margin-right: 75px;
}
.left {
float: left;
margin-left: 75px;
}
#parent {
background-color: #00FF00;
height: 20px;
padding: 20px 0;
width: 500px;
}
In the example the #parent div is set to 500px and the others have margins based on that. Normally parent would be 100% width. This is just an example of what I wanted. Is there a way to use calc or something else in CSS so as the page changes in size the margin changes or goes away entirely based on the face that each child is 100px.
You could use flexbox:
.child {
background-color: #ff0000;
height: 20px;
width: 100px;
max-width: 50%;
}
#parent {
background-color: #00FF00;
height: 20px;
padding: 20px 0;
display: flex;
justify-content: space-around;
width: 500px;
}
<div id="parent">
<div class="child right">
I am a child.
</div>
<div class="child left">
I am a child.
</div>
</div>
Just make the children's container 50%
.child {
height: 20px;
width: 50%;
float:left;
text-align:center;
}
.child span {
background-color: #ff0000;
}
https://jsfiddle.net/foreyez/xqvffyqj/
Just change the margin to 15% instead of 75px, which is 75px/500px:
.right {
float: right;
margin-right: 15%;
}
.left {
float: left;
margin-left: 15%;
}
Here is a working example
.child-holder {
width: 50%;
float: left;
}
.child {
background-color: #ff0000;
height: 20px;
width: 100px;
margin: auto;
max-width: 100%;
}
#parent {
background-color: #00FF00;
height: 20px;
padding: 20px 0;
width: 100%;
}
<div id="parent">
<div class="child-holder">
<div class="child">
I am a child.
</div>
</div>
<div class="child-holder">
<div class="child">
I am a child.
</div>
</div>
</div>
Before posting this I attempted to delete the question because none of the given answers handled the responsive design requirement. So, giving that parent needs to be 100%, you can make 2 boxes of 50% width and the auto margin on the child will allow the children to be centered within their respective spaces regardless of the size of parent or page.
Here is 2 simple variants, the first having fixed width and margin left/right (using your sample fixed width's), the second with fluid and translate left/right.
The middle for 2 element is 33% and then you reduce with 66% of their width.
If one want them centered at 25%, just change to 25% and reduce with 50%.
Snippet fixed width
.child {
background-color: #ff0000;
height: 20px;
width: 100px;
max-width: 50%;
}
.left {
float: left;
margin-left: calc(33.3% - 66.6px);
}
.right {
float: right;
margin-right: calc(33.3% - 66.6px);
}
#parent {
background-color: #00FF00;
height: 20px;
padding: 20px 0;
width: 500px;
}
<div id="parent">
<div class="child right">
I am a child.
</div>
<div class="child left">
I am a child.
</div>
</div>
Snippet fluid width
.child {
background-color: #ff0000;
height: 20px;
width: 100px;
max-width: 50%;
}
.left {
float: left;
position: relative;
left: 33.3%;
transform: translateX(-66.6666%);
}
.right {
float: right;
position: relative;
right: 33.3%;
transform: translateX(66.6666%);
}
#parent {
background-color: #00FF00;
height: 20px;
padding: 20px 0;
width: 100%;
min-width: 200px;
}
<div id="parent">
<div class="child right">
I am a child.
</div>
<div class="child left">
I am a child.
</div>
</div>
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>
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!