In my code a strange space is rendered in between two inner most divs in the following html structure
<body>
<div class='DatePicker'>
<div id="dayDiv" class='DayDiv' style='background-color:blue'>
<div class="" style='display: inline-block; height:10%;width:10%;background-color:red;vertical-align:top'>
</div>
<div class="" style='display: inline-block; height:10%;width:10%;background-color:red;vertical-align:top'>
</div>
</div>
</div>
</body>
The innermost divs are rendered but with space in between of them and I want to remove that.
Following is the JSFiddle link to see the page with styles-sheet.
Note: Margin, border and padding is 0 for all the elements
Remove the white space between the divs and it goes away
<div class='DatePicker'>
<div id="dayDiv" class='DayDiv' style='background-color:blue'>
<div class="" style='display: inline-block; height:10%;width:10%;background-color:red;vertical-align:top'>
</div><div class="" style='display: inline-block; height:10%;width:10%;background-color:red;vertical-align:top'>
</div>
</div>
</div>
jsFiddle example or jsFiddle example (uses HTML comments)
All above answers are correct, you got spaces between divs because there is a space in your markup.
You can fight this behaviour in several ways:
Remove spaces in markup
Sticking together the closing </div> with the next <div>
<div class='DatePicker'>
<div id="dayDiv" class='DayDiv' style='background-color:blue'>
<div class="" style='[all your styles]'>
Your content...</div><div class="" style='[all your styles]'>
Your content...</div>
</div>
</div>
Use negative margins
I don't recommend this way because you really don't know exactly how many pixels you need to reduce. The space is one character width. Often, it counts 3px or 4px, but... is unsure.
<div class="" style=' /*New style*/ margin-left:-4px; /*End new style*/ display: inline-block; height:10%;width:10%;background-color:red;vertical-align:top;'>
Set width of the font to "0"
If you are using em instead of px, you could avoid this method. It can give you troubles in child elements, and extra markup.
<div class="" style=' /*New style*/ font-size:0; /*End new style*/ display: inline-block; height:10%;width:10%;background-color:red;vertical-align:top;'>
<div style="font-size:12px;">Your content...</div>
</div>
Float the div
Instead of use display:inline-block; you could use float:left;. This method probably requires to you the use of a clearfix method.
I retrive the info from CSS Tricks. You could get more info there.
Hope this helps!
I know this is weird, but in HTML if you have empty lines between elements it creates a space there. Remove the empty lines to make the space magically disappear.
<div class="" style='display: inline-block; height:10%;width:10%;background-color:red;vertical-align:top'>
</div><div class="" style='display: inline-block; height:10%;width:10%;background-color:red;vertical-align:top'>
</div>
There was a space...
<body>
<div class='DatePicker'>
<div id="dayDiv" class='DayDiv' style='background-color:blue'>
<div class="" style='display: inline-block; height:10%;width:10%;background-color:red;vertical-align:top'></div>
<div class="" style='display: inline-block; height:10%;width:10%;background-color:red;vertical-align:top'></div>
</div>
</div>
</body>
Do you want to get rid of the space?
Add float: left to your divs.
Related
I've a 3 column layout. My issue is that content in the second <div> populates from the bottom, as you can see in this fiddle. I would like to align it's content to the top.
Following is the corresponding html
<div class="user-info" style="width: 100%;">
<div id="image-container">
<img src="image.jpeg" height="200px" width="200px">
</div>
<div id="info">
<div class="info-item">
<div class="info-attribute">tullsy</div>
</div>
<div class="info-item">
<div class="info-attribute">tullsy</div>
</div>
<div class="info-item">
<div class="info-attribute">tullsy</div>
</div>
</div>
<div id="button-container">
<input type="button" id="edit_button" value="edit" class="button" onclick="function()">
<br>
</div>
</div>
and css
#image-container {
display: inline-block;
width: 100;
}
#info {
display: inline-block;
}
#button-container {
display: inline-block;
float: right;
padding: 10px;
}
I can fix this issue by applying display: flex; for the container, however it seems I can't float elements inside a flex container.
I've managed to achieve what i want using <br>, as you can see in this fiddle. But i want to achieve the same without using <br>s or fixed padding.
If i understood correctly,
First of all you need to apply a height to the container #info, (So you can avoid using <br>s to add height) Otherwise it'll shrink wrap to the height of it's child items.
Then you can apply vertical-align:top; for aligning the inline-block child items in it to the top without using <br>s
Demo
I'm struggling for quite some time now with that.
I have 2 floated div and I'd like to align the text with the images inside these divs.
Here is a JSFiddle
<div data-role="content" class="content">
<ul data-role="listview" data-inset="true">
<li data-icon="nf-arrow-r">
<div style="overflow:hidden;">
<div style="float:left;">
<img src='http://images.lecouffe.org/wp-content/uploads/Chronometre.png' width='22' height='22' />08h00 - 12h30
<br/>
<img src='http://images.lecouffe.org/wp-content/uploads/Chronometre.png' width='22' height='22' />13h00 - 18h00</div>
<div style="float:right;font-weight:normal;color:blue;">9h30 +
<img src='https://si0.twimg.com/profile_images/378800000050266964/cfbc5ac04a7ced31fcbb9dfcf1649d65.png' width='32' height='32' />
</div>
</div>
</li>
</ul>
</div>
You can solve this issue by
Wrapping the text content inside a <span> tag.
And then by adding vertical-align: bottom; to your <span> and <img> tags.
HTML:
<img src='http://images.lecouffe.org/wp-content/uploads/Chronometre.png' width='22' height='22' /><span>08h00 - 12h30</span>
CSS:
img, span{
vertical-align: bottom;
}
Working Sample
Note: The working sample has border just to illustrate.
A simple solution would be using table and table-cell displays. I've colored the cells so it'll be clear.
jsFiddle Demo
I had to change some styles, but not the DOM.
<div style="font-weight:normal;color:blue;background:red;
vertical-align: middle; display: table-cell;
height:100%; text-align:right;">
Add this in all image tags.
style='vertical-align:middle;'
Demo
http://jsfiddle.net/D9gnP/110/
Between both columns is a little gap.From where is that gap coming I have set nothing?
Has this todo something with the display:inline-block on those elements? Do they have internal margin?
<div id="wrapper" style="margin:auto;background-color:yellow;height:100%;">
<div style="width:50px;height:100%;">
<div class="fluid-column" style="height:80%; background-color:green;">
<div style="background-color:#ff99cc; height:25%;">1</div>
<div style="background-color:#ff33cc; height:50%;">2</div>
<div style="background-color:#ff66cc; height:25%;">3</div>
</div>
<div class="fix-column" style="height:20%; background-color:violet">
<div style="background-color: orange;height:50%;">Total</div>
<div style="background-color: blue;height:50%;">Test</div>
</div>
</div>
</div>
body, html {
width:100%;
height:100%;
margin:0;
padding:0;
}
div {
text-align:center;
text-indent:-0.5em;;
}
div span {
display:inline-block;
height:100%;
vertical-align:middle;
width:0;
}
As the elements are inline they are treated as such, including spaces due to white space.
Try removing the white space between the elements (including new lines).
<div>Content</div><!-- this white space/new line causes the gap -->
<div>Content</div>
<div>Content</div><div>Content</div><!-- no new line/white space, no gap-->
You can also add this to the container element to adjust:
word-spacing: 0;
alternatively you can just use floated elements :)
see here, works as expected if you just remove the whitespace: http://jsfiddle.net/D9gnP/121/
I think the whitespaces in your HTML markup - the indents between your tags - get interpreted by the browser. I had similar problems once while designing a horizontal navigation band.
Unfortunately, the only solution I found besides a completely different layout is writing your HTML markup without any whitespaces, which can get quite ugly.
Paste this code for your html:
<div id="wrapper" style="background-color:yellow;height:100%;">
<div style="width:50px;height:100%;display:inline-block;">
<div class="fluid-column" style="height:80%;background-color:green;">
<div style="background-color:#ff99cc;height:25%;"> <span></span>1</div>
<div style="background-color:#ff33cc;height:50%;"><span></span>2</div>
<div style="background-color:#ff66cc;height:25%;"><span></span>3</div></div>
<div class="fix-column" style="height:20%;background-color:violet">
<div style="background-color:orange;height:50%;"> <span></span>Total</div>
<div style="background-color:white;height:50%;"><span></span>Test</div>
</div>
</div><div style="width:50px;height:100%;display:inline-block;">
<div class="fluid-column" style="height:80%;background-color:green;">
<div style="background-color:#ff99cc;height:25%;"> <span></span>1</div>
<div style="background-color:#ff33cc;height:50%;"><span></span>2</div>
<div style="background-color:#ff66cc;height:25%;"><span></span>3</div></div>
<div class="fix-column" style="height:20%;background-color:violet">
<div style="background-color:orange;height:50%;"> <span></span>Total</div>
<div style="background-color:white;height:50%;"><span></span>Test</div>
</div>
</div>
</div>
notice that the 2 divs have nothing in between them in the source code.ex:
<div>data</div><div>data</div>
It is because of the white space in your HTML.
Try removing the break between the two column-divs and it's gone, or try this solution:
How to remove the space between inline-block elements?
I have multiple div's I want to display in a horizontal row. Normally, the way I'd do this is to simply float them to the right and put them in the markup in reverse order like so:
<div>
<div style="float:right">Right</div>
<div style="float:right">Middle</div>
<div style="float:right">Left</div>
</div>
I'm trying to accomplish a similar thing, float div's to the right, but I can't reverse their order in the markup for SEO reasons. The left div needs to be first in the code.
Is there a simple way to do this without resorting to positioning things absolutely?
You could apply a text-align: right to the container and a display: inline-block in place of the floating:
<div style="text-align: right">
<div style="display:inline-block">Left</div>
<div style="display:inline-block">Middle</div>
<div style="display:inline-block">Right</div>
</div>
DEMO
Using display:inline-block might not work as expected with elements of variable height.
So you might want to use:
<div style="float: right">
<div style="float:left">Left</div>
<div style="float:left">Middle</div>
<div style="float:left">Right</div>
</div>
See: demo of both -- inline and float-float.
You could give float: right to the outer div. And the display style of the inner div is inline-block
<div style="float: right" >
<div style="display:inline-block">Left</div>
<div style="display:inline-block">Middle</div>
<div style="display:inline-block">Right</div>
</div>
Float your elements to the left.
<div>
<div style="float: left; position: relative; width: 200px;">Left</div> <!-- dummy width -->
<div style="float: left; position: relative; width: 200px;">Middle</div> <!-- dummy width -->
<div style="float: left; position: relative; width: 200px;">Right</div> <!-- dummy width -->
</div>
Also, you'll need to specify the width for each of these divs.
What is your reasoning behind floating them to the right?
When I use the following code, the last div overlaps the floated content:
<div style="width:50%;float:left;">test</div>
<div style="width:50%;float:left;">test</div>
<div style="background:red;">test</div>
The common fix is to do this:
<div style="overflow:hidden;">
<div style="width:50%;float:left;">test</div>
<div style="width:50%;float:left;">test</div>
</div>
<div style="background:red;">test</div>
However, in my case, I cannot add in an extra element. Is there another workaround for this?
Edit:
clear:both; fixed the overlapping issue, but there's a margin on the last div, so it's something like this:
<div style="width:50%;float:left;">test</div>
<div style="width:50%;float:left;">test</div>
<div style="background:red;clear:both;margin-top:50px;">test</div>
And now the new problem is that the margin isn't showing up.
You could simply clear the floats...
<div style="background:red;clear: both;">test</div>
Try the following:
<div style="width:50%;float:left;">test</div>
<div style="width:50%;float:left;">test</div>
<div style="background:red;clear:left;">test</div>
EDIT. To get the margin-top, add margin bottom to the floated elements
<div style="width:50%;float:left;margin-bottom:50px;">test</div>
<div style="width:50%;float:left;margin-bottom:50px;">test</div>
<div style="background:red;clear:both;">test</div>
Set the clear property on your last <div> to left or both:
<div style="background: red; clear: left;">test</div>
Edit: As for the margin, you can do some relative positioning:
<div style="background: red; clear: left; margin-bottom: 50px; position: relative; top: 50px;">test</div>
There's no need to use floats here. Make the first two elements inline-block elements, and the third element a block-level element.
HTML:
<div class="inline-block">
Test
</div><div class="inline-block">
Test
</div>
<div class="block">Test</div>
Note that </div><div class="inline-block"> are touching. Because these two element are inline-block elements, any space in the markup will produce space in the presentation.
CSS:
.inline-block {
width: 50%;
display: inline-block; }
.block { margin: 50px 0 0; }
Preview: http://jsfiddle.net/Wexcode/eGPWt/