I am building a website with a flat design. I have a header and under it two different coloured blocks next to each other. I tried float left and right but was advised to use display: inline-block instead.
I ran into an issue, though. I want to place some text right in the middle of both the left and right block and tried to use the align-items: center, but figured out that only works if the div is set to flex.
So my question is, can I somehow keep my inline-block and get my text centered in the middle of my blocks (both horizontal and vertically)?
body {
margin: 80px 0 0;
}
#pagewrapper {
width: 100%;
}
#header {
width: 100%;
height: 80px;
background-color: #008B8B;
position: fixed;
top: 0;
}
.content-left,
.content-right {
width: 50%;
height: 500px;
color: #FFFFFF;
display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;
}
.content-left {
background-color: #66CC99;
}
.content-right {
background-color: #20B2AA;
}
#header-bot {
height: 800px;
background-color: #F8F8FF;
}
#footer {
height: 50px;
background-color: #AFEEEE;
}
.title {
font-size: 18px;
}
<body>
<div id="pagewrapper">
<div id="header">
</div>
<!-- End of Header -->
<div class="content-left">
<span class="title">This is left Content</span>
</div>
<!-- End of Content Left -->
<div class="content-right">
<span class="title">This is Right Content</span>
</div>
<!-- End of Content Right -->
<div id="header-bot">
</div>
<!-- End of Header-Bot -->
<div id="footer">
</div>
<!-- End of Footer -->
</div>
<!-- End of PageWrapper -->
</body>
While changing display type of columns to table-cell may cause a trouble (e.g. the effect of relative positioning is undefined for table-cell elements) another option is adding a full-height (pseudo-)element into the columns and align that and the <span> element vertically by vertical-align: middle; declaration:
EXAMPLE HERE
.content-left,
.content-right { text-align: center; } /* Align inline children horizontally */
.content-left:after, .content-right:after {
content: "";
display: inline-block;
vertical-align: middle; /* Align inline level elements vertically */
height: 100%;
}
.title {
vertical-align: middle; /* Align inline level elements vertically */
}
For further details, you could refer to my answer here.
On your .content-left and .content-right divs change the display to table and add a text-align of center. For the .title spans, change the display to table-cell and add a vertical-align of middle;
.content-left, .content-right {
display: table;
text-align: center;
}
.title {
display: table-cell;
vertical-align: middle;
}
Here's a jsfiddle to demonstrate (I changed the divs to have a height of 200px so it's easier to see the centering effect in the smallish jsfiddle window)
Related
EDIT: The problem is solved, so thanks to everyone who helped!
Original post:
So I am trying to put three divs next to each other (until thus far this part has been successful) with the third and last div to like go to attach to the bottom of the divs, which I have no clue how to do this.
How can I put the third div to attach to the bottom of the middle div and stay within the container?
To show you, I made a quick example. Something like this:
The black colour in the image is the 'body'.
The grey is a container div I put the three other divs in.
Each other box represents a div with what I want them to do and how approx. I want them to be positioned of one another.
I hope this can be done only using html and css. I would appreciate any help.
So far I have this as html for the divs:
#nav,
#textarea,
#contactallpages {
vertical-align: top;
display: inline-block;
*display: inline;
}
#containerpage {
position: relative;
margin: auto;
padding-top: 5%;
padding-bottom: 5%;
background-color: black;
height: 100%;
width: 70%;
}
#centercontainer {
background-color: lightblue;
width: 75%;
margin: 0 auto;
padding: 2%;
}
#nav {
float: left;
background: #aaaaaa;
height: 50%;
width: 15%;
padding: 1%;
}
#textarea {
display: inline-block;
background: #cccccc;
height: 70%;
width: 64%;
padding: 1%;
}
#contactallpages {
background: #bbbbbb;
position: absolute;
width: 15%;
padding: 1%;
bottom: 0;
}
<div id="containerpage">
<div id="centercontainer">
<div id="nav">
<ul>1
</ul>
<ul>2
</ul>
<ul>3
</ul>
</div>
<div id="textarea">
<header>
<h1>Welcome</h1>
</header>
<p>
Text text more text.
</p>
<p>
And more text.
</p>
</div>
<div id="contactallpages">
Random small textbox
<br>More small text.
</div>
</div>
</div>
The way you should lay this out is one container div and 3 children div's set to display: inline-block;
Using display: inline-block; will position all the div's next to each other and allows you to use the vertical-align property.
Now all you would need to do is set the proper vertical-alignment for each of the child div's. You can also set the height to the container div (#myPage) and that is the height that vertical-align will use to determine the positioning.
https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align
#myPage div {
display: inline-block;
width: 100px;
}
#centerFold {
height: 200px;
vertical-align: middle;
background-color: yellow;
}
#navBar, #contact{
height: 100px;
}
#navBar {
vertical-align: top;
background-color: red;
}
#contact {
vertical-align: bottom;
background-color: blue;
}
<div id="myPage">
<div id="navBar">
</div>
<div id="centerFold">
</div>
<div id="contact">
</div>
</div>
Try out flexbox if you do not have too much to worry about backward compatibility. My time at the moment doesn't allow to elaborate, but the essential part would be
#centercontainer {display: flex}
#contactallpages {align-self: flex-end}
Be aware though that some prefixing will be necessary for older browsers and this is only the standards-compliant solution. It does everything you want and you can forget about floating. Adding a
#textarea {flex-grow: 1}
would even allow the center to grow not only in height but in width also.
I am building on the question originally asked here How to center horizontal table-cell with a slight modification.
Basically, DIVs need to be centered as they are now, however, I also need to vertically align all the content in the cell in the middle.
Changing vertical-align: middle; for .column does NOTHING. If I change display: inline-block; for .column to display: table-cell, it will align content in the middle, but then .column DIVs are no longer centered and widths are all broken (currently all a evenly set to 25%). Setting margin:auto; or text-align on parent does nothing.
I've been running around this for days. Your help is appreciated.
/* Setting the container to be a table with maximum width and height */
#container {
display: table;
height: 100%;
width: 100%;
}
/* All sections (container's children) should be table rows with minimal height */
.section {
display: table-row;
min-height: 1px;
}
/* We need one extra container, setting it to full width */
.columns-container {
display: table-cell;
height: 100%;
width:100%;
text-align: center;
}
/* Creating columns */
.column {
display: inline-block;
vertical-align: middle;
min-height: 150px;
width: 25%;
text-align: left;
}
#a {
background-color: pink;
}
#b {
background-color: lightgreen;
}
#c {
background-color: lightblue;
}
<div id="container">
<div class="section">
<div class="columns-container">
<div class="column" id="a"> Contents A </div>
<div class="column" id="b"> Contents B </div>
<div class="column" id="c"> Contents C </div>
</div>
</div>
</div>
You could do it like the follows, it uses CSS3 Transforms, see the browser support details. And be aware of the white spaces thing on inline block.
JsFiddle demo
.container {
text-align: center;
margin: 0 auto;
}
.column {
display: inline-block;
width: 150px;
height: 150px;
}
.column > div {
position: relative;
top: 50%;
transform: translateY(-50%);
}
#a { background-color: pink; }
#b { background-color: lightgreen; }
#c { background-color: lightblue; }
<div class="container">
<div class="column" id="a"><div>Contents A</div></div>
<div class="column" id="b"><div>Contents B</div></div>
<div class="column" id="c"><div>Contents C</div></div>
</div>
setting your .column's line-height to the height of the element is step one; so: line-height:150px vertically aligns the content.
Then, simply edit the text-align:left style declaration you have set on .column to text-align:center finishes the vertically alignment in this case.
here's a fiddle:
http://jsfiddle.net/jalbertbowdenii/t2xgL3rm/
I want to position the content of these two divs to the top.
HTML
<div class="menu">
<div></div>
</div>
<div class="content">
<h1>SDFSDFSD SDFSD</h1>
<h1>SDFSDFSD SDFSD</h1>
<h1>SDFSDFSD SDFSD</h1>
</div>
css
.
menu {
display: table-cell;
background-color: yellow;
width: 20%;
}
.menu > div {
padding: 20px;
background-color: red;
vertical-align: top;
}
.content {
display: table-cell;
background-color: blue;
width: 80%;
}
http://jsfiddle.net/99u4vm3g/
I tried with vertical-align: top and with position: absolute and top:0 with no luck.
What should I do to send those content to the top of their containers?
Thanks in advance!
You added vertical-align:top to the wrong place, it should be applied to the table-cell elements.
Updated: http://jsfiddle.net/tfqmwko1/
You need to put the vertical-align on the table-cell elements
.menu {
vertical-align: top;
}
.content {
vertical-align: top;
}
http://jsfiddle.net/99u4vm3g/1/
You are going to see the text still not at the top and that is due to the margin on the header elements
This one has no margin on the header tags http://jsfiddle.net/99u4vm3g/2/
How to align vertically content inside #container which has a display of table-row;?
_#content may have inline or block element or even a child with fixed height. It just need to be aligned vertically no matter how.
The bottom div should always be at the bottom of the screen and the height of the top div should be equal to the remaining height.
<div id="container">
<span>content</span>
<div>content</div>
</div>
<div id="wrap">
<img src="http://www.boylesoftware.com/blog/wp-content/uploads/2014/07/280x250_css3_logo.jpg" height="100">
</div>
body {
padding: 0;
margin: 0;
color: #fff;
font: 18px "bonvenocf";
height: 100%;
background: #ccc;
max-height: 1080px;
position: relative;
display: table;
width: 100%;
}
html {
height: 100%;
max-height: 1080px;
}
#wrap {
text-align:center;
background: #1b1b1b;
width: 100%;
display: table-row;
}
#container {
width: 100%;
background: #0084ff;
height:100%;
display: table-row;
}
This is my fiddle: http://jsfiddle.net/4tvjvwpk/3/
vertical-align is only applicable to inline-level and table-cell elements.
Hence you could add a div and change its display type to table-cell and add vertical-align: middle to the element as follows:
EXAMPLE HERE
<div id="container">
<div class="cell">
<span>content</span>
<div>content</div>
</div>
</div>
.cell {
vertical-align: middle;
display: table-cell;
}
You shouldn't have content in a table-row. Instead, make it a table-cell. But maybe you should look into Flexbox for creating what you are looking for.
Reference: CSS Tricks
I am trying to use display:inline-block to build 3 columns.
It works fine in the beginning, but when I add content to the first column it affects the rest of the layout and renders the rest of the columns at a lower level.
What can I do to avoid this?
.cont {
width: 500px;
height: 200px;
background: #666666;
}
.col {
display: inline-block;
width: 30%;
background: pink;
}
<div class="cont">
<div class="col">
test<br><br><br>
</div>
<div class="col">
col2
</div>
<div class="col">
col3
</div>
</div>
You should add vertical-align: top; CSS declaration to align the columns vertically at the top:
.cont span {
display: inline-block;
vertical-align: top; /* Vertically align the inline-block elements */
height:100%;
line-height: 100%;
width: 33.33%; /* Just for Demo */
outline: 1px dashed red; /* Just for Demo */
}
Here is a online demo.
Honestly, I'm not a fan of using inline-block to create columns on the page, because of the white spaces between them.
The float was being used for a while, but nowadays flex box or CSS grid can be an option.
You just have to set a width of 33% on the the column, this will constraint it to take up 33% of the entire width of the div.
http://jsfiddle.net/Ge6g7/1/
.cont {
height:60px;
background: #ffff88;
}
.cont span {
display: inline-block;
height:100%;
line-height: 100%;
width: 33%; /* Added Css */
}