Vertical aligning of two different sized text elements - html

I have two different elements, a logo and navigation. The logo is 48px but the navigation is 16px. The challenge I am facing is vertically aligning them both and then horizontally aligning them with my webpage content.
<div class="header">
<div class="logo">LOGO</div>
<ul class="nav">
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
</div>
<div class="container">
<div class="wrapper">
CONTENT
</div>
</div>
Then in my CSS:
.header {
height: 10%;
width: 100%;
display: table;
}
.logo {
height: 100%;
display: table-cell;
vertical-align: middle;
}
.nav {
list-style: none;
margin: 0;
padding: 0;
display: table-cell;
vertical-align: middle;
}
.container {
width: 100%;
height: 90%;
display: table;
}
.wrapper {
height: 100%;
display: table-cell;
vertical-align: middle;
}
This code produces an output where both are vertically aligned but I'm not sure how to then align it with the content in the container, since the margin on the container is auto. If someone could give me some direction that would be great.
My overall goal is to align both the logo and the navigation vertically within the header but then say for example my content is 590px wide, align the logo (horizontally) to the left of that and the navigation to the right.
The output should look like
|logo| |nav |
|contentttttttttttt|
Thanks

http://jsfiddle.net/tqBUb/
The following code perfectly centers your different sized text vertically, and the total combined width of those two elements horizontally. Is this what you want? Either way this is probably a good starting point for you. The width of the header element can be changed to anything and it adjusts accordingly.
HTML
<header>
<div class="container">
<div class="logo">
<span>LOGO</span>
</div>
<nav class="main-nav">
<ul>
<li>HOME</li>
<li>ABOUT</li>
</ul>
</nav>
</div>
</header>
CSS
header {
color: #fff;
width: 80%;
background: blue;
}
.container {
display: table;
background: red;
margin: 0 auto;
}
.logo {
display: table-cell;
vertical-align: middle;
}
.logo span {
font-size: 48px;
line-height: 1;
}
.main-nav {
display: table-cell;
}
.main-nav ul {
list-style-type: none;
}
.main-nav ul li {
display: inline-block;
}
|logo|_______|nav|
|_____content____|
To achieve this format at 590px, you will need a media query breakpoint for screens widths of 590 or less. Then... just change the display: table; on .container to display: block; and the display: table-cell; div's to display: block. Then Flow the .logo div left, and float .main-nav right.

Related

How do I achieve horizontally aligned, gap-less, and centered div elements in container div

I have 3 elements that I would like to align horizontally, without gaps in between, and centered. I've accomplished lining them up horizontally and equally spaced, but want the touching, ie, to not have white space between them but to also take up 100% width of the page. This is generic html but applies to what I've done on my actual page:
CSS:
.content{
width: 100%;
height: 400px;
background-color:white;
text-align: justify;
}
.content .featureitem{
height: 100%;
width: 33%;
display: inline-block;
background-color:bisque;
margin: 0;
}
.content:after{
content: "";
width: 100%;
display: inline-block;
}
HTML:
<div class="content">
<div class="featureitem"></div>
<div class="featureitem"></div>
<div class="featureitem"></div>
</div>
I've tried using display:flex, but that leaves a gap on the right hand side. I want to achieve a row of 3 divs, that span 100% of the width with no gaps in between.
You can achieve this by removing the display: inline-block and adding float: left. Also you should consider calculating your width, since 3*33% != 100%:
.content .featureitem{
height: 100%;
width: calc(100%/3);
//display: inline-block;
float: left;
background-color:bisque;
margin: 0;
}
Fiddle
If you'd like to stick with display: inline-block; for layout, there are a number of ways to fight the space between inline block elements. There a number of good solutions in the CSS Tricks article. I typically use the negative margin option (it hasn't come back to bite me in a major way yet):
nav a {
display: inline-block;
margin-right: -4px;
}
or
nav a {
display: inline-block;
margin-right: -2px;
margin-left: -2px;
}
If you're open to another layout, you can use flexbox, or even center a float-based layout with a parent <div>, if that makes sense.
if you use inline-block elements and have indentation in the HTML code, there will be a white space in between each of them.(just like the one you leave in between words)
you may avoid any gap in html or use display : flex or table layout.
You can use HTML comment <!-- comment -->to erase the gap
.content{
width: 100%;
height: 400px;
background-color:white;
text-align: justify;
}
.content .featureitem{
height: 100%;
width: 33.33%;
display: inline-block;
background-color:bisque;
margin: 0;
}
.content:after{
content: "";
width: 100%;
display: inline-block;
}
<div class="content">
<div class="featureitem"></div><!--
--><div class="featureitem"></div><!--
--><div class="featureitem"></div>
</div>
or table/table-cell display
.content {
width: 100%;
height: 400px;
background-color: white;
text-align: justify;
display: table;
}
.content .featureitem {
height: 100%;
width: 33.33%;
display: table-cell;
background-color: bisque;
margin: 0;
}
<div class="content">
<div class="featureitem"></div>
<div class="featureitem"></div>
<div class="featureitem"></div>
</div>
or display:flex and flex:1
.content {
width: 100%;
height: 400px;
background-color: white;
text-align: justify;
display: flex;
}
.content .featureitem {
height: 100%;
flex: 1;
background-color: bisque;
}
.content:after {
content: "";
width: 100%;
display: inline-block;
}
<div class="content">
<div class="featureitem"></div>
<div class="featureitem"></div>
<div class="featureitem"></div>
</div>

How do I center an inline-block element of variable width?

I have an inline-block nav element that needs to be centered inside its parent container. But because the width is auto (because I need it to shrink to its content), I can't center it.
And I can't use text-align: center because I don't want the text content to be centered. I just want the mainNavigation element to be centered.
http://jsfiddle.net/vpvzmg3j/3/
How can I center this thing?
*{margin:0;padding:0;}
#mainNavigation
{
display: inline-block;
width: auto;
height: auto;
margin: 0 auto;
background-color: blue;
}
#mainNavigation div
{
width: auto;
float: left;
}
#mainNavigation div p
{
float: left;
width: 100%;
}
#mainNavigation div ul
{
width: auto;
height: auto;
float: left;
}
#mainNavigation div ul li
{
list-style-type: none;
display: inline;
}
<nav id="mainNavigation">
<div id="homeMenuContainer">
<p class="noDisplay">Home</p>
<ul id="homeMenu">
<li>Home</li>
</ul>
</div>
<div id="helpAndSupportMenuContainer">
<p>Help & Support</p>
<ul id="helpAndSupportMenu">
<li>User Guides</li>
<li>Video Tutorials</li>
</ul>
</div>
<div id="myAccountMenuContainer">
<p>My Account</p>
<ul id="myAccountMenu">
<li>Sign In</li>
<li>Register</li>
</ul>
</div>
</nav>
Is this what you are looking for?
The code updates :
#mainNavigation {
text-align: center; /*this does the trick with its child*/
height: auto;
width: 100%;
margin: 0 auto;
}
#mainNavigation div {
/*you said you want them on the left side*/
text-align: left;
background-color: blue;
display: inline-block;
vertical-align: middle;
margin-left: -4px; /*inline-block space remove*/
}
Demo: http://jsfiddle.net/vpvzmg3j/9/
add blow changes, that will center align the nav and same time left align the content:
#mainNavigation{text-align: left;}
.center-div{text-align:center;}
HTML
<div class="center-div"> <nav id="mainNavigation"> .....</nav> </div>

Prevent img from stretching display: table

I have a container with a fixed height, inside is an <article> with display: table; property. I want this <article> to fill his parent, both in height and width (height: 100%;width: 100%;).
The tricky part is this table has 3 children : a header and a footer, both with variable heights, and a third, main element, that should fill the remaining space.
The problem is, in that main element, I have an <img> bigger in height than the main container, stretching the table, despite the height: 100%; (illustration here :
Is there a way to limit the img's height so that it doesn't stretch the table ? I tried height/max-height: 100% with no luck.
As the code needs to be IE9 compatible, I can't use a flexbox layout, hence the display: table-* approach.
Here's the full code and a codepen, notice how the table is bigger than its parent container (<section> with red border), due to the img : http://codepen.io/anon/pen/xGJLLa
HTML
<section>
<article class="table">
<header class="row">
<h2>My header</h2>
</header>
<div class="mainrow row">
<div class="vmiddle">
<img src="http://lorempixel.com/200/300/abstract/" alt="Myimg" />
</div>
<div>
<p>Lorem ipsum [...]</p>
</div>
</div>
<footer class="row">
My Footer
</footer>
</article>
</section>
CSS
section {
border: 3px solid red;
height: 15em;
}
.table {
display: table;
height: 100%;
width: 100%;
}
.row {
display: table-row;
vertical-align: middle;
}
header { background-color: lightgrey; }
h2 {
display: table-cell;
padding: 0.5em 0;
vertical-align: middle;
}
.mainrow { background-color: lightyellow; }
.mainrow>div {
float: left;
height: 100%;
width: 50%;
}
.vmiddle {
font-size: 0;
text-align: center;
}
.vmiddle:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
img {
max-height: 100%;
max-width: 100%;
vertical-align: middle;
}
footer { background-color: lightblue; }
Thanks

How two make an img fill width in multi-column layout?

I'm working on my homepage and I'm trying two get a header with 3 columns.
The first column should be a logo, the second a navigation menu and the third a language switcher.
The nav and the lang. switcher should be align to the right and have auto width (so only the width needed by the content).
The img should be floated to the left and should fill the empty width (!but not bigger than 100% of the img width and with max-height!)
If the browser width gets smaller, than the img should be shrinked, but the right contents should be the same size.
.frame {
max-width: 90%;
height: 75px;
margin: 0 auto;
}
img {
max-width: 100%;
height: auto;
}
#top-header {
width: 100%;
height: 100px;
position: fixed;
z-index: 100;
text-transform: uppercase;
font-weight: bold;
background-color: #CCC;
}
#top-header .frame {
position: relative;
top: 10px;
}
#top-header .frame div {
white-space: nowrap;
}
#top-header .frame > div,
nav {
float: right;
}
#top-header .frame > div:first-child {
float: left;
max-width: 60%;
}
#mainmenu {
position: relative;
top: 25px;
}
#mainmenu .moduletable {
display: block;
position: static;
}
#mainmenu ul.nav.menu {
display: flex;
display: -ms-flexbox;
display: -webkit-flex;
margin: 0;
padding: 0;
list-style-type: none;
}
#mainmenu ul.nav.menu li {
font-size: .92rem;
-ms-flex: 1 1 auto;
-webkit-box-flex: 1;
-webkit-flex: 1 1 auto;
flex: 1 1 auto;
position: relative;
}
#mainmenu ul.nav.menu li a {
display: block;
margin: 10px;
}
<body>
<header id="top-header">
<div class="frame">
<div id="logo">
<div class="moduletable">
<div class="custom">
<p>
<img alt="logo" src="http://lorempixel.com/1637/100">
</p>
</div>
</div>
</div>
<div id="language-switcher"></div>
<nav id="mainmenu">
<div class="moduletable">
<ul class="nav menu">
<li class="item-101 current active"> Home
</li>
<li class="item-102 deeper parent"> About us
</li>
<li class="item-103"> XXXXXXXX
</li>
<li class="item-104"> XXXXXX
</li>
</ul>
</div>
</nav>
</div>
</header>
</body>
Here's an example of my current try at jsFiddle
Thanks and have a nice day :)
I think i understand now.
I changed your layout to work similar to a table with
dislpay:table
for the #top-header .frame
and dislpay:table-cell
for the logo and the menu
here is the fixed jsFiddle

how to apply vertical-align: middle at div

I've searched it at online and found some solution. But, nothing works at my project. At most of the solution, I've found:
<div class="a">
<div class="b">
Unknown stuff to be centered.
</div>
</div>
.a {
display: table;
width: 100%;
}
.b {
display: table-cell;
text-align: center;
vertical-align: middle;
}
By applying this technique, I've tried to build something like this: http://jsfiddle.net/L2GZx/1/
The text of left column only needed to be aligned middle vertically. But, it's not working with that technique:
<div class="row">
<div class="left">
<p>Sample Text</p>
</div>
<div class="right">
<p>Text</p>
<p>Input Element</p>
<p>Table</p>
<p>Image</p>
</div>
</div>
<div class="row">
<div class="left">
<p>Sample Text Sample Text Sample Text Sample Text Sample Text </p>
</div>
<div class="right">
<p>Text</p>
<p>Input Element</p>
<p>Table</p>
<p>Image</p>
</div>
</div>
<div class="row">
<div class="left">
<p>Sample Text</p>
</div>
<div class="right">
<p>Text</p>
<p>Input Element</p>
<p>Table</p>
<p>Image</p>
</div>
</div>
CSS:
.row {
width: 100%;
background: #ccc;
border-bottom: 1px solid #999;
display: table;
}
.left {
float: left;
width: 40%;
padding: 20px;
display: table-cell;
vertical-align: middle;
}
.right {
float: right;
background: #fff;
width: 40%;
padding: 20px;
}
How can I make the text of left-column aligned middle vertically? Note: I can't use any fixed height as content of each row will be different
Remove the floats. Floated elements can not also be displayed as table-cells. See updated Fiddle.
.row {
width: 100%;
background: #ccc;
border-bottom: 1px solid #999;
display: table;
}
.left {
width: 40%;
padding: 20px;
display: table-cell;
vertical-align: middle;
}
.right {
display: table-cell;
background: #fff;
width: 40%;
padding: 20px;
}
.left {
width: 40%;
padding: 20px;
display: table-cell;
vertical-align: middle;
}
removing" float:left " from .left style solves that issue, but using table and div together is not that good.Working Example
An alternative that I prefer in a situation like this is:
To not use display: table-cell, but rather use display:
inline-block.
To then use vertical-align: middle on the element.
Sample (revised) markup / css:
<div class="row">
<div class="left">
<p>Sample Text</p>
</div>
<div class="right">
<p>Text</p>
<p>Input Element</p>
<p>Table</p>
<p>Image</p>
</div>
</div>
CSS:
.row {
width: 100%;
background: #ccc;
border-bottom: 1px solid #999;
}
.row > div {
display: inline-block;
/* below 2 lines are IE7 hack to make inline-block work */
zoom: 1;
*display: inline;
/* below is consolidated css for both left / right divs */
width: 40%;
padding: 20px;
}
.left {
vertical-align: middle; /* or top or bottom */
}
.right {
background: #fff;
vertical-align: top; /* or middle or bottom */
}
All you have to do is to add a line-height to the left column and it will be automatically aligned (without vertical-align so you can remove it).
Here it is:
.left {
float: left;
width: 40%;
padding: 20px;
display: table-cell;
line-height:150px;
}
And here is your updated FIDDLE
Using your first example, try something like this. I'll explain how it works in the CSS.
<div class="a">
<div class="b">
Unknown stuff to be centered.
</div>
</div>
.a {
width: 100%;
position: relative; /* We want our parent div to be the basis of our absolute positioned child div */
/* You can set your height here to whatever you want */
}
.b {
position: absolute;
width: 100%; /* Set to be the full width, so that our text is aligned centered */
text-align: center;
top: 50%; /* Positions the top of the div at 50% of the parent height */
left: 0; /* Assures that the child div will be left-most aligned */
margin-top: -.5em; /* Moves the top of our div up by half of the set font size */
height: 1em; /* Sets our height to the height of the desired font */
}
Here is the JSFiddle link to see a live example: http://jsfiddle.net/L2GZx/20/
This is one of the best solutions to absolutely center text inside of a webpage. It does have it's limitations however seeing how it won't react to other elements inside the same parent and it also has to have a set height. So multiline text will have it's shortcomings with this method.
I hope this helps!