I have 3 divs on my page, that css: display: inline-block.
.utilitiesContent div
{
display: inline-block;
width:33%;
}
Here is fiddle (don't pay attention that it has cyrillic letters). As you can see it is like stairs, not exactly in one line. How can I make it to has the same height level?
.utilitiesContent div
{
display: inline-block;
width:33%;
vertical-align: top;
}
you are looking for vertical-align property, I used top , you can play around and see what you like best.
updated fiddle here
I strongly recommend using width: 32%; 33% is just cutting it pretty close , and can jump down to the next row in certain cases
.utilitiesContent div
{
display: inline-block;
width:32.5%;
}
<div class="utilitiesContent">
<div>div 1</div>
<div>div 2</div>
<div>div 2</div>
</div>
DEMO just decrease width to 0.5% FROM 33% to 32.5%
.utilitiesContent div
{
display: inline-block;
width:32.5%;
}
Inline block will by default put space between the elements based on the font size. If you reduce the font size to zero you can remove the spacing.
.utilitiesContent div
{
display: inline-block;
width:33.33%;
font-size:0;
vertical-align: top;
}
Then just set the font size to the elements inside the inline-block element.
See my fiddle: http://jsfiddle.net/4ear5n8n/6/
Related
I have two divs next to each other that are displayed using inline-block. As the viewport shrinks, I'd like the text in the leftmost div to wrap before the divs collapse vertically, but I can't seem to make that happen. JSFiddle here.
In the demo, when the viewport shrinks "Should stay in block" is pushed below the title block, whereas I'd like the "Lots of text I want to wrap" to start wrapping to keep the two blocks on the same line.
Use display: table-cell; Instead of display:inline-block will solve your issue.
.title {
display: table-cell;
vertical-align: top;
}
.box {
display: table-cell;
vertical-align: top;
}
<div class="title">
<h1>Hi</h1>
<h2>Lots of text I want to wrap</h2>
</div>
<div class="box">
Should stay in a block
</div>
Check your updated Fiddle Here.
Can't you make them to fill the body or the container giving them a 50% width?
JSfiddle
EDIT: JSfiddle with a wrapper
.title {
display: inline-block;
vertical-align: top;
background-color:red;
width:50%;
}
.box {
display: inline-block;
vertical-align: top;
background-color:blue;
width:50%;
}
<div class="title">
<h1>Hi</h1>
<h2>Lots of text I want to wrap</h2>
</div><div class="box">
Should stay in a block
</div>
Edit: remember to not wrap after the first div, and make sure that there are not spaces </div><div class="box"> so you can use 50% preserving the inline-block
First, I know about the letter-spacing problem that causes horizontal spaces between inline-block elements. This is not another of those questions.
Instead, I have a full-width inline-block element with a small height, and I want its next neighbor to abut it directly from below, but there's always a space between them that looks to be about the line-height.
I've tried every combination of vertical-align, font-size, and line-height I can think of. Anyone have a creative way of removing that whitespace?
.blue{background:blue;}
.red{background:red;}
.blue,.red{
width: 100%;
height:5px;
display: inline-block;
}
<div class="blue"></div>
<div class="red"></div>
Why is this happening?
The font-size of the parent element, in this case body, affects the inline-block divs, essentially treating them like text.
How can we keep the elements inline-block with no white space?
The parent element, body in this example, is given font-size: 0, you would then give the child elements a font-size:
body {
font-size: 0;
}
.blue{background:blue;}
.red{background:red;}
.blue,.red{
width: 100%;
height:5px;
display: inline-block;
}
<div class="blue"></div>
<div class="red"></div>
Should we do this?
I can't think of a practical use of this, use display: block.
Float them?
.blue{background:blue;}
.red{background:red;}
.blue,.red{
width: 100%;
height:5px;
display: inline-block;
float:left;
}
<div class="blue"></div>
<div class="red"></div>
if you want to use 100% width, then why not use display: block instead of inline-block.
Note:
If you want to use float, its a good practice to clear it after.
while using float, display property is not required as Float takes care of it.
.blue{background:blue;}
.red{background:red;}
.blue,.red{
height:5px;
display: block;
}
<div class="blue"></div>
<div class="red"></div>
I have a div called text, and next to it I want a button which should take up the remaining width of the screen so I set the width of the button to 100%, but it takes that as 100% of the screen and appears below the text div. How can I make it so the button is 100% the width of its parent div and not the whole screen so it all appears on the same line, without setting a width for the text div? Here is a demo. Thank you.
css
#text{
float:left;
}
div{
border:1px solid red;
}
button{
width:100%;
}
html
<div id = "text">text</div>
<div>
<button>button</button>
</div>
You should be able to achieve this using display: table-cell css:
Try something like this: DEMO
<div class="container">
<div class="cell" id="text">text</div>
<div class="cell">
<button>button</button>
</div>
</div>
div.container {
width: 100%;
display: table;
}
div.cell {
border:1px solid red;
display: table-cell;
}
button {
width:100%;
}
/* use this style to set width of the #text cell to exactly the width of it's cotnents */
#text {
width:1%;
white-space: nowrap;
}
You can place them in a div together and display them as flex.
http://jsfiddle.net/1amvwzuw/2/
<div class="flex">
<div id="text">text</div>
<button>button</button>
</div>
You need to give your parent container a width. So text could be like, 80% then the div that contains button could be 20%. then button will be 100% of the parent div and both divs will be beside each other.
So div element is a block element. That means it will start on a new line and the next element after it will be on a new line as well. What you can do here is to set display: inline-block to both divs you have.
If you don't need a block element just use an inline one like span
http://jsfiddle.net/1amvwzuw/3/
If your browser-matrix allows it this is the perfekt opportunity to try out flexbox:
html
<div class="wrapper">
<div id="text">text</div>
<div class="button-wrapper"><button>button</button></div>
</div>
css
.wrapper{
display: flex;
}
.button-wrapper{
flex: 1;
}
button {
width: 100%;
}
http://jsfiddle.net/1amvwzuw/5/
if not look at this question to see how to stretch a div using display:table-cell:
Auto-stretching table-cell div css
I want to put text in the middle of the box in CSS3, but it's not working for some reasons.
Here's my code snippet (with code from Angularjs):
<div class="a" ng-repeat="i in l | filter:query">
<a class="b" href="{{i.a}}">{{i.b}} {{i.c}}</a>
</div>
And here's my css:
.b {
display: inline-block;
float: left;
margin: 8px;
height: 20px;
width: 100px;
}
And even if I add vertical-align: middle; to the above CSS, it doesn't put the text in the middle of the box... why?
Thanks.
You need to use css table-cell
DEMO http://jsfiddle.net/LstNS/31/
.b {
display: table-cell;
vertical-align: middle;
}
.a {
display: table;
height: 200px;
border: black thin solid;
}
vertical-align requires a lot of things to work right...
easiest method , and what I do, is just use line-height
so do
.b {
line-height: 20px;
}
adjust number of pixels accordingly, but that will center the text vertically for you
float kills display and so vertical-align if avalaibe.
inline-blocks element can be vertical-align aside text, other inline-boxes or on the line-height.
In your case , line-height alone will give height of parent (if unprecised) and set the link on it, right in the middle :), no need to give an inline-block display to <a> unless you need it to size it for instance (or whatever else style that needs layout) .
If .a has an height, give it an equal line-height.
Line-height works fine as long as you have one line of text.
if you want to use inline-block, and set middle alignement from itself it won'nt work, you need at least 2 elements as another inline-boxe, so it can center from something ... an extra box or pseudo-element might help.
.a {height:300px;}
.a:before {
content:'';
height:100%;
}
.a:before, .a a {
display:inline-block;
vertical-align:middle;
}
Else, vertical-align works on content of <td> or element wich receive a display:table-cell;. .a could then receive a display:table-cell and vertical-align and eventually an height. Usually it needs a parent as display:table to work fine.
.a {
display:table-cell;
height:200px;
vertical-align:middle;
}
I have no special links on tutorial for vertical-align , on W3C it is confusing somehow since both vertical-align for inline-box and cell content are dispatched in different documents.
I'm wondering what the best way to go about doing this is...
I have 3 divs:
a div#container with width=100%; that holds 2 inner divs
a div#inner_left with width changing dynamically, but no wider than 200px (will hold a product image)
an div#inner_right where the width should fill the rest of the space in the container (will contain text to describe the product shown)
#container {
width:100%
}
#inner_left {
display:inline-block:
max-width:200px;
}
#inner_right {
display:inline-block;
width:100%;
}
The problem is that the div#inner_right creates a line break and fills the entire width. How can I make them align next to each other, with the right div accounting for the width taken by the left div (which changes dynamically?). I've gotten this to work other ways, but I'm looking for a clean solution...
Any help for a CSS noob is much appreciated!
I haven't really seen a good solution in the answers here. So I'll share mine.
Best way to do this is by using the table-cell option in CSS. One important thing to add is a 'min-width' to the element that has a pixel width.
Example:
<div id="left">
Left
</div>
<div id="right">
right
</div>
CSS:
#left {
display: table-cell;
min-width: 160px;
}
#right {
display: table-cell;
width: 100%;
vertical-align: top;
}
Have a look at "liquid layouts" it can describe what you're talking about.
You're probably looking for this one.
In your example, try setting your display to inline. However, you won't technically be able to use block level elements in it, so have a look at the links I posted above. :)
The problem with setting the width to 100% if you're using floats is that it is considered 100% of the container, so it won't work either since the 100% includes the left div's width.
Edit: Here is the example of the other answer, I've edited it to include the html/css from the example site above for simplicity's sake.
I'll also include it below:
HTML
<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube"><b>Content Column: <em>Fluid</em></b></div>
</div>
</div>
<div id="leftcolumn">
<div class="innertube"><b>Left Column: <em>200px</em></b></div>
</div>
CSS
#contentwrapper{
float: left;
width: 100%;
}
#contentcolumn{
margin-left: 200px; /*Set left margin to LeftColumnWidth*/
}
#leftcolumn{
float: left;
width: 200px; /*Width of left column*/
margin-left: -100%;
background: #C8FC98;
}
This can be accomplished using Flex-Box, which has been introduced with CSS3 and according to Can I use is cross-browser.
.container {
display: flex;
}
.left {
width: 100px; /* or leave it undefined */
}
.right {
flex-grow: 1;
}
/* some styling */
.container {height: 90vh}
.left {background: gray}
.right {background: red}
<div class="container">
<div class="left">100px</div>
<div class="right">Rest</div>
</div>
So even though I wanted to do this with CSS only, I ended up just using tables...
Use floating:
#container{
width:100%
}
#inner_left{
float:left;
max-width:200px;
}
#inner_right{
float:left;
width:100%;
}
Edit: have a read a this, it's a nice little guide : quirksmode
you need to provide position:absolute style property to both your div's
This is based on #w00 's answer. +1 friend.
My situation was when I wanted to show a couple of icons next to a label. I use the fluid class for that which is where the nowrap comes in. This is so the icons appear on the same line.
.sidebyside-left-fixed, .sidebyside-right-fixed
{
display: table-cell;
width: 100%;
}
.sidebyside-left-fluid , .sidebyside-right-fluid
{
display: table-cell;
vertical-align: top;
white-space: nowrap;
}
Here is an easy method to achieve this, and this is something that's quite frequently needed. It's also tested to works with all browsers, including the very old ones (let me know if it doesn't on any).
Link to a sample: https://jsfiddle.net/collinsethans/jdgduw6a/
Here's the HTML part:
<div class="wrapper">
<div class="left">
Left Box
</div>
<div class="right">
Right Box
</div>
</div>
And the corresponding SCSS:
.wrapper {
position: relative;
}
$left_width: 200px;
.left {
position: absolute;
left: 0px;
width: $left_width;
}
.right {
margin-left: $left_width;
}
If you are not using any CSS preprocessors, then replace the $left_width with your value (200px here).
Credit: This is based on http://htmldog.com/examples/pagelayout2/.
There are several other useful ones there.