I want my <div> to behave the same way as an <h1> tag, so that everything after the <div> comes under it, without using the <br> tag.
Is there a way to do this only using CSS.
By default the div should behave the same way as the h1 except the h1 has some margin before and after it in most browsers. If you did change some attributes of the div, that can result in not working as expected.
To add the margin to your div use CSS like
div {
margin: 1em 0;
}
Related
I have a little Bootstrap/Font-Awesome alert that looks like this:
The HTML for it looks like this (I inlined the custom CSS just to ask my question):
<div class="alert alert-success" role="alert">
<i class="fa fa-check" style="float: left; margin-right: 10px;"></i>
<p style="overflow: hidden;">{{ $discount }}</p>
</div>
This is the exact look that I want, with the checkmark in its own "column" so that the text does not wrap underneath.
This HTML/CSS works totally fine as is, but just to be curious, I tried to accomplish the same layout by changing the <i> tag CSS from float: left to display: inline-block. However, this caused the whole block of text to wrap underneath the checkmark. Is there another way to accomplish the layout in my screenshot without using floats?
Edit:
I just tried giving both the <p> and <i> tags display: inline-block, but that didn't work. It caused the <p> text to wrap underneath the <i> icon.
I put together a jsfiddle right here to play with it: https://jsfiddle.net/9c7ym3sk
You can do using display:table and display:table-cell. like following:
.alert{
display: table;
}
.fa{
display: table-cell;
vertical-align:top;
}
p{
display: table-cell;
padding-left:5px;
}
Fiddle
By default <i> is an inline element while <p> is a block level element which takes full width of the browser window. If you set <i> as inline-block then subsequent block level element i.e <p> will drop in next row so you need to set inline-block property on p too.
In another way you can use float: left on <i> and overflow: hidden on <p>. It will also work fine...
Add some max-width to <p> and vertical-align: top; to both elements like this.
http://prntscr.com/a6ten4
When content inside <p> becomes too much then it causes <p> to drop below.
So apply max-width to prevent this...
I want a centred block using auto left/right margins, but I also want it to have a background colour. Since background colour is not applied to the margin area of a block, I'm using a block with the background colour set, and then an inner block with the auto margins.
I don't like this, since it requires extraneous markup. Is there a technique to achieve this while just using a single block?
Update: to clarify, I want to achieve the same thing with only one block, not two; in the example below I want to drop the inner div.
Bare bones code I'm using at present:
<section id="example">
<div id="inner">
<h1>Example</h1>
<p>Example content.</p>
</div>
</section>
<style>
#example {
background-color:#ccc;
}
#inner {
margin:0 auto;
padding:10px 0;
width:500px;
background:white;
}
</style>
Couldn't find anything searching the site or Google.
Thanks in advance,
Nigel
Because you want the div#inner to be centered, it will always be in a parent. In this case another element #portfolio, but it could also be body. This solution would be perfectly acceptable.
You could try adding negative margins and some paddings, but you would complicatie things allot. What you have now makes sence to me, one element that fills the width and gives the full a background color, and one element which gets positioned in center
If you have a fixed set of block elements, you can set the margin on all the children of #example. Here is a jsFiddle.
Problem is what you save in HTML markup, you waste in CSS and it is under the assumption that you only have block children. Adding, for example, a <span> tag would break this flow, they would themselves need to be wrapped in a block container.
HTML
<section id="example">
<h1>Example</h1>
<p>Example content.</p>
</section>
CSS
#example {
background-color:#ccc;
}
#example > * {
width: 200px;
margin: 0 auto;
}
I have several DIV's displayed as inline-blocks; and they seem to be getting spacing automatically applied in between them from the browser. They have margin/padding set to 0. Is there a way to correct this without using negative margins?
Sam, that space you're seeing is actually whitespace. That's why removing the paddings and margins does nothing. Let me explain. When you have this:
HTML
<div>
a
a
a
a
</div>
this is how it's rendered:
a a a a
...right?
So, if you have this:
<div>
<div style="display:inline-block"></div>
<div style="display:inline-block"></div>
<div style="display:inline-block"></div>
</div>
...you'll get the same thing:
block [space] block [space] block
Now... there are many different solutions to this problem. I believe the most common is commenting out the whitespace in the html:
<div>
<div style="display:inline-block"></div><!--
--><div style="display:inline-block"></div><!--
--><div style="display:inline-block"></div>
</div>
I don't like it though - I prefer keeping the html as clean as possible. My preferred way is to set the parent's font-size to 0, and then set back the desired font-size on the inline-blocks themselves. Like so:
div {
font-size: 0; /* removes the whitespace */
}
div div {
display: inline-block;
font-size: 14px;
}
You don't need to use negative margins to offset the original margins.
Instead you can override them with the following:
* { margin:0; }
or:
.div { margin:0; }
if it's element specific.
EDIT:
It appears the problem may be a result of unintended whitespace. For instance:
<div style="display:inline-block">
...
</div>
<div style="display:inline-block">
...
</div>
There exists white space between the two dividers and the browser will print the white space as a result. To fix this, you'll need to change it to:
<div style="display:inline-block">
...
</div><div style="display:inline-block">
...
</div>
Enjoy and good luck!
You can use both display: inline-block and float: left to remove that space.
Here goes plunkr: https://plnkr.co/edit/Sn3NG77asiXO8UrrpxWD?p=preview
Inline-block is originally a IE6 hack
This is what its used for:
To fix the IE6 double-margin bug on floated elements
To place multiple block-like elements on the same horizontal line
without floating them(if you can't float 'exceptional cases)
To allow an inline element to have width and/or height while still
remaining inline
To allow an inline element to have padding or margins
So if you wanna have multiple divs beside eachother please use float, its gonna solve many of your css problems that inline-block can cause, especially cross browser issues
More about inline-block here arcticle 9.2.4
Best regards
SP
please comment if disagree
Another way I have found the method altering the word-spacing on the parent container works for me https://jsfiddle.net/1ex5gpo3/2/
.parent {
word-spacing: -1em;
}
.child {
word-spacing: normal;
display: inline-block;
}
I have the following div
<body>
<span style="border:1px solid red; display:inline-block">
Some text<br />
<hr />
some more text
</span>
</body>
In "normal" web browsers, the width of the div is calculated to fit the text. And the hr is 100% of the div.
But in IE7 the hr causes the div to expand to 100% of the body.
Is there any clever css I need to add somewhere so it behaves correctly in IE7?
Please note, I can't set any fixed width.
In IE6/7, display:inline-block only works on elements that are inline by default (e.g., span). So if you try setting a div to display:inline-block, it won't work in IE6/7.
An inline element will size itself to the width of its content. An inline-block element will do the same by default, if it's not given an explicit width. If the hr is 100% (100% of its parent, which in turn is 100% of the child), then there's a circular definition for the hr width that may not work as expected (100% of what? 100% of itself).
To avoid a circular definition for the width that may not work as expected in some browsers (especially IE6/7), either the container of the hr (div, span, or whatever) should have a defined width (in px, %, or em) or the hr itself should have an explicit width (in px or em). Otherwise, the width is not defined in any identifiable way, and it's left up to the browser to decide what to do by default.
If you can't set any widths, that may rule out using an hr tag. And based on the tests I ran, the options don't look very good for CSS solutions either (without setting a width).
Edit:
I think the only way to do this without setting widths or relying on JavaScript or jQuery, is if it's acceptable to have a horizontal line after every line of text (including any long paragraphs that wrap around to the next line, if there are any). In that case you could add a bg image to the container that contains a horizontal line at increments equal to the line-height of the text, displayed at a vertical offset equal to the line-height so a line doesn't appear at the top of the first line of text.
HTML
<div class="main">
<p>This is the first line.<br/>
This is the second line.<br/>
This is a long line that will wrap around to the next line if the container is not very wide.
</p>
</div>
CSS
.main {
background: url(image.png) repeat-x left 15px;
}
p {
font-size: 12px;
line-height: 15px;
}
jsfiddle demo
The width property of the <hr> tag has been deprecated, so you're styling options are limited on the <hr> tag.
15.3 Rules: the HR element
Index of Attributes
A more modern approach is to use the border property of a <div> instead.
Image rendered by IE 7:
Image rendered by Chrome 19:
jsFiddle Demo
HTML
<body>
<div style="border:1px solid red; float:left;">
<p>
Some text
</p>
<p class="border-top">
some more text
</p>
</div>
</body>
CSS
.border-top{
border-top:#000 1px solid;
padding-top:1em;
}
Note: IE 6 & 7 don't support display:inline-block, so you might need to use float:left instead. The article below compares the use of the aforementioned properties:
CSS display: inline-Block: Why It Rocks, And Why It Sucks
Found a method at a blog. The original one required modernizer.js. I've edited it.
HTML:
<div class="hrdemo"><hr /></div>
CSS:
.hrdemo hr {
display:none
}
However, if your div.hrdemo is inside some floated container; you may have to assign a fixed width for it (for IE7).
im trying to display things inline using css that should be right next to each other i.e.
PART1 part2
instead of
PART1
part2
my code is here
http://jsfiddle.net/4EtAf/6/
thanks
You need to add inline to the H2 tag. The header is a block level element, which will place a break before and after.
.question_area h2
{
display:inline;
}
The A tag is inline by default.
You can also float them, but that is overkill in your case.
You applied the inline css style to the div, not the h2 or a elements. The div will display inline with other divs however :)
Simply add
h2 {
display:inline;
}
You should give the inline style to the h2 elements:
h2 { display: inline; }
The inline property is not referred to the element being contained but to the element itself. An header tag will be display: block by default, and this makes sense since it should be an header.
http://jsfiddle.net/4EtAf/8/
You need to display the h2 inline.
You could add a right margin to the <h2>
http://jsfiddle.net/4EtAf/10/
Try this:
<div class="question_area">
<h2 style="display: inline-block;"> this is the question</h2>
google
</div>