This jsFiddle illustrates what this question refers to (full code below). Note that, even though #outer-div should have 0 padding, and #inner-div should have 0 margin-bottom, it appears as though the there's some padding and/or margin between the bottom edges of #outer-div and #inner-div.
Where does this come from, and, more importantly, how can I suppress it?
css
html,body,div{margin:0;padding:0;border:0;outline:0}
body{background:white;}
#outer-div{
background:lightgray;
margin-top:20px;
text-align:center;
}
#inner-div{
background:black;
display:inline-block;
}
html
<!doctype html>
<body>
<div id="outer-div">
<div id="inner-div" style="background:black;width:100px;height:100px;">
<div style="background:orange;margin:1px;width:96px;height:96px;padding:1px;">
<div style="background:white;margin:1px;width:94px;height:94px;"></div>
</div>
</div>
</div>
Inline elements are sensitive to white space and that gap is reserved for descender elements. Adding vertical-align:top to #inner-div is one way to fix this:
#inner-div {
background:black;
display:inline-block;
vertical-align:top;
}
jsFiddle example
A second way is to set font-size:0 on the parent element in this jsFiddle example.
Related
I was trying to play around with HTML and CSS.
My divs needs to be positioned different from what I mentioned below.
JS fiddle link for the problem
<!doctype>
<html>
<head>
<style>
div{
float:left;
background-color:green;
width:10px;
margin:1px;
}
body{
width:50px;
}
</style>
<body>
<div style="height:20px"></div>
<div style="height:30px"></div>
<div style="height:40px"></div>
<div style="height:35px"></div>
<div style="height:55px;background-color:red"></div>
</body>
</html>
I want the red box and any new boxes if needs to be rendered also to be rendered in the second row starting from left, just below the corresponding first row elements.(with a specific margins between elements)
Conditions:
Width of the rectangle is always same; only the height differs.
Assuming in my jsfiddle example with the given width only 4 elements can occupy
a row. so, 5th element should automatically start from next row and get positioned below the first row elements accordingly.
What I want is something like this.
Can somebody please help me to solve this.
Thanks in advance,
Sudharsanam.N
If you want to obtain a "pinterest-like" effect for your divs you need some javascript, check out this jQuery plugin: http://masonry.desandro.com/index.html
Hope this helps
Add clear:left to the div where you need to add break
div:nth-child(5){
clear:left
}
DEMO
Use display inline block instead of float left:
div{
display:inline-block;
background-color:green;
width:10px;
margin:1px;
vertical-align:top;
}
body{
width:60px;
}
Demo
I think you should use JS to exactly get what you want.
I cannot work out why the div class pic-container won't align to the top of the page with the other 3.
Each of the child divs have a width of 25%.
I have a feeling I've missed something obvious..
Example here:
http://tinkerbin.com/NS7vagaq
Set
.pic-container{
font-size:0;
}
to display: inline;
So it is:
.pic-container{
font-size:0;
display:inline;
}
Since you have changed the structure of your code so the above no longer works try this instead:
<div class="pic_container">
<img src="images/1.jpg">
<span class="viewer">
<img src="images/2.jpg">
<img src="images/3.jpg">
</span>
<img src="images/4.jpg">
</div>
No special CSS needed.
In your example, you have the fourth identicon in a DIV separate from the other three. Since DIVs are block-level elements, the identicon in the second "pic-container" div will appear below the others.
If you move the fourth identicon also into the same div container as the first three, they line up.
Because divs are block level elements. Change it to inline and voila.
div {
display:inline;
}
http://tinkerbin.com/rz9WlaIg
Change the CSS to:
.pic-container{
font-size:0;
display: inline;
}
Fiddle: http://tinkerbin.com/DH6nLkQO
You could also float it.
.pic-container img { margin:0; padding: 0; float:left; }
Is it possible to remove the staircase effect in this example ? I have one div floating right and a few divs with fixed height and fixed width floating left. If the divs meet somewhere I get a rather strange staircase effect.
I know why this happens and I get it but im looking for a solution to avoid this. Please help me
<div class="container">
<div class="fright">just some contents floating right</div>
<div class="fleft">a div</div>
<div class="fleft">
this one is the problem.
Is it possible to have this div start at position B
</div>
<div class="fleft"><b>Position B</b></div>
<div class="fleft">a div</div>
</div>
and the css
div{
margin:10px;
padding:10px;
.container{
width:460px;
float:left;
}
.fright{
float:right;
border:1px solid green;
}
.fleft{
float:left;
height:180px;
width:180px;
border:1px solid orange;
}
http://jsfiddle.net/FusWd/1/
Instead of using floats, you may want to try using inline-block to do your layout.
I've updated your example here : http://jsfiddle.net/FusWd/4/
There are some caveats with this technique:
IE 6-7 doesn't support inline-block, you'll have to use the 'hasLayout' trick.
inline-block elements are influenced by whitespace in your markup, which may or may not break your layout. There are a couple of solutions to this.
You can remove the whitespace between the inline block elements in your markup
set the parent element's font-size and line-height to 0, and the letter-spacing and word-spacing properties to -1px, then reset font-size and line-height to their desired values, and reset letter-spacing and word-spacing properties to the normal values.
With refrence to this question and the accepted answer, I tried doing something similar.
.Content
{
position:absolute;
top:0;
left:0;
padding-top:75px;
width:inherit;
height:inherit;
}
.Header
{
position:absolute;
top:0;
left:0;
height:75px;
width:inherit;
background-color:Blue;
text-align:center;
}
<form id="form1" runat="server" style="width:100%;height:100%">
<div id="Content" class="Content">
<div id="Header" class="Header">
<h1 style="color:White">Report Portal</h1>
</div>
</div>
</form>
I want the content area to fill the entire page, no more. But vertical scroll bars appear for the web page with the above html. How can I correct that?
You shouldn't make the header absolute also remove the padding-top: 75px.
Consider this fiddle: link
EDIT: Updated fiddle: link
Do you have width and height set to 100% on the body and hmtl?
Also, the padding is creating a vertical scrollbar, remove this and it will work as expected.
http://jsfiddle.net/Kyle_Sevenoaks/MqKXH/
You have put Height > inherit for "Content".
CSS Inheritance (http://dorward.me.uk/www/css/inheritance/)
CSS inheritance works on a property by property basis. When applied to an element in a document, a property with the value 'inherit' will use the same value as the parent element has for that property.
Overall, "Content" height is already 100% of the browser which is inherited from "form" tag. After adding padding from top ie "75px" ..its total height becomes "browser height + 75px". It reasons to scroll the page.
Solution :
1] Avoid the top padding to "Content". Give that padding to its inner container
2] use style
body, html{
overflow:hidden;
}
I am attempting to create a visual element using DIV elements and CSS which should display data in the format demonstrated below.
[-----50%-----|--25%--|--25%--]
When using the code and CSS I've specified below, my final element always spills onto the next line and the CSS percentage values I'm specifying don't seem to create the layout properly.
Could anybody suggest a better way to do this?
My HTML
<div class="visual-indicator-title">
All Items</div>
<div class="visual-indicator-holder">
<div class="vi-internal-element" style="width: 25%; background-color: #5E9BD1;">
25%</div>
<div class="vi-internal-element" style="width: 25%; background-color: #AB884D;">
25%</div>
<div class="vi-internal-element" style="width: 50%;">
50%</div>
</div>
<div class="visual-legend">
<ul class="inline-block">
<li>
<div class="legend-blue">
</div>
Sales</li>
<li><span class="legend-tan"></span>Processed</li>
<li><span class="legend-grey"></span>Pending Processing</li>
</ul>
My CSS
.visual-indicator-title{
font-size:12px;
font-weight:bold;
color:#777777;
}
.visual-indicator-holder
{
width:100%;
background-color:#666666;
height:28px;
border-radius: 8px;
}
.visual-indicator-holder .vi-internal-element
{
font-size:11px;
text-align:center;
color:#ffffff;
background-color:#777777;
border-radius: 6px;
display:inline-block;
}
The reason this happens is that with inline or inline-block, white space in the element will affect the rendering (adds space). Here is your demo working with white space removed, no changes to the CSS: http://jsfiddle.net/fZXnU/
Removing white space is not trivial though, so you'd be better off floating the elements (which triggers display:block). Working demo with plenty of white space: http://jsfiddle.net/fZXnU/1/
You can use float: left, position: relative, and then define width in percentage as you are.
I modified your code to use float here: http://jsfiddle.net/Z3kdP/.
If you remove the white-space between the divs then it works as intended.
http://jsfiddle.net/TeJuU/
EDIT: See this question: How to remove the space between inline-block elements?
You can make font-size: 0 on the parent element if you don't want to edit your html.
http://jsfiddle.net/TeJuU/1/
All of those elements have margin and padding with them as well as the percentages creating rounding errors during calculation. So you need to make sure you set, or take into consideration, what margin is doing to this. For rounding errors, it's typical to let the percentages add up to something less than 100% but then add margin: auto to center the whole thing.