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
Related
I'm currently creating a website and I came across a strange thing: I have a content div that's 950 width and centered on the page. Inside that I have a header div, a menu div and some other content div. I would like the menu div and that other content div to be right next to each other so I thought about using float:left on both divs. However, when I use this float:left on the menu div, it's getting pushed to the right and I can't figure out why. I think some other element is pushing it to the right.
I'm using a custom Drupal theme, a subtheme of Zen to create the page by the way.
Here's the HTML I'm using to create the page (without the header):
<div id="root">
<div class="content">
<div class="left-menu">
<ul>
<li><p>Camera</p></li>
<li><p>Audio</p></li>
<li><p>Licht</p></li>
<li><p>Lenzen</p></li>
<li><p>Grip</p></li>
<li><p>Accessoires</p></li>
<li><p>Recorders</p></li>
<li><p>Transport</p></li>
<li><p>Edit suits</p></li>
<li><p>Crew</p></li>
</ul>
</div>
<div class="products-overview">
This is some other content that I want to the right of the menu.
</div>
</div>
And here are some CSS properties I've set on left-menu and products-overview:
.left-menu {
margin-top: 10px;
background-color: #BBB;
width: 150px;
float: left;
}
.products-overview {
background-color: #BBB;
float: left;
}
Could anyone please explain me why the left-menu is being pushed to the right?
Hmm, I believe this is a result of the normalize.css stylesheet you're using.
The problem stems actually from the .header element, which has a table within it. The normalizing stylesheet has a margin-bottom:1.5em applied to the table, which translates into a margin on the .header element (since it has no padding/border), which in turn sends the .left-menu to the right (since the margin causes there to be no space for it to fit on the left).
Adding to your current .header table definition can fix this, with a simple:
.header table{
margin-bottom: 0;
}
I hope this is what you were looking for! If not, let me know and I'll be happy to help further. Good luck!
I tried to replicate your problem. I did and found a solution that should work. Just set the products-overview class to float:none. See this fiddle. http://jsfiddle.net/shaansingh/yj4Uc/
In Mozilla Firefox it looks ok to me. From your code, I can only see that you need a width for the content div. and watch the dimensions, especially left/right padding and borders.
On the website http://thornhillss.ca/pages.php?id=7 The footer looks fine in every browser. Yet in chrome it doesn't touch the bottom of the frame. Why is that. It should be a simple fix however I just dont know why it wont work.
*It should stick to the bottom of my div. Not my page.
This is because the div with the id "main2" isn't set to expand with the right-hand floated div. By default divs won't expand to fit floated child elements, so you need to tell it to hide overflow (which will tell it to expand to fit all child elements as long as you don't also give it a fixed height):
#main2 {
width: 860px;
margin-top: 15px;
margin-left: 20px;
margin-right: 20px;
position: relative;
overflow:hidden;
}
You're p.clear class has a margin on it as you're not using a reset.
If you add margin:0 to your .clear styles the margin goes away and it displays how you want it to.
This is what you are looking for it works and is awesome sticky footer
I've been googling for around half an hour and still can't find a solution.
I have a website at the minute, which has quite a lot of divs. All of these have a width of 980px and it looks fine on it's own. My only problem is that if the screen is > 980px then it just appears on the left.
Question: Are there any tags I can put around the code which will center it? I've tried <center> and hoping for pot luck but it didn't work :(
Just wrap them in a container div and give it the same width PLUS:margin: 0 auto;
<div id="container" style="width:980px; margin:0 auto;">
....your divs
</div>
Of course move the styling to your CSS file, instead of using inline styling!
Assuming that you have not twiddled with float (which forces the element to the side), used absolute positioning (which takes elements out of normal flow), or stopped the element from displaying as a block:
Set margin-left: auto; margin-right: auto; or use the shorthand notation (margin: 0 auto) (where 0 is the top and bottom margin you want).
Make sure you have a Doctype that triggers standards mode (which you should use for all modern development anyway).
See this article for more details.
If the structure is flat - there are no nested divs then you can inlcude the following in your css file:
div {
margin-left: auto;
margin-right: auto;
}
Otherwise, just wrap all divs with a <div id="wrapper"></div> and put this in the css file:
div#wrapper {
margin-left: auto;
margin-right: auto;
}
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)
I have a layout with a menu DIV on the left. This is floated left with a fixed EM width. I then have a content DIV which has a left margin of more than the menu's width. So it sits nicely to the right of the menu and fills up the remaining space with both menu and content lined up perfectly.
However, in Internet Explorer 6, if the content gets too wide it falls down below the menu. which means you have loads of whitespace and can't actually see any of the content at all without scrolling.
Unfortunately I am not able to make changes to the content - this is a redesign of a site hosting 3rd party content, and changing that content is outside the scope of what I can do.
Also, there is a footer bar that must be underneath both the menu and the content.
I managed to almost get it to work by providing IE6 with a different layout using absolute positioning - unfortunately the footer looks rubbish and as IE6 is the 2nd most used browser on our site I can't really go with that.
I also tried messing around with overflows but ended up causing problems with random scrollbars appearing all over the place which wasn't any good either.
Does anyone know if there is a simple non-Javascript way of doing this that will work in IE6 as well as "proper" browsers? I'm currently thinking that it will have to be a table based layout.
Here's an example of the problem:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
.menu {
width: 14em;
float: left;
}
.content {
margin-left: 15em;
zoom: 1;
}
.footer {
clear: both;
}
/* styling to make the demo more obvious */
.menu {
background-color: #f99;
}
.content {
background-color: #9f9;
}
.footer {
background-color: #99f;
}
td {
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="container">
<div class="menu">
<ul>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
</ul>
</div>
<div class="content">
<h1>Main Content</h1>
<table>
<tr>
<td>this is a really</td>
<td>wide table which</td>
<td>I am using to push</td>
<td>the content down</td>
<td>need to keep going</td>
<td>so that it breaks</td>
<td>in ie6</td>
<td>but naturally</td>
<td>nothing else</td>
<td>sghskdhksdhfsdhffs</td>
<td>sghskdhksdhfsdhffs</td>
<td>sghskdhksdhfsdhffs</td>
<td>sghskdhksdhfsdhffs</td>
</tr>
</table>
</div>
</div>
<div class="footer">
<p>Copyright blah blah blah</p>
</div>
</body>
</html>
As you mentioned you already tried position absolute. But I'll tried the following and it might work for you. Here is the CSS:
.container {
position:relative;
}
.menu {
width: 14em;
position:absolute;
top: 0;
left: 0 !important;
left: -15em;
}
.content {
margin-left: 15em;
}
.footer {
}
Some explanation: The menu is positioned absolute, independent of the other content. However, IE puts the menu relative to the "content" div, and hides it behind the "content" div. The work around is to position it negatively, just as many em's to the left as the content div has "margin-left". But this should only done for IE, so therefor the "left 0 !important" is added (but before the negative left), which works because IE ignores "!important" while the other browers do acknowledge it and will use "left 0".
Update:
As Alohci notes a better way would be to use the "* html" hack, in that case the CSS for "menu" becomes:
.menu {
width: 14em;
position:absolute;
top: 0;
left: 0;
}
* html .menu {
left: -15em;
}
Why not use an established layout for eg http://layouts.ironmyers.com/
or you might want to investigate this css overflow
Have a look at this, does it help?
EDIT:
Try one of these fixes:
(you could use some conditional code like #Blake suggested)
overflow:scroll -- this makes sure your content can be seen at the cost of design (scrollbars are ugly)
overflow:hidden -- just cuts off any overflow. It means people can't read the content though.
.content {
margin-left: 15em;
zoom: 1;
overflow:scroll
/* overflow:hidden */ /* probably second best */
}
Try looking at this one How to prevent long words from breaking my div? is this your problem?
Use some conditional comments for IE6 to read and place in the necessary CSS to fix the width of the problematic divs like so:
<!--[if IE 6]>
IE 6 specific stuff goes here. You can load a specific stylesheet here, or just have inline css
<![endif]-->
You can read more on the conditional comments here.
Removing the zoom: 1;
makes it work just fine for me in IE6.
Too late, but usually i get flots fixed by adding or an absolute width (a number in pixels, points or any hard measure system instead on em, % and so) or sometimes to put a min-width property solves it, also, beware of padding and borders because of the boxmodel sum.
I have run into this so many times that I just try to stay away from floats entirely. That said, there are some things you can do to make them work, but you might have to settle for a fixed with layout and/or some IE6 specific fixes. Here are some things you can try:
This may sound like heresy but
tables are not wrong for layout,
they're just not cool.
Try setting the 'container' div with
a fixed width and auto margins.
If that doesn't work, try a fixed
width 'content' div with your fixed
width 'container' div.
THanks for the position:absolute idea. This is similar to one solution I almost went with.
The problem here is that the menu will overlay the footer if the menu is longer than the content (and it quite often is). I could try to add an arbitrary height to the content to try to force a minimum height, but I won't really know how big the menu will be. There's the potential for quite a lot going down the side panel in that area.
I presume there's no way to force the relative positioned container to grow in response to the absolute positioned content, is there? Even if it's an IE6 hack, as I can use the float method for other browsers.
(Again, sorry for not posting this as a comment but I don't get that as an option)