Does anyone know why I don't get a top-margin in the first div based on the CSS below? This renders the same in Chrome, Safari and Firefox 4 running on Mac OSX Lion (rendered the same in Snow Leopard). I would expect the first item to display with a 5px margin all the way around the inner div (except for the bottom obviously) and not just on the right and left. Why would the margin not also be applied to the top? Even if I specify margin-top:5px in the CSS it still doesn't render as I would expect.
<!DOCTYPE html>
<html>
<head>
<style>
.outer{
background-color:red;
width:100px;
height:100px;
margin-bottom:20px;
}
.inner{
background-color:white;
margin:5px;
}
.shim{
height:1px;
}
.outer2{
background-color:red;
width:100px;
height:100px;
margin-bottom:20px;
padding:5px;
}
.inner2{
background-color:white;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">
Margin
</div>
</div>
<div class="outer">
<div class="shim"></div>
<div class="inner">
Margin+Shim
</div>
</div>
<div class="outer2">
<div class="inner2">
Padding
</div>
</div>
</body>
</html>
You're running into a common problem called "collapsing margins." Basically, whenever vertical margins touch (even when one element is inside another element), the margins collapse.
In this case your margin property on the inner div is collapsing into the margin-bottom: 20px; property on your outer div. To fix this, add a little padding or a border around the containing element.
Just tried this using your code and it works:
http://jsfiddle.net/hWPyD/2/
More info on collapsing margins:
http://www.w3.org/TR/CSS2/box.html#collapsing-margins
Its because there is a default margin and padding on html tags. Use a reset like this one to remove all of the browser defaults. (I highly recommend doing this)
Related
Ok, so I'm fighting with vertical alignment and on the verge of mental collapse. My hacky solution finally seems to work otherwise, but Chrome fucks up the baseline somehow.
Here's the fiddle:
https://jsfiddle.net/53272b1v/10/
Here's the pasted code:
<div class="outer">
<div class="img"></div>
<div class="main">
<div style="display:flex;height:100%;align-items:center;">
VITTUSAATANA
</div>
</div>
</div>
css:
div.outer{
}
div.main{
height:51px;
display:inline-block;
border:1px solid red;
}
div.img{
background-image:url("https://digiluovuus.files.wordpress.com/2010/04/media_httpkotiwelhoco_cfizk-scaled5001.jpg?w=409&h=517");
background-size:100%;
width:41px;
height:51px;
display:inline-block;
}
Works fine with firefox, but on Chrome (fresh version that seems to have hidden the version number to a place I can't be arsed to search).
The text should be aligned to the middle of the picture and middle of its parent element + the parent should be in line with the picture. This is what I'm seeing with Firefox.
But on Chrome, the text's parent element is dragged down so that the text is aligned to the bottom of the image.
.img and .main need to be display:inline-block and the solution should involve only touching the main element + it's children.
I think your problem is for mixing flexbox with inline-block elements. The solution is remove the flexbox and adding vertical-align. It will be working in all browsers:
https://jsfiddle.net/53272b1v/11/
div.main,
div.img{
vertical-align:top;
}
EDIT
Just add the vertical-align property:
https://jsfiddle.net/53272b1v/14/
Just add float: left; it worked in Chrome too...
<div style="display:flex;height:100%;align-items:center;float:left;">VITTUSAATANA</div>
Here is a code snippet showing the problem:
<!Doctype html>
<html>
<head>
<style>
.writingMode {
writing-mode:tb-rl;
-webkit-writing-mode:vertical-rl;
writing-mode:vertical-rl;
border: 5px green solid;
word-break:break-word;
overflow:hidden;
min-height:200px;
width:100px;
}
</style>
</head>
<body>
<div style="background-color:yellow; height:500px; width:200px; float:left;">
<div class="writingMode">
All of these should be the same height pneumonoultramicroscopicsilicavolcaniconiosis
</div>
</div>
<div style="background-color:orange; height:600px; width:200px; float:left;">
<div class="writingMode">
pneumonoultramicroscopicsilicavolcaniconiosis
</div>
</div>
<div style="background-color:yellow; height:700px; width:200px; float:left;">
<div class="writingMode">
All of these should be the same height pneumonoultramicroscopicsilicavolcaniconiosis pneumonoultramicroscopicsilicavolcaniconiosis pneumonoultramicroscopicsilicavolcaniconiosis
</div>
</div>
</body>
</html>
I would like all of the inner divs to be the same height, as dictated by the longest word in them. Instead, they are growing to the height of their parents, with the exception of the middle one in Chrome. Is there a CSS tag I could use to make them grow to the minimum height (above the given min-height) that fits all of the text based on a break-word word wrapping? It seems logical to me that what I have would do that but it isn't.
Edit:
The outer Divs (the big yellow and orange ones) should stay different heights, but the inner Divs should all be the same height because their longest words are all the same.
Thanks!
Remove the height form your parent element and the min-height from the children.
I made a fiddle. I hope this is what you mean?
.writingMode {
writing-mode:tb-rl;
-webkit-writing-mode:vertical-rl;
writing-mode:vertical-rl;
border: 5px green solid;
word-break:break-word;
overflow:hidden;
width:100px;
}
I have a max-width wrapper, within it are four boxes of a fixed width and height. When the browser window is reduced, the boxes fall inline and centered within the container, but the alignment is slightly out, as if there's a small left margin.
Here is a jsfiddle: http://jsfiddle.net/ve2fyrh7/
If I remove "text-align:center;" from #boxcontainer it clears up the alignment issue, but then the boxes won't be center-aligned inside the container which I require when the browser window is reduced.
If I remove ".box:last-child" then that also solves the alignment issue, but then all four boxes won't be inline when the browser window is >960px.
I appreciate any help/suggestions on where I'm going wrong.
CSS
#wrapper {
max-width:960px;
margin:0px auto 0px auto;
}
#boxcontainer {
width:100%;
background:#f8f8f8;
font-size:0;
text-align:center;
}
.box {
width:225px;
height:200px;
display:inline-block;
background:#ccc;
font-size:18px;
margin:0px 20px 20px 0px;
}
.box:last-child {
margin-right:0px;
}
HTML
<div id="wrapper">
<div id="boxcontainer">
<div class="box">
<h3>Test</h3>
</div>
<div class="box">
<h3>Test</h3>
</div>
<div class="box">
<h3>Test</h3>
</div>
<div class="box">
<h3>Test</h3>
</div>
</div>
</div>
Add float:left to your box class.
If you want to solve this on a specific media device use media query.
The margin-right:0px; on the the last div is causing the spacing issue. If i remove that, it seems to be fine. http://jsfiddle.net/ve2fyrh7/2/.
I'm having a doubt in the basics of the HTML rendering. I'm having the following HTML/CSS.
http://jsfiddle.net/cgZ4C/2/
<style type="text/css">
.outer
{
background-color:#DADADA;
width:400px;
border:1px solid silver;
margin:auto;
min-height:50px;
padding:10px;
}
.content
{
float:left;
width:196px;
min-height:20px;
background-color:#BABABA;
margin:2px;
}
</style>
<div class="outer">
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div>
Why is the outer div not growing when the inner content grows? Even I tried adding some text inside .content divs. But still the .outer div is not growing?
You need to add overflow property to your outer div and assign proper value to it like
overflow:hidden
Find what is the most suitable for your need here
Here is the possible code change you need:
.outer
{
background-color:#DADADA;
width:400px;
border:1px solid silver;
margin:auto;
min-height:50px;
padding:10px;
overflow:hidden;
}
CLEAR YOUR FLOATS! Always :-)
Add overflow:auto; like in this code: http://jsfiddle.net/cgZ4C/3/
Many CSS frameworks these days use a class clearfix . That has become the de facto standard. Twitter bootstrap uses it as well. What we need to do is just add a class clearfix to the outer div and you'll be done :)
Although Clearing floats is the correct way to go, sometimes, there is another way you can do this:
float your outer div too!!!
.outer {
float: left;
}
This way, the outer will respect the floated children and expand, but you'll need to float the parent div of outer too, and so on, until there is a ancestor div which is cleared/<body> is encountered.
All floats are like bro's so go along with each other much better than non-floated non-cleared divs.
:)
Add attribute overflow: hidden to the .outer style.
It doesn't grow because all of your content within the parent is floated. When an element is floated, it is no longer taken into consideration by the parent when it calculates it's total size. Since every element is floated, as far as the parent is concerned there is no content, so it doesn't resize.
Your code looks like a table so, with display:table (source) the element will behave like a table element.
http://jsfiddle.net/eWwtp/
.outer
{
background-color:#DADADA;
width:400px;
border:1px solid silver;
margin:auto;
min-height:50px;
padding:10px;
display:table
}
Another solution, that avoid these issues:
But with overflow hidden, more issues can arise where items outside of that div are hidden, or cut off (usually with menus etc).
http://jsfiddle.net/4LqaK/
Add:
<div class="clear"></div>
.clear{clear:both}
This seems incredibly simple but I have no idea why I can't put a div tag inside of a container div tag as it will not show up in Firefox or Chrome properly, but it works in IE6...??? Code is as follows:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="container">
<div id="nav">
<p>Hello</p>
</div>
</div>
</body>
</html>
CSS: style.css
body {
background:white;
font-family: sans-serif;
}
#container {
margin:0 auto;
width:960px;
background:#e3e3e3;
border:1px solid black;
}
#nav {
padding:10px;
margin-top:10px;
float:left;
width: 400px;
height:100px;
background:white;
border:1 px solid black;
}
It's as if the container is not expanding with the DIV tag inside of it..what gives?
This is a common issue people face with CSS. Whenever you float something, it's parent collapses as you are seeing. You can work around it in the following ways:
set an explicit height on the container
put overflow:hidden or overflow:auto on the container
use the clearfix hack: http://nicolasgallagher.com/micro-clearfix-hack/
I find #2 to be the easiest and best in most cases. Use #3 when overflow:hidden/auto has an undesirable side effect.
It is because the #nav div is floated left. Floated elements are just that--floating, and have no height unless something anchors the box below it by clearing the floats.
.clear { clear: both }
and add a div below the floating div to clear it.
<div id="container">
<div id="nav">
<p>Hello</p>
</div>
<div class="clear"></div>
</div>
See this SO question for a very detailed answer on clearfixes: What methods of ‘clearfix’ can I use?
Do overflow: hidden for #container.
This is one known limitation of floating.
Before: http://jsfiddle.net/N669N/
After: http://jsfiddle.net/N669N/1/