i am using display:inner-block in my code. But inline-block automatically assigns padding between divs's which is causing browser incompatibility in my site. Can any one point out a solution.
Here a fiddle for basic reference.Here you can clearly see the padding assigned by inner block property
http://jsfiddle.net/damsarabi/vbhnF/#&togetherjs=4aiQ9gSCpq
This is the basic code for reference in fiddle
<div class="LabelColumn">label column</div>
<div class="DataColumn">data column</div>
div{
border:1px solid #000
}
div.LabelColumn
{
display: inline-block;
vertical-align: top;
}
Regards,
inline-block doesn't automatically add margin, it is inline, which means it takes notice of your white space between each element. Even though this might look like a 4px or so margin, it's not, it's a single space. One way to get round it would be to remove the whitespace:
<div class = "LabelColumn">asdfasdf</div><div class = "LabelColumn">asdfasdf</div><div class = "DataColumn">data</div><div class = "LabelColumn">asdfasdf</div><div class = "DataColumn">data</div><div class = "LabelColumn">asdfasdf</div><div class = "DataColumn">data</div>
Another, to comment out the whitespace:
<div class = "LabelColumn">asdfasdf</div><!--
--><div class = "LabelColumn">asdfasdf</div>
JSFiddle
Or lastly, but by no means least, float:left instead of changing the display type:
JSFiddle
By default, there is an extra margin-right of 4px (according to the font-size parent).
You can fix this issue with a css tweak. It's the solution I use more often, and it's easy way to adjust this alignment.
div.LabelColumn
{
display: inline-block;
vertical-align: top;
margin-right: -4px;
}
You can see more tweaks on this link : http://css-tricks.com/fighting-the-space-between-inline-block-elements/
Also you can set font-size of container to 0 and set necessary font-size for floating elements. This will eliminate spaces.
This is useful for cases when you can't avoid white-spaces between your elements (for example, some IDEs can be configured to automatically reformat markup).
div.LabelColumn
{
font-size:16px;
display: inline-block;
vertical-align: top;
text-align:left;
border:1px solid #000;
}
.full_width {
width:100%;
font-size:0;
}
Demo:
http://jsfiddle.net/keaukraine/htAR6/2/
Try this:
<div class="LabelColumn">label column</div>
<div class="DataColumn">data column</div>
div.LabelColumn
{
font-size:16px;
display: inline-block;
vertical-align: top;
text-align:left;
border:1px solid #000;
}
.full_width {
width:100%;
font-size:0;
}
Related
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 3 years ago.
I have an HTML template with a series of blocks, which are just "inline-block". Initially, a number of blocks are rendered as part of the template, but users may add additional blocks, which then get appended dynamically.
My problem is that the dynamically added blocks have a different spacing compared to the pre-rendered ones.
Check out this fiddle: https://jsfiddle.net/7w3hu5gk/
It is clear that the blocks, added dynamically by the Javascript code, don't line up vertically.
HTML:
<div id="blocks">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
CSS:
#blocks {
width:140px;
}
#blocks div.block {
display:inline-block;
*display:inline; // Legacy IE love
zoom:1;
vertical-align:top;
width:20px;
height:20px;
margin:5px;
border:1px solid red;
background:1px solid #777;
}
It seems that the culprit is the inherent (and invisible) character spacing, since inline-block makes elements behave sort-of-like text. Setting font-size: 0 on the #blocks element will magically fix the problem. But then the font size of text contained within the div.blocks elements have to be resized.
Does anyone have a nice fix for this?
Floating elements (e.g. float: left;) are not a desirable alternative.
This is due to there being a new line between each div in your HTML. This makes the browser think it needs to add a space in between each element.
Either remove the spacing or add font-size:0; to your parent div.
Fiddle for option 1:
https://jsfiddle.net/Lu0xw1b6/
Fiddle for option 2:
https://jsfiddle.net/fkcb5mrw/
Use a flexbox on the blocks div and there you go!
#blocks {
display: flex;
flex-wrap: wrap;
}
see fiddle here.
Hi try this code.
#blocks {
width:140px;
letter-spacing: -0.31em;
*letter-spacing: normal;
*word-spacing: -0.43em;
}
#blocks .block {
display: inline-block;
*display: inline;
zoom: 1;
letter-spacing: normal;
word-spacing: normal;
vertical-align: top;
width:20px;
height:20px;
margin: 0 5px 5px;
border:1px solid red;
background:1px solid #777;
}
Regards :)
This question already has answers here:
Floating elements within a div, floats outside of div. Why?
(11 answers)
Closed 7 years ago.
I'm working on maintaining a bit of code that's out of whack at the moment. Basically, we have a <div> tag with it's own style settings, and we have multiple logic tags that will display different <span> tags, which will hold different bits of data.
What I'm seeing is that when I'm using a <span> tag with a style setting float: left; this is causing the <div> tag's color box to not wrap around the <span>.
Here's a sample of the code:
<div id="testData" style="padding:4px; width: 100%; border: 1px solid #999; background: #d1d1d1; text-align:right;">
<span style="padding: 3px 1 1 1; float:left;">
TestData: Float Left
</span>
</div>
I need this span tag to go left, due to requirements. Was wondering what my options are for this to work?
Original jsFiddle
Add overflow:auto to the parent div:
#testData {
overflow:auto;
}
jsFiddle example
Other way is to make use of clear: both
#testData:after {
clear: both;
display: block;
content: "";
}
Fiddle
Other solutions:
Using overflow: hidden
#testData {
overflow: hidden;
}
Or making a dummy element <div class="clearBoth"></div>
HTML
<div id="testData" style="padding:4px; width: 100%; border: 1px solid #999; background: #d1d1d1; text-align:right;">
<span style="padding: 3px 1 1 1; float:left;">
TestData: Float Left
</span>
<div class="clearBoth"></div>
</div>
CSS
.clearBoth {
clear: both;
}
http://jsfiddle.net/gLfw5wc7/3/
#testData {
padding:4px;
width: 100%;
border: 1px solid #999;
background: #d1d1d1;
text-align:right;
}
#testData:after {
content:"";
clear: both;
display: table;
}
#testData > span {
padding: 3px 1px 1px;
float:left;
}
This is known as a clearfix. When floating an element, it gets out "the flow" of the document. This also means that its width and height aren't taken into account by the parent. That's why #testData seems to collapse: it thinks it doesn't have content. To fix this there are some options. The easiest is to use overflow, however, that's bad practice imo. In this particular case it works, but in some other cases you won't be able to use it because content that overflows the parent will either be hidden (overflow: hidden) or a scrollbar will appear (overflow: auto).
The most common and proper solution is to use a pseudo element to fix this. :after is such a pseudo element (see this question for :after vs ::after). Basically, a pseudo element can create an element in CSS that is not visible in HTML.
Every time you use float, you'll be needing a clearfix. Therefore it's useful to create a .clear class which you can apply to every element that needs to clear floats. It would look like this.
HTML
<div id="testData" class="clear">
<span>
TestData: Float Left
</span>
</div>
CSS
.clear:after {
content:"";
clear: both;
display: table;
}
Now you can add class="clear" to every element that needs to be cleared. If you are into SASS, you might find this answer helpful but considering you are new to HTML, I'd suggest sticking to HTML and CSS first.
I am new to CSS and was wondering how to make my images display side-by-side. I don't want to use float:left, but rather display:inline-block. I tried it but I couldn't get it to work.
Here is the jsfiddle.
Your images are each inside of separate <div> tags. A <div> by default is going to look like display: block, and so what you need to do for your comment1 and comment2 classes is make those inline block. Additionally, because your .MainBox .commentBox is set to width: 0px, none of the elements below it are going to line up side by side. You'll need to remove that property if you want your images sitting next to each other.
Try this:
Use following CSS:
.MainBox {
margin:0px auto;
border:1px solid #f00;
width:1000px;
}
.MainBox .commentBox {
display:inline-block;
}
.MainBox .commentBox .comment1 {
float:left;
}
.MainBox .commentBox .comment2 {
float:left;
}
I have a container with two basic elements. A header and the body. In the header div I want a 50px by 50px image and a user name next to it, but I can't seem to get the username to display inline. What am I doing wrong? http://jsfiddle.net/FqW9d/14/
Add a float: left to both elements. Like:
#story-teller-head-contain img{
float: left;
/* your other styling */
}
#story-teller-head-contain h1 {
float: left;
/* your other styling */
}
Add a float left to the image and the div containing the name, I have updated your jsFiddle here http://jsfiddle.net/FqW9d/15/
can you use inline-block instead inline for the div with username or float bot img and `div.
Demo with inline-block: http://jsfiddle.net/FqW9d/16/
Demo with float: http://jsfiddle.net/FqW9d/17/
Inline display can be a bit of a pain. The cross browser way to do it is like this..
/* Older version of FF */
display: -moz-inline-stack;
/* newer versions of FF and Webkit */
display: inline-block;
/* trigger the correct behaviour in IE */
zoom:1;
/* IE */
*display: inline;
You need to declare the style sin that order.
As everyone else is saying make the image and persons name float: left;
http://jsfiddle.net/FqW9d/20/
By the way, i really like the set up you did here. So i messed with your source some:
http://jsfiddle.net/FqW9d/22/
You've got the following structure (I've added an image url so we can see that element):
<div id="story-teller-head-contain">
<img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG"/>
<div id="client-name">
<h1> Matt Morris </h1>
</div>
</div>
The div elements and h1 are all block-level elements by default. However, all you need to do is float: left the img and #client-name elements, and they will flow left to their width (which you declare), without forcing the next element to flow beneath.
#story-teller-head-contain img {
float: left;
height: 50px;
width: 50px;
}
#client-name {
float: left;
height: 50px;
width: 200px;
}
#story-teller-head-contain h1 {
margin: 0px 0px 0px;
padding: 0px 0px 0px 0px;
font-family: 'helvetica neue', arial, sans-serif;
font-size: 12px;
color: #3B5998;
}
http://jsfiddle.net/FqW9d/21/
So you're not really looking for display: inline, which will attempt to display the element's as "inline text" is displayed (such as this paragraph text); what you want is for the img and #client-name elements to not "force clear after". Your display: inline is what is allowing the h1, which is a block-level element, to disrupt your display, since it is overriding the display: inline of the parent element.
In fact, if you inspect with Firebug or Chrome Console, you'll see the above computes as float: left and display: block, even though display: block has not been explicitly declared.
See:
http://www.w3.org/TR/CSS2/visuren.html#floats
http://www.alistapart.com/articles/css-floats-101/
http://www.quirksmode.org/css/clearing.html
http://css-tricks.com/all-about-floats/
I feel its better to use -
img{
float:left;
}
#client-name{
display: table-cell;
zoom:1;/*For IE only*/
}
You don't have to specify widths like in float method. It will automatically accommodate text with varying length.
I have updated your code - http://jsfiddle.net/FqW9d/27/
But I think your structure & css could be much more simpler. Since I don't know about the purpose, left it untouched.
I'd like to have a line that starts right after my text on the same line, I've tried with the following simple code
<html><body>My Text<hr/></body></html>
It seems that <hr> is not an option because it is always on a new line and I'd like the line to start at the right of my text.
Any help ?
The <hr> has default styling that puts it on a new line. However that default styling can be over-ridden, in the same way as it can for any other element. <hr> is in essence nothing more than an empty <div> with a default border setting.
To demonstrate this, try the following:
<div>Blah blah<hr style='display:inline-block; width:100px;' />dfgdfg</div>
There are a number of ways to override the styling of <hr> to acheive your aim.
You could try using display:inline-block; along with a width setting, as I have above. The down-side of this approach is that it requires you to know the width you want, though there are ways around this - width:100%;, and the whole line in a container <div> that has overflow:hidden; might do the trick, for example:
<div style='overflow:hidden; white-space:nowrap;'>Blah blah<hr style='display:inline-block; width:100%;' /></div>
Another option would be to use float:left;. You'd need to apply this to all the elements in the line, and I dislike this option as I find that float tends to cause more problems than it solves. But try it and see if it works for you.
There are various other combinations of styles you can try - give it a go and see what works.
Using FlexBox Property this can be achieved easily.
.mytextdiv{
display:flex;
flex-direction:row;
align-items: center;
}
.mytexttitle{
flex-grow:0;
}
.divider{
flex-grow:1;
height: 1px;
background-color: #9f9f9f;
}
<div class="mytextdiv">
<div class="mytexttitle">
My Text
</div>
<div class="divider"></div>
</div>
Try this:
<html><body>My Text<hr style="float: right; width: 80%"/></body></html>
The inline CSS float: right will keep it on the same line as the text.
You'll need to adjust the width if you want it to fill the rest of the line.
Using inline or float, as far as I tested it doesn't work properly even if this was my first thought. Looking further I used the following css
hr {
bottom: 17px;
position: relative;
z-index: 1;
}
div {
background:white;
position: relative;
width: 100px;
z-index: 10;
}
html
<div>My Text</div><hr/>
Demo http://jsfiddle.net/mFEWk/
What I did, is to add position relative in both elements (to give me the advantage of z-index use). Also from the moment I had position:relative for hr I moved it from the bottom:17px. This move it above the div that contains the text. Applying z-index values and adding background:white for the div puts the text above the the line. Of course don't forget to use a width for the text, otherwise will take the whole width of the parent element.
<div style="float: left">Some text</div>
<hr style="clear: none; position: relative; top: 0.5em;">
Exactly what you want.
Try this. It works
<p style="float:left;">
Hello Text
<hr style="float:left; width: 80%"/>
</p>
You can also use this to draw a line between texts like
Hello -------------------------- Hello
The OP never specified the purpose of the line, but I wanted to share what I ended up doing when I was making an html template where the user needed a line to write on after the document was printed.
Because the hr tag defaults to its own line and defaults to being centered in the line, I decided to use a div and style it instead.
HTML
This is my text.<div class='fillLine'></div>
CSS
.fillLine {
display:inline-block;
width: 200px;
border-bottom: 1px solid black;
}
JSFiddle Demo
Style Div for Line After Text
Hope that helps anyone who had the same goal as me.
hr {
width: {so it fits on the same line as the p tag};
}
p {
float: left;
width: {enough to accomodate the hr};
}
That sort of make sense?
<p>My text</p>
<hr />
Here's one potential approach, but it has some assumptions/requirements. Your question should be edited to give more specific information about what you're building.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Blah</title>
<style type="text/css">
body {
background-color : white;
font-family : Arial;
font-size : 16px;
}
.wrap {
background: transparent url(px.png) repeat-x 0px 85%;
/* Different fonts or text sizes may require tweaking of that offset.
px.png is a one-pixel(though can be thicker if needed) image in whatever color you want the line */
}
.inner {
background-color : white;
/* Should match the background of whatever it's sitting over.
Obviously this requires a solid background. */
}
</style>
</head>
<body>
<div class="wrap"><span class="inner">Here is some text</span></div>
</body>
</html>
I used the following technique:
Give the container div a background-image with a horizontal line.
Put an element (like <h3>) in the container div (I have it on the right so float: right; )
Use the following css:
.line-container {
width: 550px;
height: 40px;
margin-top: 10px;
background-image: url("/images/horizontal_line.png");
}
.line-container h3 {
padding-left: 10px;
float: right;
background-color: white;
}
Below code did the job for me
HTML File:
----------
<p class="section-header">Details</p><hr>
CSS File:
----------
.section-header{
float: left;
font-weight: bold
}
hr{
float: left;
width: 80%;
}
INLINE:
-------
<p style="float: left;font-weight: bold">Details</p><hr style="float: left;width: 80%;">