I'm trying to vertical align a div but it's not working at all for some reason. What am I doing wrong?
body {
border: 1px solid red;
height: 500px;
}
#contactUs {
border: 1px solid blue;
vertical-align: bottom;
}
<div id = "contactUs"> Contact Us </div>
Note: I do not want absolute positioning answers.
The vertical alignment effort didn't work because the vertical-align property applies only to inline and table-cell elements. (See the spec for details.)
You can align the #contactus div at the bottom of the containing block (body) with flexbox.
body {
display: flex; /* convert element to flex container */
flex-direction: column; /* create a vertical alignment for child elements */
justify-content: flex-end; /* align child elements at the end of the container */
border: 1px solid red;
height: 500px;
}
#contactUs { border: 1px solid blue; }
<div id = "contactUs"> Contact Us </div>
To learn more about flexbox visit:
Methods for Aligning Flex Items
Using CSS flexible boxes ~ MDN
A Complete Guide to Flexbox ~ CSS-Tricks
What the Flexbox?! ~ YouTube video tutorial
Note that flexbox is supported by all major browsers, except IE 8 & 9. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add all the prefixes you need, post your CSS in the left panel here: Autoprefixer.
If you only need the "Contact Us" text vertically aligned you can set #contactUs line-height to 500px.
line-height:500px;
Related
One of the solutions I learned is to set the display of the parent div element to table-cell and use the vertical-align property.
While this works, in my case I also need the parent div to float right, but it breaks the table-cell trick and the whole thing does not work now.
So my question is simple: Why exactly is this happening, and more importantly, how can I achieve the effect I want?
div {
/* float: right; uncomment this will make this not working */
display: table-cell;
vertical-align: middle;
height: 60px;
border: 1px solid red;
}
<div>
<input>
</div>
Corresponding JSFiddle
CSS3 provides flexbox. All you need is this:
body {
display: flex; /* create flex container */
justify-content: flex-end; /* align child to right edge */
}
div {
display: flex; /* create nested flex container */
align-items: center; /* center child vertically */
height: 60px;
border: 1px solid red;
}
<div>
<input>
</div>
Benefits of flexbox:
minimal code; very efficient
centering, both vertically and horizontally, is simple and easy
equal height columns are simple and easy
multiple options for aligning flex elements
it's responsive
unlike floats and tables, which offer limited layout capacity because they were never intended for building layouts, flexbox is a modern (CSS3) technique with a broad range of options.
To learn more about flexbox visit:
Methods for Aligning Flex Items
Using CSS flexible boxes ~ MDN
A Complete Guide to Flexbox ~ CSS-Tricks
What the Flexbox?! ~ YouTube video tutorial
Browser support:
Flexbox is supported by all major browsers, except IE 8 & 9. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add all the prefixes you need, use Autoprefixer. More details in this answer.
Wrap everything with a div set to float:right.
updated your fiddle with few tweaks. hope this works for you.
Please check http://jsfiddle.net/53ALd/3780/
html :
<div >
<input class="form-control" id="txtWOFastNavigation">
</div>
css :
div {
float: right;
height: 160px;
border: 1px solid #000;
position: relative;
background: red;
width: 104px;
}
div .form-control{
width: 100px;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
I am developing a forum theme at the moment, and am trying to figure out how to do the last bits, the posts. Example of what I'd like to make:
So the key things to keep in mind here is how User Info and Post Content have different colors, as well as the Post Description in the grid is in the same column as the Post Content.
Using a simple div setup doesn't work, as I need the User Info height to control the height of Post Content and vice versa. Having a wrapper element with the background color of User Info would work, but only if the Post Content is taller than User Info.
I am really just looking for brainstorming here. What would be the best way to go about doing this?
I created a draft of what the final result should look like here:
It should be fine with the code you have provided altered slightly, but I have some questions.
1) You commented the description has a set height? Does it need to? Worst case scenario I just adjust this height in media queries.
2) I probably need to have some columns within Post description too. As you see in my draft there's a left container with the timestamp (let's call that desc-meta) of the post, and to the right there's a permalink with ID (let's call that desc-ID). There's also a set of post options (Edit, report etc.) between the two (let's call that desc-edit), but aligned to the right side of the description. From my brief understanding of flex I can't figure out how to always keep the desc-meta and desc-ID on the same row, while desc-meta can be moved down if needed on smaller screens.
This layout can be achieved with CSS flexbox.
For both columns to have equal height we can use the align-items property, which controls space distribution among flex items on the cross-axis.
The default value is stretch, which enables items to extend the full length of the container.
.container-outer { align-items: stretch; }
We can also use the flex-grow property to control how free space is distributed among flex items in the main-axis.
.post-content { flex-grow: 1; }
The code below renders this (with borders only for demo purposes):
.container-outer {
display: flex;
align-items: stretch; /* tells boxes to stretch vertically (default value) */
width: 75%;
min-height: 250px;
border: 5px solid mistyrose;
}
.user-info {
display: flex; /* nested flexbox, to enable flex properties */
flex-direction: column;
justify-content: center;
align-items: center;
width: 25%;
border: 3px solid red;
font-family: verdana;
font-weight: bold;
font-size: 2em;
color: red;
box-sizing: border-box;
overflow: auto;
}
.container-inner {
display: flex; /* nested flexbox */
flex-direction: column;
width: 100%;
border: 3px dashed black;
overflow: auto;
}
.post-description {
display: flex; /* nested flexbox */
justify-content: center;
align-items: center;
height: 50px; /* fixed height */
border: 3px solid green;
font-family: verdana;
font-weight: bold;
font-size: 1.5em;
color: green;
box-sizing: border-box;
overflow: auto;
}
.post-content {
display: flex; /* nested flexbox */
justify-content: center;
align-items: center;
flex-grow: 1; /* box takes all available space (stretch, basically) */
border: 3px solid blue;
font-family: verdana;
font-weight: bold;
font-size: 2em;
color: blue;
box-sizing: border-box;
overflow: auto;
}
<article class="container-outer">
<section class="user-info">USER<br>INFO</section>
<div class="container-inner">
<section class="post-description">POST DESCRIPTION</section>
<section class="post-content">POST CONTENT</section>
</div><!-- end .container-inner -->
</article><!-- end .container-outer -->
jsFiddle
Regardless of how much or how little content is placed in USER INFO or POST CONTENT, both columns will remain equal height.
The container is given a minimum height (min-height: 250px;) to ensure it doesn't get too small if there is no content in either box.
flex-grow is only applied to POST CONTENT because USER INFO already expands full height by inheriting height from the container, and POST DESCRIPTION has a fixed height, so it won't expand.
Browser support: Flexbox is supported by all major browsers, except IE < 10. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add prefixes use Autoprefixer. More details in this answer.
My initial thoughts would be to do something like this:
<div class="one">
</div>
<div class="container">
<div class="two">
</div>
<div class="three">
</div>
</div>
And then give the left div a display of inline-block and the right container of inline-block, and the inner divs remain block.
.one {
display: inline-block;
}
.container {
display: inline-block;
}
I would use display: table with the corresponding rows/cells. See this http://jsfiddle.net/ycsmo9vg/ it should be easy extend this for your needs
notice how in the second cell, I have 2 divs, 1 has class row and the second div is plain (no class needed). This is up to you. Since a div is a block level element it will automatically take a row. Though I'd say keep it consistent and have a class of row wherever you have a row
I am running into this problem with how divs align in Firefox and Chrome.
I need two divs with undefined widths to be side by side in a wrapping div. The idea is to produce a long scrollbar full of content.
The problem I am having is that in Firefox 22.0 the divs end up stacking while in Chrome 28.0 it is working fine. Here are two screenshots of the problem.
Firefox
Chrome
Is this a Firefox quirk? Is it an issue that can be fixed with a display or clear property?
Instead of floating the elements to the left, you can use display: inline-block; with white-space: nowrap;
Demo
#wrapper {
display: inline-block;
border:2px solid red;
white-space:nowrap;
overflow:hidden;
}
#images {
height:200px;
border:4px solid blue;
display: inline-block;
overflow:hidden;
}
#thumbs {
height:100px;
border:4px solid green;
display: inline-block;
}
Instead of using float: left use display: inline-block; and vertical-align-top in both the child divs style class.
Additionaly could you be use a vertical-align: top to the image properties to align images to the top of div container
What I am trying to do here is to make the <div>s (9 in my demo) to arrange like δΊ• (a 3x3 grid). My approach is to use the flexible box layout to make them spread evenly across the whole area.
<div id="container">
<div>1</div>
...
<div>9</div>
</div>
#container {
display: -webkit-box;
-webkit-box-align: stretch;
-webkit-box-orient: horizontal;
width: 300px;
height: 300px;
}
#container > div {
-webkit-box-flex: 1;
border: 1px solid black;
height: 50px;
}
However, this will make them line up in a single axis. I can change the orientation to vertical or horizontal, but not both. What is a better (and working) way to achieve this with only CSS? The float: left trick won't work here because the size of the container will vary.
You're actually looking at the wrong specification. The 2009 specification is being phased out in favor of the CR draft from Sept. 2012. To make a 3x3 grid with flexbox, you need to enable wrapping. The property from the 2009 draft for that was called box-lines, but the last remaining browser that follows that spec (Firefox) never implemented it.
http://jsfiddle.net/aUSWE/1/ (prefixes not included)
#container {
display: flex;
flex-flow: row wrap;
width: 300px;
height: 300px;
border: 1px solid black;
resize: both;
overflow:auto;
}
#container > div {
flex: 1 1 33%;
border: 1px solid black;
box-sizing: border-box;
}
http://www.w3.org/TR/2011/WD-css3-flexbox-20110322/#flex-order
It seems to me like the w3 standard for flexbox explicitly requires them to be either horizontal (LR/RL) or vertical (TB/BT), so I don't believe you can explicitly call for a 3x3 grid. As noted in the comments, the simplest solution seems to be three vertical flexbox divs with 3 horizontal flexbox divs inside of them (or the inverse). Unnecessary divs, indeed, but what else is CSS about? :)
You might look into grid-layout (http://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/ ) since that seems like it's the grid cousin of flexbox. (Of course, that would be if you're designing solely for IE 10... http://caniuse.com/css-grid )
Consider the following example: (live demo here)
HTML:
<div id="outer_wrapper">
<div class="wrapper">
<a><img src="http://img.brothersoft.com/icon/softimage/s/smiley.s_challenge-131939.jpeg" /></a>
</div>
<div class="wrapper">
<a><img src="http://assets.test.myyearbook.com/pimp_images/home_page/icon_smiley.gif" /></a>
</div>
<div class="wrapper">
<a><img src="http://thumbs3.ebaystatic.com/m/mvHqVR-GDRQ2AzadtgupdgQ/80.jpg" /></a>
</div>
<div class="wrapper">
<a><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/718smiley.png/60px-718smiley.png" /></a>
</div>
</div>
CSS:
#outer_wrapper {
background-color: #bbb;
width: 350px;
}
.wrapper {
display: inline-block;
border: 1px solid black;
width: 90px;
height: 100px;
text-align: center;
margin-right: 20px;
}
a {
display: inline-block;
width: 80px;
height: 80px;
border: 1px solid red;
}
The output is:
Why the black wrappers are not vertically aligned ? How could I fix that ?
The images are horizontally centered in the red boxes. How could I vertically center them ?
Please do not change the HTML, if possible.
Observe that it is the base of the images which are aligned. This is to do with the vertical-align; if you use a value for vertical-align on .wrapper other than baseline, like top, middle or bottom, it will fix it. (The difference between these will only be apparent if you put some text inside the div as well.)
Then you want to centre the images in their 80x80 spots. You can do that with display: table-cell and vertical-align: middle on the a (and add line-height: 0 to fix a couple more issue). You can then play further with mixing these groups of styles in the a tag, the .wrapper, or even throwing away the .wrapper if it isn't necessary (it would only be needed - if it is at all - if you're putting text in with it).
Result, with no further tweaks than what I've mentioned here: http://jsfiddle.net/jESsA/38/.
This will work on all decent browsers, and even on IE8/9, but it won't work on IE6/7. A technique for solving this which should work in IE6/7 is this: on the a, set display to block and alter the line-height from 0 to 78px (I'm not entirely clear on why 80px makes it shift down one pixel, but it does; if I thought about it long enough I could probably figure out why), and shift the vertical-align: middle to the img child. Final result: http://jsfiddle.net/jESsA/44/
You can try assigning a vertical-align attribute on the img tag. Vertical align is relative to the line box which means you need to set the line box as tall as the height of the a tag. So these changes are needed in your CSS markup:
#outer_wrapper {
overflow: hidden; /* required when you float everything inside it */
}
.wrapper {
/* display: inline-block is not required */
/* text-align: center is not required -- see below */
float: left; /* float all wrappers left */
}
a {
display: block; /* block display required to make width and height behave as expected */
margin-left: 4px; /* shift the block to make it horizontally centered */
margin-top: 9px; /* shift the block to make it vertically centered */
text-align: center; /* center inline content horizontally */
line-height: 80px; /* line height must be set for next item to work */
}
img {
vertical-align: middle; /* presto */
}
Demo here.
Take a look at this:
http://jsfiddle.net/jESsA/37/
Basically you use float: left to put your boxes inline and a background image instead of an img tag. Because you are using float, you need to clear after to cancel the float effect on other elements.
I changed the DIV tags to A tags so you can have a link on the hole block and keep it simple. But you can keep it as a DIV tag and put an A block inside though (or use JavaScript)
.wrapper {
float: left;
}
http://jsfiddle.net/jESsA/3/
You could check this out: http://www.brunildo.org/test/img_center.html
may be this will help you
http://css.flepstudio.org/en/css-tutorials/centered-vertical-horizontal-align.html
it helped me :)