So I have some inline-block elements like so:
<span style="display: inline-block">
<img>
<p>Some text</p>
<p>Some more text</p>
<button>A button</button>
</span>
I want them all inline except I want the first p element positioned on top of the other one yet have both together inline with the rest of the span. From what I've been reading, it's bad practice to put a div inside a span, so what's the best way to do this?
It's not "bad practice", it's simply impossible. The browser will "correct" your HTML and it will not behave as expected.
Try using <div style="display:inline-block"> as your container instead.
Here's a wild guess at what you're after based on my comment above.
.table {
display: table;
width: 100%;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
padding: 5px;
background: #ddd;
border: 1px solid #aaa;
vertical-align: top;
}
<div class="table">
<div class="row">
<div class="cell">
<img src="http://lorempixel.com/300/200" />
</div>
<div class="cell">
<div class="table">
<div class="row">
<div class="cell">
<p>Paragraph one. Paragraph one. Paragraph one.</p>
</div>
</div>
<div class="row">
<div class="cell">
<p>Paragraph two. Paragraph two. Paragraph two.</p>
</div>
</div>
</div>
</div>
<div class="cell">
<button>Button</button>
</div>
</div>
</div>
As #Neit pointed out, the browser will correct the DOM when you put block-level elements inside inline elements (see first example). A div, or maybe a section is definitely a better choice both for valid and semantic markup.
Using CSS to change display: does work, but it isn't best practice (for example an em in place of your span above will render exactly the same). Certain versions of browsers will also ignore some types of display: changes; thus, your code would fail. So using a better container is going to provide the fewest headaches.
See the code here:
https://jsfiddle.net/9mf91b1v/
Related
how can I place many paragraphs or div elements next to each other, that I see no difference between them? For example:
<div>
<div class="text1">hey, how are</div>
<div class="text2"> you?</div>
</div>
They are placed under each other, but I want them to be side by side, and please don't write me other ways, for example something like: 'you can write the text in one div'... :) I saw this question several times from other users, but they had a bit different problem like mine, so please answer me this question
Thanks
<div>
<span>hey, how ar</span>
<span> you?</span>
</div>
or
.text {
display: inline-block;
}
<div>
<div class="text">hey, how are</div>
<div class="text"> you?</div>
</div>
or
.container {
display: flex;
}
<div class="container">
<div>hey, how are</div>
<div> you?</div>
</div>
div is a block-level element, which means that it will take up the whole of a 'row' on the screen, unlike inline elements.
I'd suggest you have a read through of the MDN pages on these two categories to get a better understanding of this:
Block-level elements
Inline elements
Among the many ways of solving this (change divs to an inline element type like span, using flexbox, etc), one option is to force your div to be inline by changing their CSS:
.text1, .text2 {
display: inline-block;
}
You can do this in many ways. Here I'll be showing classic ways to do this.
using display:inline-block property of css.
.text1{
display:inline-block;
}
.text2{
display:inline-block;
}
using display:flex property of css.
html:
<div class="text-wrapper">
<div class="text1">hey, how are</div>
<div class="text2"> you?</div>
</div>
css:
.text-wrapper{
display: flex;
}
There are several ways of accomplishing this. You could do it with CSS Flexbox, CSS Grid, CSS float, or you could change the display property on the DIV's.
As you have tagged your question with "Angular", it is very common to use the Angular Flex Layout package for positioning (https://github.com/angular/flex-layout). If you add this package to your project, you could solve it like this:
<div fxLayout="row" fxLayoutAlign="start">
<div class="text1">hey, how are</div>
<div class="text2"> you?</div>
</div>
Why don't you use bootsrap? This is a typical scenario for placing things side by side.
<div class="d-flex justify-content-center">
<p></p>
<p></p>
<p></p>
</div>
I have used both of the display properties whenever I wanted the width of an element to be the same as its content.
But is one better than the other? I'm referring to accessibility, browser compatibility, responsiveness, etc.
Note: I am asking because I'm planing to use only one of these in my new web site. I just don't know which one is better, if any.
Ultimately, it depends on the use case:
display: inline-block will create an inline-block element
display: table will create a table element
Here they are in use:
span.mySpan {
background-color: red;
}
<div>
<span>A span element.</span>
<span class="mySpan" style="display: table;">a <code>display: table</code> element.</span>
<span>Another span element.</span>
</div>
<br/>
<br/>
<div>
<span>A span element.</span>
<span class="mySpan" style="display: inline-block;">a <code>display: inline-block</code> element.</span>
<span>Another span element.</span>
</div>
As can be seen, the results are very different. The table element positions itself on a new line, and causes the next element to be on a new line as well. The inline-block element positions itself inline with it's sibling elements.
In many cases, the above differences will be enough to choose one or the other.
If not, let's continue...
There are some cases when display: table is useful:
Horizontal and vertical centering of elements
Equal height elements
However, browsers can produce inconsistent results when not implemented correctly so you should always couple display: table with the standard table markup (using rows and cells):
.table {
display: table;
}
.table-row {
display: table-row:
}
.table-cell {
display: table-cell;
background-color: #eaeaea;
padding: 10px;
}
<div class="table">
<div class="table-row">
<div class="table-cell">
Content
</div>
<div class="table-cell" style="height: 100px;">
Content
</div>
<div class="table-cell">
Content
</div>
</div>
</div>
This becomes pretty tedious. And with modern CSS we can accomplish the same using display: flex, with a simpler HTML structure and less CSS:
.flex {
display: flex;
}
.flex-cell {
background-color: #eaeaea;
padding: 10px;
}
<div class="flex">
<div class="flex-cell">
Content
</div>
<div class="flex-cell" style="height: 100px;">
Content
</div>
<div class="flex-cell">
Content
</div>
</div>
Honestly, I can't think of many times I would need to decide between display: inline-block and display: table as they produce such different results. However, if I were on the fence I'd follow this decision tree:
Do I need to make a table? Use a true <table></table> element
Do I need equal height/width elements, and/or vertical centering? Use a display: flex element
Otherwise, use the appropriate HTML element (display: inline-block)
How to positioning the elements one under the other, regardless of the height of the item? As having the following markup, to place the elements in the following way:
.photo {
display: inline-block;
vertical-align: top;
max-width: 160px;
width: 100%;
margin: 0px 20px 20px 0;
background:red;
}
<div class="photo">
<div class="photo__item photo__item_1"></div>
</div>
<div class="photo">
<div class="photo__item photo__item_2"></div>
</div>
<div class="photo">
<div class="photo__item photo__item_3"></div>
</div>
<div class="photo">
<div class="photo__item photo__item_4"></div>
</div>
<div class="photo">
<div class="photo__item photo__item_5"></div>
</div>
<div class="photo">
<div class="photo__item photo__item_6"></div>
</div>
There are a couple of ways of doing this.
Emulate this effect by using the css column property, I found this fiddle for example, you can see how the elements are positioned.
Other way (most viable I think) is to use a plugin like masonry as #kukkuz said before, it does almost everything you need.
Create your own grid using javascript and css in order to position every element based on other element's positions (which I wouldn't recommend) because you have to do some calcs and it could take some time.
I'll start off by stating that I know this question has been asked a lot, but none of the answers I saw seemed to work for me.
Basically, I have some divs inside of a larger div. They'll have dynamic text, so I don't know how many lines each will be. The problem is that I can't seem to get the divs to size themselves to the parent's height. I want the column divs to take up the entire height of the row div (basically, I want that blue part to fill all the space between the bars).
HTML:
<div class="container">
<div class="row divOne">
<div class="col-xs-3 divTwo">Some Text</div>
<div class="col-xs-3">
Some text that could wrap to multiple lines
</div>
</div>
<div class="row divOne">
<div class="col-xs-3 divTwo">Different Text</div>
<div class="col-xs-3 divThree">
With some more text
</div>
</div>
</div>
CSS:
.divOne
{
border-top:10px solid black;
}
.divTwo
{
background-color: #32649b;
height:100%;
color:white;
}
jsfiddle:
Now, what I've learned from other versions of this question are that
float:left might be screwing it up
height:100% doesn't work if the parent's height is defined
position:relative might help on the parent
The problem with the float is that I'm using bootstrap, and that's where the float is coming from, so I don't really want to mess with that.
I can't really define parent height, because it'll be dynamic based on the children.
I also tried messing around with position:relative on the parent and absolute on the child, but that seemed to get really screwy. I'm also guessing this won't work because I'm using bootstrap. It's possible that I'm just missing something, though. I'll admit to not being the greatest with CSS.
I don't know if I'm having these issues because I'm using bootstrap, or because I'm just being an idiot right now.
Something else that seems to be throwing a wrench into things: These columns will be laid out differently on smaller screens vs. larger ones. I actually want something along the lines of col-xs-12 col-md-3 for these.
The short answer is that you can't really achieve this within the constraints of the bootstrap framework. There are plenty of articles that explain why div elements can't stretch to the height of their container, and how to get around this problem. One of the solutions I'm most fond of is Faux Columns.
But, let's get a little more creative then that.
I came up with something that might work for your scenario, but requires a bit of change to your markup. Here's a solution that wraps the bootstrap grid with display: table.
http://jsfiddle.net/Wexcode/13Lfqmjo/
HTML:
<div class="table-container">
<div class="table-row divOne">
<div class="col-xs-3 divTwo">Some Text</div>
<div class="col-xs-3">
Some text that could wrap to multiple lines
</div>
<div class="col-xs-6"></div>
</div>
</div>
CSS:
.table-container {
margin: 0 -15px;
}
.table-row {
display: table;
width: 100%;
}
.table-row [class^="col"] {
display: table-cell;
padding: 0 15px;
float: none;
}
Note that for this solution to work, you must include enough col elements to stretch it all 12 columns (see that I added an empty .col-xs-6 div).
You can add
display:flex;
to divOne , and will act like you wanted.
in bootstrap 4 'row' class applies this on div, but in ealier versions you need to add manually if you expect such behavior.
Give .divOne a display: flex and remove the height: 100% from .divTwo:
.divOne
{
border-top:10px solid black;
display: flex;
}
.divTwo
{
background-color: #32649b;
/*height:100%;*/
color:white;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row divOne">
<div class="col-xs-3 divTwo">Some Text</div>
<div class="col-xs-3">
Some text that could wrap to multiple lines
</div>
</div>
<div class="row divOne">
<div class="col-xs-3 divTwo">Different Text</div>
<div class="col-xs-3 divThree">
With some more text
</div>
</div>
</div>
I have the following piece of code:
<div class="row">
<div class="col-md-12">
<div class="well">
<div class="clearfix">
<h2 class="pull-left">Heading</h2>
<h4>Second Heading</h4>
</div>
</div>
</div>
</div>
The goal is to have both the <h2> and the <h4> next to each other, on the same base line. At this point the <h4> element is way above the line.
I've tried to put this into spans, and other 'tricks' like vertical-align: bottom.
For some reason I just simply cannot get this on the same line, and same 'line-height like this:
Heading Second Heading
Surprised its not been mentioned but another way would be to use the heading classes.
<span class="h2 pull-left">heading</span>
<span class="h4">second heading</span>
See the less file where they typography styles are applied, everything you need apart from the display:block
I was going to just work off the first answer, but here is a more complete answer:
http://bootply.com/79703
The HTML:
<div class="row">
<div class="col-md-12">
<div class="well inline-headers">
<h2>heading</h2>
<h4>second heading</h4>
</div>
</div>
</div>
The CSS:
.inline-headers h2, .inline-headers h4 {
display: inline-block;
vertical-align: baseline;
}
Two things are happening here. First, we dropped some unnecessary floats on the headings, as well as the completely unnecessary clearfix div. For future reference, you do not need to attach a clearfix to a separate div.
Second, I would suggest creating a new class, instead of overriding the behavior of the well class as MasterPoint's example states, in case you ever want the well to style H2s and H4s normally.
Bootstrap has built-in support for secondary headings with <small>.
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
http://getbootstrap.com/css/#type-headings
Check the fiddle
http://jsfiddle.net/VccZ6/2/
you have wrong float in your h2 and here is a rest of css which is needed.
.well h2, .well h4 {
display: inline-block;
vertical-align: baseline;
line-height: 100%;
}
Updated...
...this, will do the job.