I'm trying to get the tops of elements '.wrap1' and '.wrap2' to line up. As is you can see in this jsfiddle that the top of 'wrap1' is a little below '.wrap2' yet when I delete the displayed text from '.wrap2' the tops do line up. Can any one explain why the text is lowering the top of '.wrap1'?
<html>
<body>
<ul
style="margin:0px 0px!important;position:relative;width:100%"
class="mainList"
id="dateMainList">
<li
class="list-element"
id=""
style="width:100%">
<div
class="list-inner-wrap"
style="border:1px solid black">
<div
class="wrap1"
style="display:inline-block;background:white;border:2px solid black;height:50px;width:50px">
<div
class="line-1"
style="display:block;text-align:center;font-size:10pt">1</div>
<div
class="line-2"
style="display:block;text-align:center;font-size:10pt">2</div>
<div
class="line-3"
style="display:block;text-align:center;font-size:10pt">3</div>
</div>
<div
class="wrap2"
style="display:inline-block;height:50px;background:green;width:200px"></div>
</div>
</li>
</ul>
</body>
Since they are both display:inline-block they are treated inline so you can put vertical-align:top; on both of them to line them up. Or you could make them display:block and float:left.
Add float:left; to .wrap1 & wrap2 or just to.wrap1
Do position:absolute; Any element that have that attribute will not affect any other element.
Related
I used 4 different ways to align nested divs side by side. I expect these 4 ways to be correct, but only one is working (float). Can somebody explain why ?
<div style="background-color:black; width:100px; height:100px;">
<span style="background-color:red;width:70%;height:100%;"></span>
<span style="background-color:blue;width:30%;height:100%;"></span>
</div>
<br/>
<div style="background-color:black; width:100px; height:100px;">
<div style="background-color:red;width:70%;height:100%;display:inline"></div>
<div style="background-color:blue;width:30%;height:100%;display:inline"></div>
</div>
<br/>
<div style="background-color:black; width:100px; height:100px;">
<div style="background-color:red;width:70%;height:100%;float:left"></div>
<div style="background-color:blue;width:30%;height:100%;float:left"></div>
</div>
<br/>
<div style="background-color:black; width:100px; height:100px;">
<div style="background-color:red;width:70%;height:100%;display:inline-block"></div>
<div style="background-color:blue;width:30%;height:100%;display:inline-block"></div>
</div>
Or JSFiddle
Thanks in advance.
A <span> isn't a block element, so it doesn't have width and height.
The same goes for <div>'s set to display: inline.
This works as you expected.
You can remove the white space between the div's to make it work. Elements set to inline-block have a space between them just like two words would. That's why you could also set font-size: 0; and it would work.
You could do the same as #3 but with position: absolute.
this is painfull... but the first one, the span is an inline element, so is the second set the div that has the style="inline" attached to it. This means they wont accept any height or width styles, as they are not blocks!
Your first example uses SPANs, SPANs are an inline element and therefore you cannot apply a height or width to them.
Your second example, you are changing a BLOCK element (DIV) but changing it into an inline element cannot apply a height or width to them.
Floating an element removes it from the flow of the document, so different rules apply, and you can apply width and height
The last example will work if you remove the white space between the 2 nested DIVS:
<div style="background-color:black; width:100px; height:100px;">
<div style="background-color:red;width:70%;height:100%;display:inline-block"></div><div style="background-color:blue;width:30%;height:100%;display:inline-block"></div>
</div>
http://jsfiddle.net/kKScJ/76/
try this:
give on div inline style code as float:left;
it give as align div all are one side one
<div style="background-color:black; width:100px; height:100px;float:left;">
<span style="background-color:red;width:70%;height:100%;"></span>
<span style="background-color:blue;width:30%;height:100%;"></span>
</div>
<div style="clear:both;"></div>
<div style="background-color:black; width:100px; height:100px;float:left;">
<span style="background-color:red;width:70%;height:100%;float:left;"></span>
<span style="background-color:blue;width:30%;height:100%;float:left;"></span>
</div>
At the moment, what I have is seen in the first picture. I would like to know how can I add the spaces (bottom margin?) between the images as shown in picture 2? They 2 side-by-side blocks are 2 different DIVs, and the pictures in each line are elements of the same div, so bottom-margin doesn't work. (CODE AT THE BOTTOM)
Picture 1:
Picture 2:
HTML:
...
<div class="meniu">
NAUJIENOS
KREPSINIO VADOVAS
TRENIRUOTES
IDOMYBES
GALERIJA
APIE MUS
</div>
<div class="rightbar">
<div class="rightpic2">
<img src="pic3.png"> <br>
<img src="pic4.png"> <br>
<img src="pic4.png"> <br>
<img src="pic5.png"> <br>
<img src="pic3.png">
</div>
</div>
<div class="rightpic1">
<img src="pic1.jpg"> <br>
<img src="pic2.jpg">
</div>
...
CSS:
.rightpic1{
float:right;
margin-right:30px;
margin-top:100px;
}
.rightpic2{
margin-right:24px;
margin-left:24px;
margin-top:38px;
}
.rightbar{
float:right;
background-color:white;
margin-top:62px;
}
<a> elements display inline. Nix all the <br> in the markup and add display: block to the css.
.rightpic1 a, .rightpic2 a {
display: block;
margin-top: 15px
}
First of all, you need to close all your image tags. Then add display:block; to the links inside your .rightpick1 & .rightpick2 classes. Then, you can successfully add a margin-bottom to your links.
I attached a fiddle as an example. Hope that helps!
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?
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.