I'm trying to place 2 divs side by side inside of another div, so that I can have 2 columns of text and the outer div drawing a border around both of them:
HTML
<div id="outer">
<div id="left">
...
<div id="right">
</div>
CSS
#outer{
background-color:rgba(255,255,255,.5);
width:800px;
}
#left{
float:left;
}
#right{
width:500px;
float:right;
}
However, the outer div registers a height of 0px and so the border doesn't go around the other divs. How do I make the outer div recognize the heights of the things inside it?
It's not because the floating divs doesn't have a height, it's because the floating divs don't affect the size of the parent element.
You can use the overflow style to make the parent element take the floating elements in consideration:
#outer { overflow: auto; }
There are a couple of solutions to this issue:
#outer: overflow: hidden;
or add some non-displaying content to the outer div that comes after the floated divs that you then add a clear: both style rule to.
You can also add, through css, the :after pseudo-element to insert content after those divs that you then apply clear: both to - this has the advantage of not requiring extra markup.
My preference is the first one.
Try this:
<div id="outer">
<div id="left">
...
<div id="right">
<div style="clear:both"></div>
</div>
add overflow: hidden; to the main div.
<style type="text/css">
#outer{
background-color:rgba(255,255,255,.5);
width:800px;
overflow: hidden;
border: 1px solid green;
}
#left{
float:left;
border: 1px solid red;
}
#right{
width:500px;
float:right;
border: 1px solid yellow;
}
</style>
You could clear the float by inserting an element after the floated elements that has a clear property applied to it because floated child elements cause the parent to have 0 height since they don't take the height of the floated children into consideration.
<div id="outer">
<div id="left">
...
<div id="right">
<div class="clear"></div>
</div>
#outer{
background-color:rgba(255,255,255,.5);
width:800px;
}
#left{
float:left;
}
#right{
width:500px;
float:right;
}
.clear{ clear: both; }
You must also float the outer div.
Div's that contain floatet divs and that are not floated themselves collapse.
#outer{
background-color:rgba(255,255,255,.5);
width:800px;
float:left;
}
#left{
float:left;
width:300px;
}
#right{
width:500px;
float:right;
}
How bout like this:
<style type="text/css">
#outer{
background-color:rgba(255,255,255,.5);
width:800px;
border:thin solid #000000;
height:300px;
margin:5px;
padding:10px;
}
#left{
float:left;
border:thin dashed #000000;
width:385px;
height:100px;
margin:5px;
}
#right{
width:385px;
float:left;
border:thin dashed #000000;
height:100px;
margin:5px;
}
</style>
<div id="outer">
<div id="left">
</div>
...
<div id="right">
</div>
</div>
if div inside a parent is floated it is no longer part of parent div:check it by inspecting parent element.no to fix your problem there are two methods:
1)make a empty div at end inside parent class it as .blank all following css
.blank:after{
content: "";
clear:both;
display:block;
}
Or
2) give parent a class .clear-fix and add css
.clearfix:after {
content: "";
clear: both;
display: block;
}
it will give parent a height equal to contents
There's some questions about this but I haven't found a good answer. Been looking for a couple hours now.
Here's my jsfiddle:
http://jsfiddle.net/foreyez/Mr2ER/
I have some simple markup:
<div class='container'>
<div class='box1'></div>
<div class='box2'></div>
<div class='box3'></div>
</div>
and CSS:
.container {
white-space:nowrap;
}
.box1 {
width:200px;
height:200px;
background:red;
float:left;
}
.box2 {
width:200px;
height:200px;
background:green;
float:left;
}
.box3 {
width:200px;
height:200px;
background:blue;
float:left;
}
Yet the boxes still wrap when the window is small enough. Any suggestions?
Note: I want to keep this float:left, so no inline-block solutions please.
If you add width:600px; to the .container it will force them to stay inline.
Here's your updated JSFiddle
Give #container a width at least as large as the child divs:
.container {
white-space:nowrap;
width:9999px;
}
jsFiddle example
So I made this example here: http://jsfiddle.net/cRmCc/2/ and I was wondering what would be the best way to vertically and horizontally align nested divs inside a parent div with out using margin or padding. More preferably the exact center. I'll be using this as a reference and Google isn't that much of a help. Thanks!
HTML
<div class="container1">
<div class="container2">
Some Text
</div>
</div>
CSS
.container1 {
width:200px;
height:200px;
background-color:red;
}
.container2 {
width:100px;
height:100px;
background-color:blue;
}
You can use display:table-cell; and vertical-align:middle; along with text-align:center; and display:inline-block;
Updated Fiddle
.container1 {
width:200px;
height:200px;
background-color:red;
text-align:center;
display:table-cell;
vertical-align:middle;
}
.container2 {
width:100px;
height:100px;
background-color:blue;
display:inline-block;
}
Note: You will need a fallback for older browsers, if supported.
<div id='loadingScreen'> has a width of 0 because of the position:absolute and the positioning isn't working because of it. Adding a width of 100% to <div id='loadingScreen'> doesn't solve the problem.
CSS:
#loadingScreen{
position:relative;
}
.centered{
height:100px;
position:absolute;
top:50%;
margin-top:-50px;
}
HTML:
<div id="loadingScreen">
<div class="centered">
<!--stuff-->
</div>
</div>
.loadingScreen
{
display:table;
}
.centered
{
display:table-cell;
vertical-align:middle;
}
When you do position:absolute, you are effectively placing an object "manually" where you want it to be, meaning it shouldn't automatically align itself.
For normal vertical alignment - try line-height:(div-height); inside your css for .loadingScreen.
If your div is part of a table, try vertical-align:middle; instead.
You can do something like this:
.centered
{
height:200px;
border: 1px solid black;
vertical-align: middle;
display:table-cell;
}
Here's a Demo in JS Bin: http://jsbin.com/ireqoc/1/edit
Consider following:
<div class="wrap">
<div class="left"></div>
<div class="right"></div>
</div>
Left div has less height than the right div. Can I set the left div vertically in the middle of the right div? I can not set the margin-top because the height varies.
Here's the jsfiddle link:
http://jsfiddle.net/k8972/
Hi now used to display inline-block and give to vertical-align and remove to float
as like this
.wrap{
overflow:hidden;
border:1px solid red;
width:250px;
display:table;
}
.left{
width:100px;
height:50px;
background:yellow;
display:inline-block;
vertical-align:middle;
}
.right{
width:100px;
height:100px;
background:brown;
display:inline-block;
vertical-align:middle;
}
live demo http://jsfiddle.net/k8972/2/
You can use display: table-cell and vertical-align: middle; but it won't work on IE7 or less.
Couple of methods mentioned here
http://phrogz.net/css/vertical-align/index.html