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
Related
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.
I have to create two <textarea>s in two different <div>s and both are have to come in single line. And both <textarea>s have to occupy 100% width (50% by each) in all types of screen.
However, when I am trying the second <textarea>, the right side is overflowing and even I am not able to manage right margin (in CSS) for <textarea>. How can I avoid right overflow for <textarea>?
.container {
background-color: lightblue;
border: 5px solid black;
min-height: 500px;
}
textarea {
width: 100%;
height: 100%;
border: 3px none #cccccc;
margin: 10px 10px 10px 10px;
border: 1px solid black;
}
.left {
float: left;
width: 50%;
}
.right {
float: left;
width: 50%;
}
<div class='left'>
<textarea>left </textarea>
</div>
<div class='right'>
<textarea>right</textarea>
</div>
Note the change in margin to textarea. That should do it!
.container {
background-color: lightblue;
border: 5px solid black;
min-height: 500px;
}
textarea {
width: 100%;
height: 100%;
border: 3px none #cccccc;
margin: 10px 0px 10px 0px;
border: 1px solid black;
}
.left {
float: left;
width: 50%;
}
.right {
float: left;
width: 50%;
}
<div class='left'>
<textarea>left</textarea>
</div>
<div class='right'>
<textarea>right</textarea>
</div>
you have to remove margin from your textarea because margin calculated form the outer width of the element , you can use padding to .conatiner instead.
and add a box-sizing attribute to remove the border width from the calculate width
html,body,.container{
height:100%;
margin:0;
}
.container{
background-color: lightblue;
border: 5px solid black;
padding:10px;
display: table;
width: 100%;
box-sizing: border-box;
}
textarea {
width: 100%;
height: 100%;
border: 3px none #cccccc;
border: 1px solid black;
box-sizing: border-box;
}
.left{
display: table-cell;
width:50%;
height: 100%;
}
.right{
display: table-cell;
width:50%;
height: 100%;
}
<html>
<body>
<div class="container">
<div class='left'>
<textarea>left </textarea>
</div>
<div class='right'>
<textarea>right</textarea>
</div>
</div>
</body>
</html>
Remove margin from your textarea because margin calculated form the outer width of the element, and give display: table; to container.
Remove margin. Because you are assigning 50% to each left and right textarea. so your total width will be 100%+10px; so it will overflow on x-axis
textarea {
width: 100%;
height: 100%;
border: 3px none #cccccc;
border: 1px solid black;
}
You can use iframes for that. If you use iframes you can fit the overflow to hidden both left and right side
Here is my code taken from the codepen: http://codepen.io/rags4developer/pen/ONoBpm
Please help me to fix these problems.
How do I prevent the the main div & footer from spilling out of the container div ? overflow: hidden for container will not always work !
How do I make the container div height equal to page height without setting its height to a fixed percentage ?
HTML:
<body>
<div id="container">
<div id="nav">nav links 1,2,3 etc</div>
<div id="main">
<!--no text here-->
<div id="left">left panel</div>
<div id="right">right panel</div>
</div>
<div id="footer">footer</div>
</div>
</body>
CSS:
* {box-sizing: border-box;}
html {height: 100%;}
body {height: 100%;}
#container {
border: 8px solid yellow;
height: 100%;
width: 80%;
margin: 0 auto;
}
#nav {
border: 4px solid red;
height: 15%;
}
#main {
border: 4px solid black;
height: 100%;
background: gray;
}
#left {
border-top: 4px solid green;
border-left: 4px solid green;
border-bottom: 4px solid green;
float: left;
width: 15%;
height:100%;
/*I will make this gradient later*/
background: #9e9999;
}
#right {
border: 4px solid blue;
float: right;
width: 85%;
height: 100%;
border-radius: 20px 0 0 0;
background: white;
}
#footer {
border: 4px solid pink;
clear: both;
}
I am not completely sure if I understand you correctly, but your heights (i.e. the heights within the #container div) add up to 15% + 100% + the height of the footer = at least 115% of the #container height plus the footer height, which causes the "spilling over".
I changed the #content height to 80% and added height: 5%; to the footer in this fork of your codepen: http://codepen.io/anon/pen/EKeOdm
Now everything remains within the #container. Is this what you want?
The clearfix solution still works well for floated elements, IMO. Try removing the height styles and add this:
#main:before,
#main:after {
display: table;
content: "";
}
#main:after {
clear: both;
}
Further: http://nicolasgallagher.com/micro-clearfix-hack/
Using display table should fix this.
#container {
border: 8px solid yellow;
height: 100%;
width: 80%;
margin: 0 auto;
**display: table;**
}
#content {
border: 4px solid black;
background: gray;
height: 100%;/*Not sure 100% of what ? Parent ???*/
**display: table-row;**
}
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
I just want to make everything in the 'wrapper' stretch out to fit the wrapper, but everything is being annoying and staying a fixed height??
So I wanted the 'sidebar' and the 'inside' of the 'content' area to be the same height all of the time, and i also want the 'content' to stretch to fit the 'wrapper' at all time, while having a 'header', 'nav', and 'footer'. but nothing I try seems to work. I had it at one point but lost the code and forgot what I did.. help? :c
also I was playing around to see what would happen by changing the 'wrapper's min-height, that's why it is so low.
OKAY. to specify: for one, I want the 'wrapper' to encapsulate everything inside of it and always increase its height when one of the children increase their height, like with the 'inside' div is filled with text and increases the height of the 'content'
In addition, I also want the 'sidebar' and 'inside' to keep the same height, aka why they have a height of 100% or top; 0 bottom; 0 w/e i have on here.
Html:
#wrapper {
width: 1000px;
min-height: 300px;
background-color: red;
position: relative;
margin: auto;
margin-bottom: 10px;
border: 1px solid black;
}
#header {
width: 100%;
background-color: blue;
height: 100px;
float: left;
clear: both;
position: relative;
border-bottom: 1px solid black;
}
#content {
width: 100%;
background-color: grey;
height: 100%;
float: left;
clear: both;
position: relative;
}
#sidebar {
width: 180px;
background-color: green;
float: left;
position: absolute;
top: 0px;
bottom: 0px;
padding: 10px;
border-right: 1px solid black;
}
#inside {
width: 779px;
padding: 10px;
position: absolute;
top: 0px;
bottom: 0px;
right: 0px;
background-color: orange;
float: right;
}
#footer {
width: 100%;
height: 100px;
float: left;
clear: both;
background-color: pink;
border-top: 1px solid black;
}
#nav {
width: 100%;
border-bottom: 1px solid black;
float: left;
clear: both;
height: 20px;
background-color: purple;
}
<div id="wrapper">
<div id="header">
hi
</div>
<div id="nav">
hi
</div>
<div id="content">
<div id="sidebar">
sidebar stuff
</div>
<div id="inside">
inside stuff
</div>
</div>
<div id="footer">
hi
</div>
</div>
If I understand, you're looking for same height columns.
Check these two links:
http://css-tricks.com/fluid-width-equal-height-columns/
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks