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
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'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;
I have a container div with the following attributes:
#cat_container{
margin:0;
padding:5px;
border:1px solid red;
min-height:200px;
}
Inside there are multiple left floating div's. The problem is that they don't force the containing div to expand downwards, instead just overlapping and continuing outside the container div's boundary.
Left floating div's:
.cat_wrap{
border: 1px solid #000;
width:100px;
min-height:120px;
margin:0 10px 5px 0;
padding:0;
float:left;
}
If I take the left float out, the containing div does expand vertically as it should do. So how do I get the inner divs to float left but also expand the container div vertically?
you need to set overflow for the main div. overflow: auto; this will force the div container to expand and adapt to the content.
#cat_container{
margin:0;
padding:5px;
border:1px solid red;
min-height:200px;
overflow: auto;
height: auto !important;
}
This is a common problem and is fixed using a "clearfix" solution. Setting overflow will fix this problem, however there are better solutions, like the following:
.mydiv:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .mydiv { zoom: 1; } /* IE6 */
*:first-child+html .mydiv { zoom: 1; } /* IE7 */
The main point of this solution is to trigger thehasLayoutproperty of the div. Fortunately it is enough for IE 6/7 to set the zoom to 1 in order to trigger that. Modern browsers which support the:afterpseudo element can use the first statement, which is cleaner and does not affect the overflow property.
Please note that you should avoid using the!importantstatement as suggested in the earlier answer as that is not good css. Moreover it will not allow you to control the height of the div if you wish to and does not do anything to solve the problem.
It's 2016. A good way of doing this is using flex property.
.container {
display: flex;
flex-wrap: wrap;
}
Then the child element can get rid of the old magical float property.
Check out this JSFiddle to see the effect.
Note: when the heights of children elements are not uniform, the flex way will behave differently with the float way. But it is hard to tell which one is correct.
container{
overflow: auto;
}
Insert the following at the end, before the enclosing the container
<div style="clear:both"></div>
The container will automatically expand to the the last clear:both
I am trying to add a carousel-like animation to my photographic calculator
I am extremely new to javascript/html/css so I have been having some troubles doing this. :)
My idea was to fill in each table row with divs generated from an array, with all but the three divs beeing hidden by overflow:hidden of the outer container.
Here if my test jsfiddle:
table {
width:80%;
background:#ffff00;
border: 1px solid black;
position:relative;
overflow:hidden;
}
.test {
width:33.3333%;
height:100%;
background:cyan;
text-align:center;
vertical-align:center;
float: left;
position: relative;
left:0%;
top: 0px;
}
The problem is if I try to add more than 3 divs (set n=4), they wrap to the next line while I want them to stay on the same line. If I use absolute positioning then I can't use the overflow hiding (or can I?).
I am hoping there is an easy solution to this. Help?
The float: left causes elements to wrap when filling all available horizontal space. What you need to do is arrange your divs inline and make elements in your carousel not wrap:
http://jsfiddle.net/Wdnw9/19/
CSS
#box { white-space: nowrap; }
.test{
...
display: inline-block;
}
i know that this question has been asked many time but none of the solution is working for me. i simply want to align one label inside one div that is associated with a twitter-bootstrap class. but it is not being aligned. I have tried horizontal alignment with this and it was working fine. without bootstrap it was working fine but with bootstrap it stopped working.
any idea how it will work ?
Address the label instead
.center{
width: 100px;
height: 100px;
border: 1px solid red;
display: table;
}
.center label {
display: table-cell;
vertical-align: middle;
}
forked jsFiddle http://jsfiddle.net/s5dJH/
Here you go
with the use of
display:table;
and
display:table-cell;
vertical-align:middle;
This way the label will always be centered, even if you resize the box
http://jsfiddle.net/s7Wb4/2/
You can use line-height to your label and set it the same height as your div. This will align it perfectly.
See this demo.
try this
http://jsfiddle.net/s7Wb4/9/
.center{
width : 100px;
height : 100px;
display : table-cell;
float:none !important;
vertical-align : middle;
border : 1px solid red;
}