Chrome breaks divs instead of enlarging the outer container in column-width block.
One pixel more of width solves the issue. As does another list-item. How can this be avoided?
A fiddle is available here https://fiddle.jshell.net/papa_bravo/01dzhwpz/
.my-list {
border: 1px red solid;
column-width: 70px;
width: 226px;
}
.my-item {
height: 40px;
width: 50px;
display: block;
float: left;
border: 1px solid blue;
}
<div class="my-list">
<div class="my-item">Test1</div>
<div class="my-item">Test2</div>
</div>
It seems to work if you remove the float: left; of the .my-item-class.
Related
I'd like to create an outer DIV, which contains several inner DIVs. At the moment, this works perfect.
But I have some troubles with the margin of the outer div. If the outer DIV has a fixed height (f.ex. height: 100px;), there will be a margin at the bottom. But if I set the height to auto (it should have only the height of all inner DIVs), the margin-bottom disappears.
Example:
Here, the margin-bottom applies normaly. The height of the outer-box is set to a fixed height:
https://jsfiddle.net/v81mehc5/3/
But changing the height of the outer DIV from a fixed height (75px) to auto, the margin-bottom of 40px disappears.
https://jsfiddle.net/v81mehc5/2/
What's missing in the second case? What's wrong overthere?
HTML
text before
<div class="outer-box">
<div class="innerbox-left">left</div>
<div class="innerbox-right">right</div>
<div class="innerbox-left">left</div>
<div class="innerbox-right">right</div>
</div>
text after
CSS
.outer-box
{
width: 200px;
height: 75px; /*if height: auto > no margin-bottom will be applied*/
background-color: #f1f1f1;
border: thin dotted #ccc;
margin-bottom: 40px;
}
.innerbox-left
{
width: 100px;
background-color: blue;
float: left;
}
.innerbox-right
{
width: 100px;
background-color: blue;
float: right;
}
Thank you very much for your help.
Nothing is missing but you are using floating elements inside the outer div. So height:auto means height:0 in you case so you are only seeing the margin-bottom (that you thought it's the height).
In order to fix this you need to add overflow:hidden to outer div.
.outer-box
{
width: 200px;
height: auto;
overflow:auto;
background-color: #f1f1f1;
border: thin dotted #ccc;
margin-bottom: 40px;
}
.innerbox-left
{
width: 100px;
background-color: blue;
float: left;
}
.innerbox-right
{
width: 100px;
background-color: blue;
float: right;
}
text before
<div class="outer-box">
<div class="innerbox-left">left</div>
<div class="innerbox-right">right</div>
<div class="innerbox-left">left</div>
<div class="innerbox-right">right</div>
</div>
text after
More questions related to the same issue for more details :
Why does overflow hidden stop floating elements escaping their container?
CSS overflow:hidden with floats
Floating elements collapse their container. You'll see that if you apply a border to it:
<div style="border: 1px solid #666; margin-bottom: 40px;">
<div style="float: left; height: 100px; border: 1px solid #999; width: 49%;"></div>
<div style="float: right; height: 100px; border: 1px solid #999; width: 49%;"></div>
</div>
Text
You can use a clearing technique to get around this as a possible solution that works in IE8 and up:
.clearfix:after {
content: "";
display: table;
clear: both;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
<div style="border: 1px solid #666; margin-bottom: 40px;" class="clearfix">
<div style="float: left; height: 100px; border: 1px solid #999; width: 49%;"></div>
<div style="float: right; height: 100px; border: 1px solid #999; width: 49%;"></div>
</div>
Text
This is a simple piece of code, but the solutions I've tried for this problem haven't been working.
<!DOCTYPE html>
<head>
<style>
#ONE {
float: left;
border: 1px solid red;
width: 500px;
height: 50px;
}
#TWO {
float: left;
border: 1px solid yellow;
width: 500px;
height: 50px;
}
</style>
</head>
<body>
<header>
<div id="ONE"></div>
<div id="TWO"></div>
</header>
</body>
</html>
Upon resizing the browser, the "TWO" div falls below "ONE". I want to be able to keep the divs horizontal. Without resizing them based on screen width, I haven't found a suitable way to keep them horizontal on one line.
https://jsfiddle.net/hra5t6v0/
In addition to the answer by #connexo for more modern broswers that support flexbox.
* {
box-sizing: border-box;
}
header {
display: flex;
}
#ONE,
#TWO {
height: 50px;
flex: 0 0 500px;
}
#ONE {
border: 1px solid red;
}
#TWO {
border: 1px solid green
}
<header>
<div id="ONE"></div>
<div id="TWO"></div>
</header>
Again, this forces a scrollbar due to overflow at widths less than 1004px (or 1000px if using box-sizing:border-box).
JSFiddle Demo
A couple of advantages.
Firstly, the default for flexbox is nowrap so you don't have to explicitly state it.
Secondly, it doesn't suffer from the white-space issue requiring a the font reset that is often employed.
Note: In fact, you could use both techniques and the flexbox will override the inline-block if the broswer supports it....progresive enhancment!
JSfiddle Demo (both)
What you need is a combination of display: inline-block; and white-space: nowrap;.
This way you can stick to your fixed widths and the two div will stay in one line (which of course causes a horizontal scrollbar to appear if the viewport width becomes smaller than 1004px).
header {
font-size: 0; /* solves unwanted space between #ONE and #TWO */
white-space: nowrap; /* this makes inline-block children not wrap */
}
#ONE, #TWO {
display: inline-block;
font-size: 14px; /* reset font-size on children to whatever you need */
height: 50px;
width: 500px;
}
#ONE {
border: 1px solid red;
}
#TWO {
border: 1px solid yellow;
}
https://jsfiddle.net/hra5t6v0/3/
Here you go http://jsfiddle.net/DIRTY_SMITH/1j7xter3/10/
header{width: 1000px;}
#ONE {
float: left;
background-color: red;
width: 500px;
height: 50px;
}
#TWO {
float: left;
background-color: blue;
width: 500px;
height: 50px;
}
http://codepen.io/willc86/pen/hpFLe
Hey guys I have a code pen link on top so you guys can see it. I am pretty much having problems centering the middle box. How do I do that. When I do center it, the middle box seems to favor one side when I zoom out of the browser
this is my code
#box{
border: 3px solid red;
}
#space{
text-align: center;
}
#leftcolumn {
width: 300px; border: 1px solid red; float: left; margin: 40px;
margin-right: 20px;
}
#rightcolumn {
width: 300px; border: 1px solid red; float: right;
margin: 40px; margin-left: 20px;
}
#mcolumn {
width: 300px; border: 1px solid red; float: left; margin: 40px;
}
.clear {
clear: both;
}
and my HTML
<div id="box">
<div id="space">
<div id="leftcolumn"><p>LEFT</p></div>
<div id="rightcolumn"><p>RIGHT</p></div>
<div id="mcolumn"><p>mcolomn</p></div>
<div class="clear"></div>
</div>
</div>
Middle block sticks to one side because of the "float: left" rule. To be centered it needs no float. You can just add 'auto' horizontal margin without any float and it will work fine.
Here is modified example: http://codepen.io/anon/pen/pitod
(there's a trick with top padding for parent container to avoid problems with top margins, but you can solve that however you like)
hope it will help you, #mcolumn is centered now
#mcolumn {
width: 300px;
border: 1px solid red;
margin: 40px auto;
display: inline-block;
}
Demo
In the following code, I'd like the #nav div to overlap the #content div. Even though #nav has a higher z-Index value, it is still being overlapped by #content.
FIDDLE: http://jsfiddle.net/Zfcba/
HTML:
<div id="page">
<div id="nav"></div>
<div id="content"></div>
</div>
CSS:
#page
{
margin: 20px 0px;
padding: 10px;
display: block;
width: 70%;
height: 200px;
border: 1px solid gray;
}
#nav
{
float: left;
width: 40px;
height: inherit;
border: 1px solid red;
z-index: 999;
}
#content
{
float: left;
margin-left: -20px;
width: 200px;
height: inherit;
border: 1px solid blue;
background: lightgray;
z-index: 0;
}
Pretty simple code, but I can't understand what I'm doing wrong. Any help would be appreciated.
Note: I tried the same without the outer div (http://jsfiddle.net/Zfcba/1). Still the same problem. :(
Add this to your css
#above{position:absolute;}
z-index only works for absolute positioned elements. As the browser ignores the value for z-index, it will then render it in the order the elements are in your html-code. As #content is later in your code than #nav, #content will be displayed over #nav.
Given this css:
#parent {
width: 100px;
height: 100px;
background-color: #090;
}
.childs {
width: 50px;
height: 50px;
background-color: #009;
border: 1px solid #999;
}
and this html:
<div id="parent">
<div class="childs"><p>aaa</p></div>
<div class="childs"></div>
<div class="childs"></div>
</div>
this is demo
http://jsfiddle.net/A3PJu/2/
I want that children divs placing in horizontal and not in vertical (as are they now), how make this?
float: left for children tags, not working in this case
You can use display:inline-block with white-space:nowrap. Write like this:
#parent {
width: 100px;
height: 100px;
background-color: #090;
white-space:nowrap;
font-size:0;
}
.childs {
width: 50px;
height: 50px;
background-color: #008;
border: 1px solid #999;
display:inline-block;
*display:inline;/* For IE7 */
*zoom:1;/* For IE7 */
white-space:normal;
font-size:13px;
vertical-align:top;
}
Check this http://jsfiddle.net/A3PJu/3/
The problem is that the width of the parent element is not big enough for 3 times 50px .childs. If you increase the #parent width to say 200px, float: left will work.