One container with four or more divs inside that line up like a perfect puzzle and the last div fills out the remaining height..
the image illustrates how it should look like
where I am at: http://jsfiddle.net/meb9h3vx/
.wrap {
float: left;
background: #fff;
width: 100%;
}
.get2 {
float: left;
height: auto;
width: 50%;
}
<div class="wrap">
<div class="get2">
<h1>1</h1>
abc
</div>
<div class="get2">
<h1>2</h1>
</div>
<div class="get2">
<h1>3</h1>
d
<br>e
</div>
<div class="get2">
<h1>4</h1>
</div>
</div>
Try using this -
remove float from both .wrap and .get2
remove text-align: center; from body css
add following css to .get2 - text-align: center; display: inline-block;
vertical-align: top;
add margin-left: -4px; css to .get2:nth-child(2) { }
and add margin-left: -4px; margin-top: -17px; css to .get2:nth-child(4)
Flexbox to the rescue with no dirty hacks:
body {
background:#000;
color:#ccc;
text-align:center;
margin:10px;
}
.wrap {
background:#fff;
width:100%;
display:flex;
flex-wrap: wrap;
height:auto;
}
.get2 {
height:auto;
width:50%;
}
.get2:nth-child(1) {
background:red;
}
.get2:nth-child(2) {
background:green;
}
.get2:nth-child(3) {
background:yellow;
}
.get2:nth-child(4) {
background:blue;
}
<div class="wrap">
<div class="get2">
<h1>1</h1>
abc
</div>
<div class="get2">
<h1>2</h1>
</div>
<div class="get2">
<h1>3</h1>
d
<br>e</div>
<div class="get2">
<h1>4</h1>
</div>
</div>
Hey you can try by giving min-height as i am giving below
.get2{
float:left;
height:auto;
width:50%;
min-height:120px
}
Fixed it! So I inline-block the div and nth-child(2n) margin-left:-4px to get rid of the white-space and vertical-align:top and then the last part I added: padding-bottom: 99999px; margin-bottom: -99999px; http://jsfiddle.net/p428b71y/1/
.wrap{
float:left;
background:#fff;
width:100%;
overflow:hidden;
}
.get2:nth-child(2n){
margin-left:-4px;
}
.get2{
vertical-align:top;
display:inline-block;
height:auto;
width:50%;
padding-bottom: 99999px;
margin-bottom: -99999px;
}
Related
I have 4 divs aligned horizontally in the same line. I'm trying to center vertically the second and third through 'vertical-align' attribute with no success.
#container {
width:100%;
height:45px;
background-color:yellow;
}
#left {
width:100px;
height:45px;
float:left;
background-color:red;
}
#center1 {
width:100px;
height:45px;
display:inline-block;
background-color:green;
vertical-align: center;
word-break: break-word;
}
#center2 {
width:100px;
height:45px;
display:inline-block;
background-color:orange;
word-break: break-word;
}
#right {
width:100px;
height:45px;
float:right;
background-color:blue;
}
<div id="container">
<div id="left"> </div>
<div id="center1">Center 1</div><div id="center2">Center 2 Center 3</div>
<div id="right"> </div>
</div>
View in Fiddle
I don't want to align second and third content with 'position: relative; top: Xpx' or 'line-height: 45px;' due to second and third can have until two lines so I need to stay correctly aligned with one line and two lines.
Just add display: inline-flex; and align-items: center; to #center1 and #center2.
Edit: Dont forget to float them left.
Example:
#container {
width:100%;
height:45px;
background-color:yellow;
}
#left {
width: 100px;
height:45px;
float:left;
background-color:red;
}
#center1 {
width: 100px;
height:45px;
background-color:green;
float: left;
display: inline-flex;
align-items: center;
}
#center2 {
width: 100px;
height:45px;
background-color:orange;
float: left;
display: inline-flex;
align-items: center;
}
#right {
width: 100px;
height:45px;
float:right;
background-color:blue;
}
<div id="container">
<div id="left"> </div>
<div id="center1">Center 1</div><div id="center2">a long line of text!</div>
<div id="right"> </div>
</div>
I would probably use flexbox, it will make it easier to have a bar like that and easier to center thing vertically.
Have a look.
body {
margin: 0;
}
.flex-bar {
display: flex;
width: 100%;
}
.box {
display: flex;
width: 95px;
height: 40px;
justify-content: center;
align-items: center;
padding: 2.5px;
}
.filler {
flex: 1;
}
.red {
background: red;
}
.green {
background: green;
}
.orange {
background: orange;
}
.yellow {
background: yellow;
}
.blue {
background: blue;
}
<div class="flex-bar">
<div class="red box"></div>
<div class="green box">Centered #1</div>
<div class="orange box">Centered text number 2</div>
<div class="box yellow filler"></div>
<div class="blue box"></div>
</div>
I hope this helps.
You need to use vertical-align:middle; on both, the second and third element like this:
#table{
display:table;
width:100%;
}
#container{
display:table-row;
}
#left{
display:table-cell;
height:100%;
width:100px;
line-height:45px;
background-color:red;
}
#center1{
width:100px;
line-height:45px;
text-align:center;
display:table-cell;
background-color:green;
word-break: break-word;
vertical-align:middle;
}
#center2{
width:100px;
line-height:45px;
text-align:center;
display:table-cell;
background-color:orange;
word-break: break-word;
}
#space{
background-color:yellow;
display:table-cell;
}
#right{
width:100px;
line-height:45px;
display:table-cell;
background-color:blue;
}
<div id="table">
<div id="container">
<div id="left"> </div>
<div id="center1">
Center 1
</div>
<div id="center2">
Center 2 <br>Center 3
</div>
<div id="space">
</div>
<div id="right" style=""> </div>
</div>
</div>
Updated to center the text vertically and not only the element
To position the text, use line-height (vertical position) which should be equal to the height of the element and text-align:center to center the text horizontally.
I am new to programming, I want to arrange div elements as following:
header div 1
--------------------
left 2 | center 3| right 4 |
---------------------
footer div 5
I tried position and display attributes but failed to get desired result.
How can I arrange in this way and how to arrange any div element in simple way?
Try this code for your div structure.
.wrapper {
color: #fff;
float: left;
text-align: center;
width: 100%;
}
.header {
background-color: red;
float: left;
width: 100%;
}
.left {
background-color: orange;
float: left;
width: 25%;
}
.center {
background-color: green;
float: left;
width: 50%;
}
.right {
background-color: orange;
float: left;
width: 25%;
}
.footer {
background-color: blue;
float: left;
width: 100%;
}
.header, .footer {
margin: 1% 0;
}
<div class="wrapper">
<div class="header">
<h1>Header Div</h1>
</div>
<div class="left">
<h1>Left Div</h1>
</div>
<div class="center">
<h1>Center Div</h1>
</div>
<div class="right">
<h1>Right Div</h1>
</div>
<div class="footer">
<h1>Footer Div</h1>
</div>
</div>
Try this code
HTML
<div class="header">Header Div</div>
<div class="left-section"></div>
<div class="center-section"></div>
<div class="right-section"></div>
<div class="footer-section">Footer</div>
CSS
.header{
width:100%;
height:50px;
background:green;
}
.left-section{
height:500px;
width:29%;
display:inline-block;
background:yellow;
padding:0px;
margin:0px;
}
.right-section{
height:500px;
width:29%;
display:inline-block;
background:gold;
padding:0px;
margin:0px;
}
.center-section{
height:500px;
width:40%;
display:block;
display:inline-block;
background:gray;
padding:0px;
margin:0px;
}
.footer-section{
width:100%;
height:50px;
background:orange;
}
Codepen link
http://codepen.io/santoshkhalse/pen/gwWbAV
I have a section element with 3 divs inside, I want to center horizontally 'div 2', but the problem is the adyacent divs are not the same size so "justify-content:center" doesn't works.
I know here (under the title "Center a flex item when adjacent items vary in size") is a solution, but it doesn't work for me.
Here is the revelant code:
HTML
<section>
<div id="div1">DIV 1</div>
<div id="div2">DIV 2</div>
<div id="div3">DIV 3</div>
</section>
CSS
section{
display:flex;
position:relative;
}
#div1{
width:260px;
}
#div2{
position:absolute;
left:50%;
transform(translateX:-50%,0);
}
#div3{
margin-left:auto;
width:50px;
}
Here is also a codepen.
My goal is center 'div2' and move the rest of divs to the left and right edges respectively.
Any help would be appreciated.
<section>
<div id="div1">DIV 1</div>
<div id="div2_wrap">
<div id="div2">DIV 2</div>
</div>
<div id="div3">DIV 3</div>
</section>
section{
display: flex;
position:relative;
padding:5px;
height: 500px;
background:yellow;
}
div{
padding:5px;
background:coral;
}
#div1{
width:260px;
}
#div2_wrap{
position: absolute;
left:50%;
height: 100%;
align-items: center;
display: flex;
}
#div2 {
background-color: #000fff;
}
#div3{
margin-left:auto;
width:50px;
}
You can wrap your divs around another parent div and set them to have equal widths first. Then align your children divs inside it's parent. Like this:
HTML:
<section>
<div class="wrapper" id="div1">
<div class="innerDiv">DIV 1</div>
</div>
<div class="wrapper" id="div2">
<div class="innerDiv">DIV 2</div>
</div>
<div class="wrapper" id="div3">
<div class="innerDiv">DIV 3</div>
</div>
</section>
CSS:
section{
display:flex;
padding:5px;
background:yellow;
text-align:center;
}
.wrapper{
display:flex;
flex-grow:1;
flex-wrap:wrap;
}
.innerDiv{
padding:5px;
background:coral;
}
#div1{
justify-content:flex-start;
}
#div1 .innerDiv{
flex:1;
}
#div2{
justify-content:center;
}
#div3{
justify-content:flex-end;
}
#div3 .innerDiv{
width:50px;
}
Codepen here
Or you can go with the old school more browser compatible way, and also keeping your HTML code same.
section {
padding: 5px;
background: yellow;
text-align: center;
position: relative;
float: left;
box-sizing: border-box;
width: 100%;
}
div {
padding: 5px;
display: inline-block;
background: coral;
}
#div1 {
width: 260px;
float: left;
}
#div2 {
left: 50%;
margin-left: -0.5em;
position: absolute;
}
#div3 {
float: right;
width: 50px;
}
Codepen Here
I have been trying to center this image inside its div, but it keeps aligning to the left.
HTML
<div id="main">
<div id="left">This is a test</div>
<div id="right">
<h2 id="fish">Fishtail</h2>
<img height="150px" width="250px" src="image.jpg">
</div>
</div>
CSS
#left, #right {
width: 40%;
margin:5px;
padding: 1em;
color:#51CBED;
font-size:20px;
padding:15px;
background-color:white;
}
#left {
float:left;
}
#right {
float:right;
}
#fish {
text-align:center;
}
#main {
height:800px;
width:950px;
background-color:black;
opacity:.75;
filter:alpha(opacity=75);
margin-top:10px;
margin-bottom:75px;
padding:20px;
}
I have tried using margin: auto; and align:middle; but neither seem to work.
No need for relative/absolute positioning.
A simple way to solve this is by setting display:block on the image.
jsFiddle demo - it works perfectly.
CSS
#main #right img {
margin: 0px auto;
display: block;
}
Try this:
HTML:
<div id="main">
<div id="left">This is a test</div>
<div id="right">
<h2 id="fish">Fishtail</h2>
<img height="150px" width="250px" src="image.jpg">
</div>
</div>
CSS:
#left, #right {
width: 40%;
margin:5px;
padding: 1em;
color:#51CBED;
font-size:20px;
padding:15px;
background-color:white;
}
#left {
float:left;
}
#right {
float:right;
text-align:center;
}
#fish {
text-align:center;
}
#main {
height:800px;
width:950px;
background-color:black;
opacity:.75;
filter:alpha(opacity=75);
margin-top:10px;
margin-bottom:75px;
padding:20px;
}
Jsfiddle: http://jsfiddle.net/hdMEQ/
I basically just added text-align: center; property in #right id.
Try adding:
#right img {
margin:auto;
display:block;
}
JSfiddle
Will get you the dead center with variable width and height or no need to know widths, heights.
set the position absolute in relative to which div you want the center the image
#main #right img {
position:absolute;
display: block;
top:0;right:0;bottom:0;left:0;
margin:auto;
}
#right {
position:relative;
}
<style type="text/css">
.centerDiv {
margin-right: auto;
margin-left: auto;
width: 80px;
}
</style>
<div id="main">
<div id="left">This is a test</div>
<div id="right" class="centerDiv">
<div class="centerDiv">
<h2 id="fish">Fishtail</h2>
<img height="80px" width="80px" src="http://www.w3schools.com/images/w3html.gif">
</div>
</div>
</div>
</body>
</html>
My pen: http://codepen.io/helloworld/pen/IGsoe
I want to center align all divs with the yellow border how can I do that?
I tried margin:0 auto; on the parent container but that did not help.
The "items" with the yellow border should keep their percentage width. Do not change this to fixed pixel values.
HTML code:
<div class="table">
<div id="navigationWrapper">
<div class="table">
<div id="left"><image width="40px" /></div>
<div id="navBar" style="width:100%; height: 100px; background-color: grey;">
<div class="cellContainer">
<div class="alarmTemplate">A</div>
</div>
<div class="cellContainer">
<div class="alarmTemplate">B</div>
</div>
<div class="cellContainer">
<div class="alarmTemplate">C</div>
</div>
<div class="cellContainer">
<div class="alarmTemplate">D</div>
</div>
</div>
<div id="right"><image width="40px" /></div>
</div>
</div>
<div id="navigationWheeler">test</div>
</div>
CSS:
body {
padding: 0;
margin: 0;
width:100%;
height:100%;
}
.cellContainer {
margin:0 auto;
width: 20%;
float: left;
background:black;
}
.alarmTemplate{
height:80px;
margin-top:10px;
margin-bottom:10px;
margin-left:10px;
margin-right:10px;
background:lightgray;
border:yellow solid 2px;
}
#navBar, #right, #left, #navigationWheeler {
height:80px;
background:yellow;
display:table-cell;
vertical-align:middle;
}
.table {
display:table;
min-width:100%;
margin:0 auto;
}
#right, #left, #navigationWheeler {
width:40px;
}
#navigationWheeler{
background:green;
text-align:center;
}
To center the four DIVs set them to
.cellContainer {
float: none;
display: inline-block;
}
and center the navbar contents
#navBar {
text-align: center;
}
Demo Link with corrected css
.cellContainer {
margin:0 auto;
width: 20%;
/*float: left;*/
background:black;
display: inline-block;
}
#navBar{
text-align: center;
}