I have one container having some content centered in but I want to put something on the left and I am having trouble figuring out how to do this.
Is the only way to do this with absolute positioning? Here is the code I have been playing around with to show ads an example:
HTML:
<div class="container">
<p class="one">Left</p>
<p style="clear: both;"></p>
<div class="center">Center</div>
</div>
CSS:
.container {
background-color: gray;
text-align: center;
}
.container .one {
float: left;
background-color: aqua;
}
.clearfix:after,
.clearfix:before
{
display: table;
content: " ";
clear: both;
}
.container .center {
display: inline-block;
background-color: green;
}
CodePen:
http://codepen.io/anon/pen/NqeBNp
Try applying display:inline-block and float:left with some width of both the div.
.container {
background-color: gray;
text-align: center;
overflow: auto;
}
.container .one {
display: inline-block;
float: left;
width: 33%;
background-color: aqua;
}
.container .center {
display: inline-block;
float: left;
width: 33%;
background-color: green;
}
<div class="container">
<div class="one">Left</div>
<div class="center">Center</div>
</div>
You should use Flexbox, it is very easy to use. Let me know if this is what you were looking for?
Screenshot:
Live instance of the code --> https://jsfiddle.net/7fo5ceb6/
//HTML
<!DOCTYPE html>
<html>
<head>
<link href="index.css" rel="stylesheet">
</head>
<body>
<div id="container">
<div>left</div>
<div>center</div>
<div>right</div>
</div>
</body>
</html>
//CSS
body{
margin: 0 !important;
height: 100vh;
width: 100vw;
}
#container{
display: -webkit-flex;
display: flex;
height: 60px;
width: 100%;
background: #5c5c5c;
}
#container>div{
padding: 10px 0px;
text-align: center;
-webkit-flex: 1;
flex: 1;
-webkit-align-self: center;
align-self: center;
margin: 5px;
background: #ccc;
}
Related
I want to have a welcome page like this:
But instead I get this:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html,
body {
background-color: #000000;
margin: 0;
height: 90%;
width: 100%;
align-items: center;
}
#container1 {
height: 100%;
vertical-align: middle;
display: table-cell;
background-color: yellow;
display: flex;
align-items: center;
}
#left {
height: 500px;
color: white;
background-color: blue;
font-size: 20px;
float: left;
width: 100%;
}
#right {
height: 500px;
color: white;
background-color: red;
font-size: 20px;
float: left;
width: 100%;
}
<main id="container1" class="container my-6">
<div class="">
<div id="left" class="col-lg-6 my-3">
</div>
</div>
<div class="">
<div id="right" class="col-lg-6 my-3">
</div>
</div>
</main>
I don't know why my container doesn't fully fit the body of the page, and my left and right don't go in the middle and stretch width to each other's end.
You have a bunch of errors in your code. I commented out the CSS you don't need:
No need for float, that's what flex is for.
display: table-cell is being overwritten by display: flex
Use flex to set the properties of your left and right divs.
Remove the containing elements around those.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html,
body {
background-color: #000000;
margin: 0;
height: 90%;
width: 100%;
/* NOT NEEDED: align-items: center;*/
}
#container1 {
width: 100%;
height: 100%;
vertical-align: middle;
/* NOT NEEDED: display: table-cell; */
background-color: yellow;
display: flex;
/* This is probably unneeded. align-items, aligns elements on the cross access - which in this case would be vertically aligned in the center since flex-direction by default, is row */
align-items: center;
}
#left {
height: 500px;
color: white;
background-color: blue;
font-size: 20px;
/* NOT NEEDED float: left; */
/* NOT NEEDED width: 100%; */
flex: 1 1 50%;
}
#right {
height: 500px;
color: white;
background-color: red;
font-size: 20px;
flex: 1 1 50%;
/* NOT NEEDED float: left; */
/* NOT NEEDED width: 100%; */
}
<main id="container1" class="container my-6">
<div id="left" class="col-lg-6 my-3">
</div>
<div id="right" class="col-lg-6 my-3">
</div>
</main>
The problem comes mostly from the divs without classes, that shouldn't be there.
But you're also mixing floats, with flex and tables. Just stick with flex like in this example:
html, body{
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
.container{
width: 100%;
height: 100%;
display: flex;
}
.left,
.right {
width: 50%;
height: 100%;
}
.left {
background: #215f40;
}
.right {
background: #092414;
}
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
I have the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<style>
*,
*:before,
*:after {
box-sizing: border-box;
}
.list {
line-height: 22px;
}
.list:before,
list:after {
display: table;
content: "";
}
.list:after {
clear: both;
}
.right-item {
float: left;
width: 50px;
height: 50px;
display: table;
background-color: blue;
border: 1px solid green;
display: table;
float: left;
width: 50px;
height: 50px;
margin-right: 8px;
margin-bottom: 8px;
text-align: center;
vertical-align: top;
}
.wrapper {
display: inline-block;
width: 100%;
}
.wrapper:before,
.wrapper:after {
content: "";
display: table;
}
.wrapper:after {
clear: both;
}
.floated-item {
float: left;
width: 50px;
height: 50px;
background-color: red;
border: 1px solid black;
margin: 0 8px 8px 0;
}
.flex-item {
flex: auto;
max-width: 100%;
}
.flex-container {
display: flex;
align-items: center;
min-height: 15px;
position: relative;
align-items: center;
}
.flex-column {
display: flex;
flex-direction: column;
flex-grow: 1;
min-height: 1px;
position: relative;
max-width: 100%;
}
.outer-wrapper {
display: flex;
flex-flow: column wrap;
margin-bottom: 24px;
vertical-align: top;
}
.label {
flex-grow: 0;
overflow: hidden;
display: inline-block;
position: relative;
max-width: 100%;
min-height: 1px;
}
.label-inner {
height: auto;
position: relative;
display: inline-flex;
align-items: center;
margin: 0;
}
</style>
</head>
<body>
<form>
<div class="outer-wrapper">
<div class="label"><label class="label-inner">Label</label></div>
<div class="flex-column">
<div class="flex-container">
<div class="flex-item">
<span class="wrapper">
<div class="list">
<div class="floated-item">
<span><div class="floated-item"></div></span>
</div>
<div class="floated-item">
<span><div class="floated-item"></div></span>
</div>
<div class="floated-item">
<span><div class="floated-item"></div></span>
</div>
<div class="floated-item">
<span><div class="floated-item"></div></span>
</div>
<div class="floated-item">
<span><div class="floated-item"></div></span>
</div>
</div>
<div class="right-item"></div>
</span>
</div>
</div>
</div>
</div>
</form>
<div>content</div>
</body>
</html>
At first, I didn't have a clue what happens with the added extra space. After a long debugging, the problem is (at least it seems to be, it fixes the extra space, but maybe something else causes it, I don't know) that flex-wrap: wrap is used on the .outer-wrapper. When I set it to flex-wrap: nowrap it fixes the extra space.
I went through the Flexbox specification, and also through the Visual Formatting Model of the CSS spec, about float usage, formatting contexts, etc. but I still don't know what might be the problem.
This is firstly connected with the flex-column. The flex-direction makes the next div (.flex-item) to take the full width. If you remove flex-direction:column in your code, the last div (right-item) will automatically fall on the next line.
Also if you specify width:100% to the flex-column, the space will disappear, as the container is sure he can fit all in one line.
Then you give your .flex-item class flex:auto witch is flex-basis property and according to css-tricks means that the extra space is distributed based on its flex-grow value. (if you remove this from your code, your right-item will also be on the next line since he will take only the required space for your wrapper and that will not change).
After that you specify to you wrapper* to have width 100% (if you just remove the width:100% from your .wrapper class, without touching the flex-direction or the flex:auto, the same thing will occur (the right-item will be on the next line).
The bottom line is that there are many reasons for the flex container to think that you need 2 rows to fit in all your elements. But because of the flex-direction, the flex:auto and the width:100% you force it all in one line.
So it may seem strange but when you combine to much display types (flex,inline and table) and you rely too much for containers to calculate their sizes this happens.
The extra space is due to display: inline-block given to the .wrapper class.
Change display: inline-block to display: flex, this should fix the issue.
*,
*:before,
*:after {
box-sizing: border-box;
}
.list {
line-height: 22px;
}
.list:before,
list:after {
display: table;
content: "";
}
.list:after {
clear: both;
}
.right-item {
float: left;
width: 50px;
height: 50px;
display: table;
background-color: blue;
border: 1px solid green;
display: table;
float: left;
}
/* changed here */
.wrapper {
display: flex;
width: 100%;
}
.wrapper:before,
.wrapper:after {
content: "";
display: table;
}
.wrapper:after {
clear: both;
}
.floated-item {
float: left;
width: 50px;
height: 50px;
background-color: red;
border: 1px solid black;
margin: 0 8px 8px 0;
}
.flex-item {
flex: auto;
max-width: 100%;
}
.flex-container {
display: flex;
align-items: center;
min-height: 15px;
position: relative;
align-items: center;
}
.flex-column {
display: flex;
flex-direction: column;
flex-grow: 1;
min-height: 1px;
position: relative;
max-width: 100%;
}
.outer-wrapper {
display: flex;
flex-flow: column wrap;
margin-bottom: 24px;
vertical-align: top;
}
.label {
flex-grow: 0;
overflow: hidden;
display: inline-block;
position: relative;
max-width: 100%;
min-height: 1px;
}
.label-inner {
height: auto;
position: relative;
display: inline-flex;
align-items: center;
margin: 0;
}
<div class="outer-wrapper">
<div class="label"><label class="label-inner">Label</label></di <div class="flex-column">
<div class="flex-container">
<div class="flex-item">
<span class="wrapper">
<div class="list">
<div class="floated-item">
<span><div class="floated-item"></div></span>
</div>
<div class="floated-item">
<span><div class="floated-item"></div></span>
</div>
<div class="floated-item">
<span><div class="floated-item"></div></span>
</div>
<div class="floated-item">
<span><div class="floated-item"></div></span>
</div>
<div class="floated-item">
<span><div class="floated-item"></div></span>
</div>
</div>
<div class="right-item"></div>
</span>
</div>
</div>
</div>
</div>
<div>content</div>
Note: height of .outer-wrapper gets changed when inline-block is applied on .wrapper.
As the container element <span class="wrapper"> if set to display:flex, it's somehow calculating its height as the sum of the height of the class="list" and class="right-item". It's somehow considering what height the class="list" elements would have taken up if it had no float elements in it(or would have clearfix hack applied on it). I am sure of this thing as if I change the height of the blue box to 20 px the height at the bottom also reduces(it's not always double of its actual content's height).
Code snippet with float elements in class='list' div
.right-item {
animation: myfirst 5s linear infinite alternate;
}
#keyframes myfirst {
0% {
height: 50px;
}
100% {
height: 10px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<style>
*,
*:before,
*:after {
box-sizing: border-box;
}
.list {
line-height: 22px;
}
.list:before,
list:after {
display: table;
content: "";
}
.list:after {
clear: both;
}
.right-item {
float: left;
width: 50px;
height: 50px;
display: table;
background-color: blue;
border: 1px solid green;
display: table;
float: left;
width: 50px;
height: 50px;
margin-right: 8px;
margin-bottom: 8px;
text-align: center;
vertical-align: top;
}
.wrapper {
display: inline-block;
width: 100%;
}
.wrapper:before,
.wrapper:after {
content: "";
display: table;
}
.wrapper:after {
clear: both;
}
.floated-item {
float: left;
width: 50px;
height: 50px;
background-color: red;
border: 1px solid black;
margin: 0 8px 8px 0;
}
.flex-item {
flex: auto;
max-width: 100%;
}
.flex-container {
display: flex;
align-items: center;
min-height: 15px;
position: relative;
align-items: center;
}
.flex-column {
display: flex;
flex-direction: column;
flex-grow: 1;
min-height: 1px;
position: relative;
max-width: 100%;
}
.outer-wrapper {
display: flex;
flex-flow: column wrap;
margin-bottom: 24px;
vertical-align: top;
}
.label {
flex-grow: 0;
overflow: hidden;
display: inline-block;
position: relative;
max-width: 100%;
min-height: 1px;
}
.label-inner {
height: auto;
position: relative;
display: inline-flex;
align-items: center;
margin: 0;
}
</style>
</head>
<body>
<form>
<div class="outer-wrapper">
<div class="label"><label class="label-inner">Label</label></div>
<div class="flex-column">
<div class="flex-container">
<div class="flex-item">
<span class="wrapper">
<div class="list">
<div class="floated-item">
<span><div class="floated-item"></div></span>
</div>
<div class="floated-item">
<span><div class="floated-item"></div></span>
</div>
<div class="floated-item">
<span><div class="floated-item"></div></span>
</div>
<div class="floated-item">
<span><div class="floated-item"></div></span>
</div>
<div class="floated-item">
<span><div class="floated-item"></div></span>
</div>
</div>
<div class="right-item"></div>
</span>
</div>
</div>
</div>
</div>
</form>
<div>content</div>
</body>
</html>
Code snippet with elements that are float inside class="list" div but also have clearfix hack applied on it.(To show what height it actually should have taken and which seems to cause the extra space in the above snippet)
.clearfix::after {
content: "";
clear: both;
display: table;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<style>
*,
*:before,
*:after {
box-sizing: border-box;
}
.list {
line-height: 22px;
}
.list:before,
list:after {
display: table;
content: "";
}
.list:after {
clear: both;
}
.right-item {
float: left;
width: 50px;
height: 50px;
display: table;
background-color: blue;
border: 1px solid green;
display: table;
float: left;
width: 50px;
height: 50px;
margin-right: 8px;
margin-bottom: 8px;
text-align: center;
vertical-align: top;
}
.wrapper {
display: inline-block;
width: 100%;
}
.wrapper:before,
.wrapper:after {
content: "";
display: table;
}
.wrapper:after {
clear: both;
}
.floated-item {
float: left;
width: 50px;
height: 50px;
background-color: red;
border: 1px solid black;
margin: 0 8px 8px 0;
}
.flex-item {
flex: auto;
max-width: 100%;
}
.flex-container {
display: flex;
align-items: center;
min-height: 15px;
position: relative;
align-items: center;
}
.flex-column {
display: flex;
flex-direction: column;
flex-grow: 1;
min-height: 1px;
position: relative;
max-width: 100%;
}
.outer-wrapper {
display: flex;
flex-flow: column wrap;
margin-bottom: 24px;
vertical-align: top;
}
.label {
flex-grow: 0;
overflow: hidden;
display: inline-block;
position: relative;
max-width: 100%;
min-height: 1px;
}
.label-inner {
height: auto;
position: relative;
display: inline-flex;
align-items: center;
margin: 0;
}
</style>
</head>
<body>
<form>
<div class="outer-wrapper">
<div class="label"><label class="label-inner">Label</label></div>
<div class="flex-column">
<div class="flex-container">
<div class="flex-item">
<span class="wrapper">
<div class="list clearfix">
<div class="floated-item">
<span><div class="floated-item"></div></span>
</div>
<div class="floated-item">
<span><div class="floated-item"></div></span>
</div>
<div class="floated-item">
<span><div class="floated-item"></div></span>
</div>
<div class="floated-item">
<span><div class="floated-item"></div></span>
</div>
<div class="floated-item">
<span><div class="floated-item"></div></span>
</div>
</div>
<div class="right-item"></div>
</span>
</div>
</div>
</div>
</div>
</form>
<div>content</div>
</body>
</html>
I will try to find some reference of why exactly is this happening and edit this post in case I do find it. But, in my understanding, flex and float are very contradicting to each other in terms of how they behave. In case you are bound on using them together then you must know why, what, how etc. of both of them in details. Or else just refrain from using both of them together.
Also, one important thing about your code above is that you are using display: flex and then using flex-flow: column wrap; on outer-wrapper div with just 1 single child element in it. I don't see the point of adding these styles. As there is only 1 element inside outer-wrapper div, it would have behaved in the same way only without those styles also. Try to use display: flex only when required.
There are a few divs. I want to set width of black as needed and put it on the middle (horizontally) of red. Then put some elements in black in one line and position them on the middle (vertically) of black.
The final result should looks like:
There is a problem with center vertically.
My code is:
<html>
<body>
<div id="mainContainer">
<div id="singleOptions">
<div id="myObject"></div>
<div id="mySecondObject"></div>
</div>
</div>
</body>
<style>
#mainContainer {
background: red;
width: 100px;
height: 100px;
margin-top: 50px;
text-align: center;
}
#singleOptions {
height: 100%;
background: black;
display: inline-block;
}
#myObject {
width: 10px;
display: inline-block;
height: 10px;
background: green;
}
#mySecondObject {
width: 10px;
display: inline-block;
height: 10px;
background: yellow;
}
</style>
</html>
How is it possible to get this effect?
You can try it like this
#mainContainer {
background: red;
width: 100px;
height: 100px;
margin-top: 50px;
text-align: center;
}
#singleOptions {
height: 100%;
background: black;
display: flex;
margin: 0 auto;
justify-content: space-between;
width: min-content;
align-items: center;
}
#myObject {
width: 10px;
display: inline-block;
height: 10px;
margin-right: 5px;
background: green;
}
#mySecondObject {
width: 10px;
display: inline-block;
height: 10px;
background: yellow;
}
<html>
<body>
<div id="mainContainer">
<div id="singleOptions">
<div id="myObject"></div>
<div id="mySecondObject"></div>
</div>
</div>
</body>
</html>
You can achieve this using flexbox:
#mainContainer {
background: red;
width: 100px;
height: 100px;
text-align: center;
display: flex;
justify-content: center;
}
#singleOptions {
height: 100%;
background: black;
display: flex;
align-items: center;
}
#myObject {
width: 10px;
display: inline-block;
height: 10px;
background: green;
}
#mySecondObject {
width: 10px;
display: inline-block;
height: 10px;
background: yellow;
}
<div id="mainContainer">
<div id="singleOptions">
<div id="myObject"></div>
<div id="mySecondObject"></div>
</div>
</div>
This is solved easily with Flexbox.
Change your CSS for #singleOptions as follows.
#singleOptions {
height: 100%;
background-color: black;
display: flex;
justify-content: space-between;
align-items: center;
}
I'm building a line-through header that can span multiple lines. Using the sample code below, is it possible to write my CSS in such a way that the left and right divs are not needed? Where they could be added as pseudo-classes to my header class?
CodePen
.container {
box-sizing: border-box;
display: flex;
place-content: center space-evenly;
align-items: center;
}
.line {
flex: 1;
height: 2px;
background: black;
}
.header {
font-size: 50px;
margin: 0 30px;
text-align: center;
}
.header-broken:after {
content: '';
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
width: 50px;
height: 5px;
flex: auto;
width: 100%;
height: 2px;
background: black;
}
<div class="container">
<div class="line"></div>
<div class="header">Normal Title<br>fdasfsaf</div>
<div class="line"></div>
</div>
It can be done with just one div, see the example below, add some margin to the pseudo elements as needed for spacing.
.container {
display: flex;
text-align: center;
}
.container:before,
.container:after {
content: "";
flex: 1;
background: linear-gradient(black, black) center / 100% 1px no-repeat;
}
<div class="container">
Normal Title<br>fdasfsaf
</div>
You can also try this.
HTML:
<div class="container">
<div class="header">
<h1>Normal Title
<br>fdasfsaf
</h1>
</div>
</div>
CSS:
.container {
display: flex;
text-align: center;
}
.header {
flex: 1;
}
.header h1 {
font-size: 50px;
margin: 0 30px;
text-align: center;
background-color: #fff;
display: inline-block;
}
.header:after {
content: '';
border-bottom: 1px solid #000;
display: block;
margin-top: -58px;
}
I want my images next to each other with a little margin in between. But when I do `margin-right: 10px; on each div the last image wont align with my title bar.
How can I give the divs a space in between without having a space on the right of the last div?
Note: The content is dynamic, so I cant make a div to hold the 4 divs.
There are many ways you can do, I'll just show one of them.
EDIT 1: solution for multiple rows by using nth-child
DEMO: http://jsfiddle.net/s0xLfcrx/1/
HTML:
<div class="bar"></div>
<div class="box">
<div>a</div>
<div>b</div>
<div>c</div>
<div>d</div>
<div>e</div>
<div>f</div>
<div>g</div>
<div>h</div>
</div>
CSS:
.bar, .box {
width: 460px;
}
.bar {
background: lime;
height: 20px;
}
.box {
text-align: center;
font-size: 0;
}
.box > div {
display: inline-block;
font-size: 16px;
background: gold;
width: 100px;
margin: 0 10px;
}
.box > div:nth-child(4n+1) {
margin-left: 0;
}
.box > div:nth-child(4n) {
margin-right: 0;
}
ORIGINAL DEMO (for only 1 row):
http://jsfiddle.net/s0xLfcrx/
You could use justify-content: space-between. This creates even spacing inbetween each of the image containers and pushes the first and last element to the edges of the parent div.
Your html:
.container {
width: 346px;
}
.title-bar {
background-color: #ccc;
width: 100%;
}
.flex-container {
padding: 0;
margin: 0;
list-style: none;
-ms-box-orient: horizontal;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
display: flex;
}
.space-between {
-webkit-justify-content: space-between;
justify-content: space-between;
}
.image-container {
background: #ccc;
padding: 5px;
width: 60px;
height: 50px;
margin: 0;
line-height: 50px;
color: white;
font-weight: bold;
font-size: 2em;
text-align: center;
}
<div class="container">
<div class="title-bar">
<h1>Title</h1>
</div>
<div class="flex-container space-between">
<div class="image-container">1</div>
<div class="image-container">2</div>
<div class="image-container">3</div>
<div class="image-container">4</div>
</div>
</div>
The styling for the image-containers in the code above is just an example - if you have an unknown number of divs loading you either fix the width, or make them fluid and the container width will need to be fluid (unless you want it fixed of course).
you could do something like this with variable widths:
.titlebar {
width: calc(100% - 2px);
display: block;
height: 40px;
background: blue;
}
.item25 {
width: calc(25% - 11px);
height: 80px;
display: inline-block;
background: black;
margin-right: 10px;
}
.no-margin {
margin-right: 0;
}
<div class="titlebar"></div>
<div class="item25"></div>
<div class="item25"></div>
<div class="item25"></div>
<div class="item25 no-margin"></div>
Just use simple CSS
.div { width: 25%; text-align: center; padding: 5px; box-sizing: border-box; }
.div img { display: block; margin: 0 auto; }
There are many ways to do but if you need RESPONSIVE for this then use this solution:
body{font-family:arial;}
h1{
display:block;
margin:0px;
padding:0px;
background:#0af;
color:#fff;
text-align:center;
}
.layer{
display:block;
overflow:auto;
}
.layer > div{
display:block;
float:left;
margin:10px 10px 10px 0px;
width: -moz-calc(25% - 7.5px);
width: -webkit-calc(25% - 7.5px);
width: calc(25% - 7.5px);
background-color:#000;
height:30px;
}
.layer > div:nth-child(4n) {
margin-right: 0;
background-color:#f00;
}
<h1>Title bar</h1>
<div class="layer">
<div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div>
<div></div><div></div>
</div>