I'm trying to format a HTML DIV in a way that the margin-top is set responsively based on the div's height: jsfiddle
There's another div inside the wrapper, that has a display: none set to it, but it may change when the user inputs a wrong password. Thing is, there is a div below that it's being pushed down when display: content is set to the second div. I want the content of the page to responsively go upwards instead of downwards.
How's now:
How it should be:
Given your example, your goal and your preference to avoid flexbox due to IE10, I think your best option is to use display:table for this container.
With this, you have the ability to use vertical-align properties in the "table-cell".
Check the example below. I added a toggle button to show/hide your captcha for demo purposes. May want to view it full screen to get the effect.
$("#toggle").on('click', function() {
$(".captcha").toggle();
});
html,body {
height: 100%;
}
.outer-wrapper {
height: 100%;
width: 100%;
background: #eeeeee;
display: table;
}
.inner-wrapper {
height: 100%;
width: 100%;
display: table-cell;
vertical-align: middle;
height: inherit;
}
.login-wrapper {
background-color: #172238;
color: white;
width: 200px;
text-align: center;
height: auto;
display: block;
margin: 0 auto;
}
.captcha{
margin-top: 250px;
display: content; // This one changes
}
.homologation-line {
min-width: 200px;
background-color: #ffd800;
color: black;
text-align: center;
height: 30px;
}
#toggle {
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="toggle">toggle captcha</button>
<div class="outer-wrapper">
<div class="inner-wrapper">
<div class="login-wrapper">
<p>Login</p>
<div class="captcha">
ENTER THE DIGITS:
</div>
</div>
<div class="homologation-line">
HOMOLOGATION
</div>
</div>
</div>
Related
Here's image displaying my problem
CSS for wrapper is
display: block;
text-align: center;
CSS for each DIV is
margin: 30px 10px;
display: inline-block;
height: 100%;
text-align: center;
width: 30%;
What could be causing this? I tried fiddling with flex but the outcome is the same.
You said you fiddled with flexbox. However to make use of it, you should not just fiddle with it, but study how it works.
To achieve what you want, use display: flex; on the wrapping div and remove height property from your contained divs.
Run this visual example to see how it works:
.parent {
padding: 20px;
background: red;
width: 400px;
height: 100px;
display: flex;
}
.child-1 {
background: yellow;
width: 100px;
}
.child-2 {
background: orange;
width: 100px;
}
<div class="parent">
<div class="child-1">
Hello
</div>
<div class="child-2">
Multi
<br>
Line
<br>
Content
</div>
</div>
Following this answer I tried to vertically center my header elements, however I'm having trouble since there's a container element in between that makes sure they're contained within a certain max-width and centered. I applied display: table-cell to this element and now its max-width doesn't work (occupies the whole screen width regardless of its max-width). How to solve this problem?
Markup:
<header class="banner">
<div class="container">
<a class="header__branding" href="<?php bloginfo( "wpurl" ); ?>">
<img src="<?php bloginfo( "template_url" ); ?>/dist/images/baia_logo.svg" />
</a>
<nav class="nav_primary">
<?php wp_nav_menu( array( 'menu' => 'main menu' ) ); ?>
</nav>
</div>
</header>
CSS:
.banner {
height: 160px;
width: 100%;
display: table;
background: url(../images/header.jpg) 50% 50% repeat-x;
}
.container {
max-width: 1500px;
margin-left: auto;
margin-right: auto;
overflow: hidden;
vertical-align: middle;
display: table-cell;
}
.header__branding {
float: left;
width: 150px;
height: 52px;
display: block;
}
.nav_primary {
float: right;
}
Here is an answer to your question exactly. I will leave the old one as an alternative.
The problem
From CSS 2.2 Specification:
In CSS 2.2, the effect of 'min-width' and 'max-width' on tables, inline tables, table cells, table columns, and column groups is undefined.
So it seems there is no way of adding a max-width to a table-cell currently. You could add a table-cell to each side of the container and set a 1500px width to the container with media queries but this isn't preferred as there is a workaround.
A solution
If you want to limit the width of the nav provided in your link to 1500px you can add a container like you did but the block structure should be a little different.
Now you have:
banner as a table
container as a table-cell
header_branding and nav_primary as blocks inside the cell
Consider changin the structure to following:
banner to a block
container to a table
header_branding and nav_primary to table-cells
The banner is only a 100% wide background element.
Then give the container a max-width of 1500px like you did but remember to give it a 100% width also. Otherwize it wont try to expand to the whole width of the screen as it doesn't have to but now the max-width will be a limiting factor.
Here is a CodePen example provided here but with a container limiting the width to 1500px.
Your example modified:
.banner {
width: 100%;
}
.container {
max-width: 1500px;
width: 100%;
height: 160px;
margin: auto;
overflow: hidden;
display: table;
}
.header_branding, .nav_primary {
vertical-align: middle;
display: table-cell;
}
.header_branding {
width: 150px;
height: 52px;
}
.nav_primary {
text-align: right;
}
/* To make edges visible for the demo */
.banner, .container, .header_branding, .nav_primary {
background: rgba(0, 0, 0, 0.3);
border: 1px dotted red;
}
<header class="banner">
<div class="container">
<a class="header_branding" href="">
<img src="" />
</a>
<nav class="nav_primary">
[Menu items]
</nav>
</div>
</header>
You can define a height or max-height for .container then use flex on header:
.banner {
height: 300px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.container {
max-width: 500px;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
CodePen: http://codepen.io/theblindprophet/pen/NAzAWj
This will not work for some versions of IE, check here for details.
With display: inline-block:
/* This parent can be any width and height */
.block {
text-align: center;
/* May want to do this if there is risk the container may be narrower than the element inside */
white-space: nowrap;
}
/* The ghost, nudged to maintain perfect centering */
.block:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
/* The element to be centered, can also be of any width and height */
.centered {
display: inline-block;
vertical-align: middle;
width: 300px;
}
CodePen: http://codepen.io/theblindprophet/pen/XKYKdy
Reference: CSS Tricks
Maybe a
box-sizing: border-box;
property is what you are looking for ;)
One possibility to vertically align elements inside the container it to use line-height as you know the height of your header. The downside of this is that you cannot have more than one row of text but usually this is the intent in the first place.
I tried to strip your code to the minimum and made a working demo here.
Basically if the container is 160px tall you can add line-height of 160px for the menu items to vertically align them to the middle.
To vertically align your image, I used the accepted method from this question.
To future proof, here is the code used in my demo:
* {
margin: 0; /* Illustrative */
padding: 0; /* Illustrative */
}
.banner {
background: #222; /* Illustrative */
width: 100%;
}
.container {
background: #aaa; /* Illustrative */
max-width: 800px; /* Change to desired value */
margin: auto;
overflow: hidden;
}
.header__branding {
background: #555; /* Illustrative */
float: left;
width: 150px;
height: 160px;
display: block;
}
.header__branding span {
height: 100%;
display: inline-block;
vertical-align: middle;
line-height: 160px;
}
.nav_primary {
float: right;
}
.nav_primary a {
line-height: 160px;
}
img {
background: #3867EA; /* Illustrative */
width: 100px; /* Illustrative */
height: 100px; /* Illustrative */
vertical-align: middle;
display: inline-block;
}
<header class="banner">
<div class="container">
<a class="header__branding" href="#">
<img alt="Logo" /><span>Title</span>
</a>
<nav class="nav_primary">
<a>Menu1</a> <a>Menu2</a> <a>Menu3</a>
</nav>
</div>
</header>
Im trying to vertically centre an image using CSS display table-cell. WHy is my code not working? It looks like it should according to css-tricks.css
http://css-tricks.com/centering-in-the-unknown/
http://jsfiddle.net/sNE4y/1/
.cont {
background-color: grey;
position: fixed;
height: 100%;
width: 100%;
display: table;
}
img {
display: table-cell;
vertical-align: middle;
}
<div class="cont">
<img src="http://www.quarktet.com/Icon-small.jpg" />
</div>
The img tag doesn't need display: table-cell; and vertical-align: middle; its parent does.
So you need:
.cont {
background-color: grey;
position: fixed;
height: 100%;
width: 100%;
display: table-cell;
vertical-align: middle;
}
img {
}
<div class="cont">
<img src="http://www.quarktet.com/Icon-small.jpg" />
</div>
Also, it appears that position: fixed is giving this problems, as well, and I had to remove that to get it to work here: http://jsfiddle.net/sNE4y/6/
If you still need position: fixed; (I'm assuming you do) then perhaps you need another parent div, but that all depends on how you want it designed.
I'm a newbie when it comes to CSS. I'm working with a HTML content which I would want to look like 3 columns in a single row. I've the following HTML with embedded style:
<style type="text/css">
#main {
width: 100%;
height: 250px;
}
#left-side {
width: 20%;
float: left;
height: 100%;
}
#in-the-middle {
width: 60%;
text-align: center;
display: inline-block;
height: 100%;
}
#right-side {
width: 20%;
display: inline-block;
height: 100%;
}
</style>
<div id="main">
<div id="left-side" align="left">
Hello left
</div>
<div id="in-the-middle" align="center">
Hello center
</div>
<div id="right-side">
Hello right
</div>
</div>
Looks simple, but unfortunately the "Hello right" text gets displayed at the left side of the page. I have set the display for the #right-side to be inline-block, expecting it to show up adjacent to the "Hello center" div, but it doesn't seem to take effect. Can anyone see what I'm missing here?
Since the elements become rendered inline, white-space in your HTML code will affect the rendering. Since there is whitespace between your divs, the browser will render several pixels of white spaces between them.
If you want to use inline-block without float, the solution is to remove the white spaces between each ending tag </div> and opening <div> tag, like his:
<div id="left-side">
Hello left
</div><div id="in-the-middle">
Hello center
</div><div id="right-side">
Hello right
</div>
See live action here: http://jsfiddle.net/LbNGq/
Use your right-side div width as slightly small then it shows in the same column
#right-side {
width: 19%;
display: inline-block;
height: 100%;
}
See Demo
Use float:left with display: inline-block
try this css script
<style type="text/css">
#main {
width: 100%;
height: 250px;
display: inline-block;
}
#left-side {
width: 20%;
float: left;
height: 100%;
}
#in-the-middle {
width: 60%;
text-align: center;
display: inline-block;
height: 100%;
float:left;
}
#right-side {
width: 20%;
display: inline-block;
height: 100%;
float:left;
}
i have a problem with float divs. i try everything, i search everywhere but i cannot find (maybe i use wrong keywords to search, i dont know)
here is the codes:
<div class="mbody">
<div class="mheader"> header content </div>
<div class="mmenu"> menu content </div>
<div class="mcontent">
<div class="content-right">
<div class="r-cont">
<div class="r-cont-header"> header goes here </div>
<div class="r-cont-content"> <p>• There is a sample right content...</p></div>
</div>
</div>
<div class="content"> contents goes here </div>
</div> <!-- mcontent ends here -->
<div class="mfooter"> footer content </div>
</div> <!-- mbody ends here -->
and here goes css codes:
.mbody {
clear: both;
width: 920px;
position: relative;
overflow: visible;
height: auto;
margin: 0px auto;
}
.mheader {
height: 163px;
width: 856px;
background-image: url(img/header.png);
padding: 32px;
}
.mmenu {
height: 40px;
width: 920px;
background-image: url(img/menu-bg.png);
}
.mcontent {
width: 880px;
overflow: visible;
padding: 20px;
height: auto;
background-color: #FFF;
clear: both;
}
.content-right {
width: 200px;
float: right;
}
.content {
margin-right: 220px;
}
.r-cont {
clear: both;
width: 200px;
}
.r-cont .r-cont-header {
background-image: url(img/menu-head.png);
height: 32px;
width: 168px;
line-height: 32px;
color: #FFF;
padding-left: 32px;
font-weight: bold;
font-size: 16px;
}
.r-cont .r-cont-content {
background-color: #F8AF6B;
font-size: 12px;
padding: 6px;
}
.mfooter {
height: 60px;
width: 920px;
background-color: #F58220;
background-image: url(img/footer-bg.png);
clear: both;
}
here we go...
if .content's content is smaller then .content-right, .mcontent's heights is equal to m.content's min-height, so i didn't set it. it equals to .mcontent's padding-top and bottom. left out area has not any background. i cannot set .mbody background because i use rounded the corners with JavaScript and if i use a background corner's outside has the color of .mbody ...
my customers still use ie6, so i cannot any css effects and css3 codes...
thanks in advance...
.class1 .class2 cause problems in IE6 try to use #id1 .class1 like these places .r-cont .r-cont-content
I think you're problem is what's called the 'collapsed parent', i.e. the container div is not as tall as the content within in.
If this is your problem then there are four solutions. I would recommend changing the overflow value of your .mcontent div to hidden (from visible). This solution is compatible with IE6 as you have set a width of the parent.
.mcontent {overflow: hidden;}
Read the section "Fixing the Collapsed Parent" at the link below for more information (and the other three solutions):
http://www.smashingmagazine.com/2009/10/19/the-mystery-of-css-float-property/