I am trying to put two divs side by side by using inline-block. For some reason, I am seeing a large empty space at one of the divs.
I have created a pen at http://codepen.io/weima/pen/eKEbD
The problematic div is the one with class .input-area. The empty space is gone if I remove display:inline-block from .input-area css, but then I wont be able to put these two divs side by side.
Is there anyway to solve this without using float?
You could add vertical-align:top to the element in order to fix the alignment issues.
UPDATED EXAMPLE HERE
.input-area {
vertical-align: top;
display: inline-block;
width: 450px;
border: 1px solid green;
}
The default value to the vertical-align property is baseline. If you are curious as to what this does, take a look at this answer.
Related
I have two divs set up with
display: inline-block.
I don't know why but the second div always slides a little bit down in comparision to the first
div
just like it would have a margin-top set up. How to make the second div fully inline with the first div and how to position the
<ul>
vertically and horizontally in the center of the second div ?
Here is Codepen : http://codepen.io/anon/pen/EJhBK
The borders are not intended in the final project. I've placed them to visually show the position of each divs.
Thanks !
#nav {
width: 446px;
display: inline-block;
border: 1px solid green;
vertical-align:top
}
add the alignment this should do the trick.
remove display: inline-block; and use float:left
I have a container which has left and right padding. Inside this container are two divs which should be side by side with a space between. Now because this space is fix but the site is responsive, the two text-divs must have a dynamic width. This is the reason why I can't use %-width.
I thought with text-align: justify it will work, but it doesn't.
Here is the JSFiddle: http://jsfiddle.net/qGw48/
Here the JSFiddle how it should look like: http://jsfiddle.net/4ekSm/ (it only works because of the %-widths)
just change:
div#container > div {
display: inline-block;
}
to:
div#container > div {
display: table-cell;
}
UPDATED FIDDLE
This can be done fairly easily if you make the width value take into account the padding. So I'm using the style:
box-sizing: border-box;
http://jsfiddle.net/qGw48/1/
This means that when you set a width then the padding will be included in that value.
Have you seen this http://jsfiddle.net/cUCvY/1/
I think It solves what your looking for
Two Divs next to each other, that then stack with responsive change
you could add some margin to one of the boxes ie
.left{
margin-right: 5px;
}
I was trying to center text in two adjacent divs and I can not understand what I am doing wrong.
Basically I have 2 divs each taken 50% of the window. The first div contains an image (which I successfully centered) and I am trying to center the text in the second div. So here is my Fiddle and I am using the following css:
.thumbnail-descr{
text-align: center;
min-height: 10px;
display: table-cell;
vertical-align: middle;
font-size: 26pt;
color: #bbb;
}
There is no point of having original DOM structure or CSS (the main thing is to have 2 divs taking all the width and one has a centered image another one has a text. How can I achieve it?
What I understand from the example is that you want to vertically center "Descr". There are several tricks to do that:
Adjust the padding and use box-sizing border-box to have better control of the height.
Use flexbox (still not broadly available): https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
If you know before hand that you'll have only one line of text you can use line-height.
(See the update for another option)
For example see this Fiddle:
.square{
width: 45%;
height: 200px;
border: 3px dotted #ddd;
display:inline-block;
margin: 0 10px 0 10px;
line-height: 200px;
}
But take a few things into account:
This will work only if you have one line of text, because on text wrap it will be broken.
This is not the normal use of line height, it's taking advantage of a side effect: text is vertically centered to the line-height.
This trick is used by some CSS frameworks (ie Bootstrap) to center the text on some components.
Update
I forgot another option, since you have one div inside the other you can use position: relative on the parent, and use absolute position for the child using top: 50% and a negative top margin. You'll need to setup the top margin to the half of the child height. (that's how modals are usually centered):
.square { position: relative; /*..*/ }
.thumbnail-descr{
position: absolute;
top: 50%;
margin-top: -10px;
/*...*/
}
See http://jsfiddle.net/diegof79/M4fKM/1/
Also you asked why your solution is not working... this can help to understand the reasons: http://phrogz.net/css/vertical-align/index.html
Before proceeding to giving you the solution, you could have he exact same result with a lot less code, giving so many classes for so little content can only lead to huge code.
The span class you are giving the text-align:center, doesn't fill up the whole width of the parent, so, where would it center the text since its width is equal to the text?
You can either put a 'text-align:center" to the span's parent, the square class, but I would use a different approach in general.
Not sure if you need a span.
If you remove span tag and use same css for the div styles, or simply ad a span class name to a your div class name- works perfectly.
i think the issue happen because the width in the description div
Try this suggestion:
warp the with div, the div will use thumbnail-descr class
<div class='square'>
<div class="thumbnail-descr"><span>Descr</span><div>
</div>
Update the thumbnail-descr
.thumbnail-descr{
text-align: center;
min-height: 10px;
background-color:red;
vertical-align: middle;
font-size: 26pt;
color: #bbb;
width:100%;
}
hope this help
I've got a few divs (multi-column page) with "display: inline-block" set. Shouldn't this prevent them from wrapping? I want them all side by side:
div.LabelColumn
{
display: inline-block;
padding: 10px 0 0 40px;
vertical-align: top;
}
div.DataColumn
{
display: inline-block;
padding: 10px 0 0 5px;
vertical-align: top;
}
To clarify, I want the DIVs side by side – i.e., shown as columns. I want them each to take up as much room as they need. Each of them, using what I want to display, should only take up about 100px, so there is easily enough room to display a few columns side by side. The first column will have a label, the second a bit of data, the third a label, and the fourth a bit of data.
To give a higher level view of the page, I have a div which I am floating left. To its right, I want the multiple columns of data. By the way, this is working in Chrome, but not in IE.
I would like the width to automatically adjust to be as wide as the text in the DIV, if possible.
Remove inline block, use floating, assign width, and padding margin.Here is the demo
Using inline-block does not prevent elements from wrapping. In fact, when applied to div elements it will do the opposite.
use float. for more information: http://css-tricks.com/all-about-floats/
If you want them all side by side, their containing element needs to have enough width to allow so. You can prevent wrapping causing breaks within the elements by applying whitespace: nowrap;, but this may have other effects depending on how you've structured your markup.
I'm trying to build a form that contains inputs, textareas and block elements, each with a label. In order to get a flexible grid, I'm using a table. For a matching vertical alignment of the labels and the inputs/textarea I set vertical-align: baseline; which works fine for inputs and textareas. But not for divs (see this jsFiddle). The label for the div is consequently aligned at the bottom of the cell, but I want it on the top, i.e. the baseline should be on the top.
How can I achieve this without changing the contents of the div or having to differ between labels for inputs/textareas and divs? Is there any way to force an invisible baseline to be at the top of a table cell?
Maybe I'm not approaching the problem from the right side, any insight is appreciated.
Use the code below for your problem:
td, label, textarea {
vertical-align: top;
}
Your div must have at least one character (for example a ).
For textareas, "vertical-align: baseline;" only works for Gecko.
As developer.mozilla.org said,
The HTML specification doesn't define where the baseline of a <textarea> is.
I found a workaround for that, but it changes the HTML.
I set vertical-align: text-top to the textarea, and to fix the gap caused by the height of the border-top and the padding top of the textarea, I set it a negative margin-top. And to avoid having the textarea overlapping all elements above it, I put a div around the textarea with a padding-top to counterbalance the gap.
HTML:
<div class="textarea-wrapper"><textarea id="b">nice vertical alignment</textarea></div>
CSS:
.textarea-wrapper {
display: inline-block;
padding-top: 1px; /* - margin-top of textarea */
}
.textarea-wrapper textarea {
vertical-align: text-top;
margin-top: -1px; /* - (border-top-width + padding-top) */
}
I updated your jsFiddle.