I am trying to add a width to a div, but I seem to be running into a problem because it has no content.
Here is the CSS and HTML I have so far, but it is not working:
CSS
body{
margin:0 auto;
width:1000px
}
ul{
width:800px;
}
ul li{
clear:both;
}
.test1{
width:200px;
float:left;
}
HTML
<body>
<div id="test">
<ul>
<li>
<div class="test1">width1</div>
<div class="test1">width2</div>
<div class="test1">width3</div>
</li>
<li>
<div class="test1"></div>
<div class="test1">width2</div>
<div class="test1">width3</div>
</li>
<li>
<div class="test1"></div>
<div class="test1">width2</div>
<div class="test1">width3</div>
</li>
</ul>
</div>
a div usually needs at least a non-breaking space ( ) in order to have a width.
Either use padding , height or   for width to take effect with empty div
EDIT:
Non zero min-height also works great
Use min-height: 1px; Everything has at least min-height of 1px so no extra space is taken up with nbsp or padding, or being forced to know the height first.
Use CSS to add a zero-width-space to your div. The content of the div will take no room but will force the div to display
.test1::before{
content: "\200B";
}
It has width but no content or height. Add a height attribute to the class test1.
There are different methods to make the empty DIV with float: left or float: right visible.
Here presents the ones I know:
set width(or min-width) with height (or min-height)
or set padding-top
or set padding-bottom
or set border-top
or set border-bottom
or use pseudo-elements: ::before or ::after with:
{content: "\200B";}
or {content: "."; visibility: hidden;}
or put inside DIV (this sometimes can bring unexpected effects eg. in combination with text-decoration: underline;)
Too late to answer, but nevertheless.
While using CSS, to style the div (content-less), the min-height property must be set to "n"px to make the div visible (works with webkits and chrome, while not sure if this trick will work on IE6 and lower)
Code:
.shape-round{
width: 40px;
min-height: 40px;
background: #FF0000;
border-radius: 50%;
}
<div class="shape-round"></div>
Try to add display:block; to your test1
I had the same issue.
I wanted icons to appear by pressing the button but without any movement and sliding the enviroment, just like bulb: on and off, appeared and dissapeared, so I needed to make an empty div with fixed sizes.
width: 13px;
min-width: 13px;
did the trick for me
By defining min width/hright for your element you can render it without content:
<div class="your-element"><div>
.your-element {
min-width: 100px;
min-height: 20px;
// This is only for observing the element space
background: blue;
}
may do the trick; works in XSL docs
If you set display: to inline-block, block, flex, ..., on the element with no content, then
For min-width to take effect on a tag with no content, you only need to apply padding for either top or bot.
For min-height to take effect on a tag with no content, you only need to apply padding for left or right.
This example showcases it; here I only sat the padding-left for the min-width to take effect on an empty span tag
You can use position:absolute to assign width and height directly, without any content.
that can easily do it if you are considering a single div.
Same problem, my initial css is width: 5px, updating it to min-width: 5px made the contentless div appear!
No need for extra height/min-height/padding/display properties
Perhaps the most elegant:
display: inline-block;
(credit: #Luccas suggestion in a comment under the top answer)
Related
This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 3 years ago.
When I change my website to
<!DOCTYPE HTML>
Every img element that is wrapped inside a DIV has a 3px bottom margin to it even though that margin is not defined in CSS. In other words, there are no style attributes that are causing that 3px bottom margin.
<div class="placeholder">
<img alt="" src="/haha.jpg" />
</div>
Now let's say haha.jpg is 50x50, and .placeholder is set to display: table. Strangely the height dimensions of .placeholder in my observation is 50x53...
Has anyone encountered this anomaly before and fixed it?
EDIT
Here is the JS FIDDLE
http://jsfiddle.net/fRpK6/
This problem is caused by the image behaving like a character of text (and so leaving a space below it where the hanging part of a "y" or "g" would go), and is solved by using the vertical-align CSS property to indicate that no such space is needed. Almost any value of vertical-align will do; I'm fond of middle, personally.
img {
vertical-align: middle;
}
jsFiddle: http://jsfiddle.net/fRpK6/1/
I often solve this by giving the image element display:block or display:inline-block as appropriate.
it is solved my problem.
line-height: 0;
I believe setting
line-height: 1;
on the image will also fix this problem, especially if it's in a block by itself.
apply display: block to the image fix it, i have this issue with images inside floated divs.
For me it was a combination of
font-size: 0px;
line-height: 0;
on the wrapping container that fixed it.
I'm not sure of the exact explanation of why it happens, but give your placeholder div font-size: 0px;
.placeholder {
font-size: 0px;
}
maybe it is the problem of the white-space that causes this.
so, the methods bellow maybe useful
img {
display: block;
}
or
img {
vertical-align: top/middle/...;
}
or
.placeholder {
font-size: 0;
}
In my special case none of the above solutions worked.
I had a wrapping div with display: flex;.
I managed to make this working by adding: align-items: flex-start; to the wrapping div AND to all the images: display: block;.
Before I explicitly told the content to align it messed up the Layout. After setting it to flex-start everything works like a charm.
not sure what's the exact problem but i have try this with 2 different option first apply class on img tag this will work and second apply font size 0 px;
http://jsfiddle.net/fRpK6/3/
It also happens with piled up divs, just add float property.
Example:
<body>
<div class="piledUpDiv">Some text</div>
<div class="piledUpDiv">Some text</div>
<div class="piledUpDiv">Some text</div>
</body>
Problematic CSS:
.piledUpDiv{
width:100%;
display:inline-block;
}
Solution:
.piledUpDiv{
width:100%;
display:inline-block;
float:left;
}
So i have this problem with parent element height 0px. I Know that parent element with floated children will have height 0, but nothing helps, and i don't know why. Some pictures and code samples:
<body>
<div class="article-container">
<article class="page-article">
<div class="title">...</div>
</article>
</div>
<aside>
<div>...</div>
</aside>
</body>
/*CSS*/
body,html{
padding:0;
margin:0;
text-align:center;
}
aside{
float: left;
width: 25%;
}
.article-container{
width:73%;
float:right;
padding: 0px 1%;
}
.page-article{
width: 90%;
display: inline-block;
overflow: hidden;
float:none;
}
chrome tells me this:
I used clearfix and that didn't help,
css-tricks - didn't help
Why is my div's height zero - didn't help
Also i've been adding 100% width divs at the end of the container with floated elements and that did help(a little), but after window resize everything crashed again. (chrome kept telling height: 0px; even before window resize)
I noticed that <aside> keeps the height, but the '.article-container' don't.
I don't know what to do next...
EDIT:
Maybe For some of people like me, that clearfix, adding spans, divs, setting overflow to hidden, setting float to the parent element Didn't help, I actually find another problem that may cause such a behaviour.
Check if your jquery or javascript doesn't use a parent element. In my case:
I am using masonry layout. > It works by placing elements in optimal position based on available vertical space.
I set it to two columns for some pages to display posts but also by mistake i've been using it on pages when wanted to have just one column and everthing crashed but none errors occured.
Thanks #syllabix for giving me right direction
Problem Solved
I know this is probably really simple, but i'm stuck on it for a while trying fiddle around with it.
Basically, this is my html setup :
<div id="main-div"><!-- Blue -->
<div id="sub-div"><!-- Red -->
<div class="content-div">
<p>This is the text. I need the button to be placed in content-div, which technically is, but it appers outside the div.</p>
BUTTON
</div>
</div>
</div>
Here is the fiddle with the CSS classes :
http://jsfiddle.net/03knuf7z/1/
What I'm trying to achieve is to have the <p> paragraph and <a> button both inside the sub-div surrounded by main-div
I've been trying to achieve this without a fixed content-div height, so I'm trying to put in height: auto; into my css hoping the content-div will stretch enough to cover both <p> and <a> elements, but that doesn't do the job, because the button still appears outside the content-div box, just like in the fiddle.
I can achieve the desired result by putting fixed height to the content-div, so if I'll change the auto in height: auto; to height: 150px;, it works and both elements, the paragraph and the button are in the box.
But thinking of responsivity on small screen devices, phone screens for example, I'd like to avoid fixed values.
Is there a way to do this without fixed height ?
You need to add an element with clear after the button with float.
You can add this to the HTML, or use the CSS :after pseudo-element to create a virtual element at the end of your content-div:
.content-div:after {
content:'';
clear:both;
display:block;
}
Updated fiddle
This can be fixed easily with a clear class. I have updated your JSFiddle.
I have added the following class:
.clear {
clear: both;
}
And this after your button:
<div class="clear"></div>
You can also use the :after property. Then you will have the use the following CSS:
.content-div:after {
display: block;
content: " ";
clear: both;
height: 0;
}
Add overflow-hidden; to .content-div.
.content-div{
font-size: 18px;
overflow: hidden;
}
jsfiddle
I have:
HTML:
<div>
<img src='http://upload.wikimedia.org/wikipedia/commons/7/70/Peace_dove_icon.svg' width='50' height='50'>
</div>
CSS:
div{
display:inline-block;
position: relative;
margin: 0;
border: 0;
padding: 0;
overflow: visible;
}
but if you inspect the page you should hopefully see a seemingly arbitrary 5px extra on the bottom of the div tag.
how can I get rid of this?
It's the descender of the img. Images behave like words and sit on the baseline in the container, which leaves space below them for descenders.
Solution: give the img display:block or use properties like vertical-align, position or float, whichever suits the situation best.
I updated the fiddle - new one here - but I must say, there is no visible difference in this case. There is nothing on the screen except the image.
You can use the vertical-align as by default, images are rendered inline, like a letter.
or set the style="display: block;"
Just give the div this css rule:
height: 50px;
Here is a working fiddle:
http://jsfiddle.net/Hive7/9JU3T/1/
line-height:0; for the div solves the problem, too!
Here's a simple menu structure:
<ul id="menu">
<li>Home</li>
<li>Test</li>
</ul>
I want the <a> to be stretched so that it fills the entire <li>. I tried using something like width: 100%; height: 100% but that had no effect. How do I stretch the anchor tag correctly?
The "a" tag is an inline level element. No inline level element may have its width set. Why? Because inline level elements are meant to represent flowing text which could in theory wrap from one line to the next. In those sorts of cases, it doesn't make sense to supply the width of the element, because you don't necessarily know if it's going to wrap or not. In order to set its width, you must change its display property to block, or inline-block:
a.wide {
display:block;
}
...
<ul id="menu">
<li><a class="wide" href="javascript:;">Home</a></li>
<li><a class="wide" href="javascript:;">Test</a></li>
</ul>
If memory serves, you can set the width on certain inline level elements in IE6, though. But that's because IE6 implements CSS incorrectly and wants to confuse you.
Just style the A with a display:block;:
ul#menu li a { display: block;}
display:flex
is the HTML5 way.
See Fiddle
Useful to hack frameworks buttons, or any other element, but you may need to remove their padding first, and set them to the desired height.
In this case, angular-material tabs, which are kind of tricky to make them work as a "standard" website nav.
Notice that the pointer changes as soon as you enter the tab : the < a > are now stretched to fit their parent dimensions.
Out of topic, notice how flawless angular-material displays the ripple effect, even on a "large surface".
.md-header{
/* THIS IS A CUSTOM HEIGHT */
height: 50vh !important; /* '!important' IS JSFIDDLE SPECIFIC */
}
md-tab{
padding: 0 !important; /* '!important' IS JSFIDDLE SPECIFIC */
}
a{
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
UPDATE 2018
AngularJS Material throws a (gentle) warning when using flex on button elements, so don't assume all HTML elements/tags can handle display:flex properly, or have a homogeneous behaviour across browsers.
Remember to consult flexbugs in case of unexpected behaviour in a particular browser.
A different approach:
<ul>
<li>
<a></a>
<img>
<morestuff>TEXTEXTEXT</morestuff>
</li>
</ul>
a {
position: absolute;
top: 0;
left: 0;
z-index: [higher than anything else inside parent]
width:100%;
height: 100%;
}
This is helpful if the link's container also has images and such inside of it, or is of potentially different sizes depending on image / content size. With this, the anchor tag itself can be empty, and you can arrange other elements inside of anchor's container however you want. Anchor will always match the size of the parent, and will be on top, to make the entire li clickable.
I used this code to fill the width and height 100%
HTML
<ul>
<li>
<a>I need to fill 100% width and height!</a>
</li>
<ul>
CSS
li a {
display: block;
height: 100%; /* Missing from other answers */
}
Just changing the display property to block didn't work for me.
I removed the padding of li and set the same padding for a.
li a {
display:block;
padding: 4px 8px;
}
<!doctype html>
<html>
<head>
<style type="text/css">
#wide li a {
display:block;
}
</style>
</head>
<body>
<ul id="menu">
<li>Home</li>
<li>Test</li>
</ul>
</body>
</html>
You should try to avoid using a class on every tag so your content remains easy to maintain.
Use line-height and text-indent instead of padding for li element, and use display: block; for anchor tag
I wanted this functionality only on tab view i.e below 720px, so in media query I made:
#media(max-width:720px){
a{
display:block;
width:100%;
}
}
If your <li>s had to have a specific height then your <a>s would only stretch to the <li>'s width and not the height anymore.
One way I solve this is to use CSS display:block and add paddings to my <a>s
OR
wrap the <a>s around the <li>s
<ul id="menu">
<li>Home</li>
<li>Test</li>
</ul>