I have a situation where I need to vertically align text inside a div that has:
A fixed width
Multiple lines of text
A float applied
Here is an example of using display:table-cell; which won't work because there is no float, which I need:
CSS:
.noFloat {
width:200px;
height:200px;
border:1px solid black;
vertical-align:middle;
display:table-cell;
}
HTML:
<div class="noFloat">
Here is some content for my div. Here is some more content for my div.
</div>
Here is an example of using line-height:; which won't work because there are multiple lines of text which ends up being a mess:
CSS:
.lineHeight {
width:200px;
height:200px;
line-height: 200px;
border:1px solid black;
}
HTML:
<div class="lineHeight">
Here is some content for my div. Here is some more content for my div.
</div>
Here is an example of using display:table-cell; with a float which won't work because of the float, which aligns everything at the top:
CSS:
.withFloat {
width:200px;
height:200px;
border:1px solid black;
vertical-align:middle;
display:table-cell;
float: left;
}
HTML:
<div class="withFloat">
Here is some content for my div. Here is some more content for my div.
</div>
Here are all 3 examples: http://jsfiddle.net/BJGh5/3/
If I understand you correctly, you will need to set a container div. One to vertically align and one to float.
Related
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
I had three divs inside a main div with id main_div and has css already as below
<div id="main_div" style="height:10px; line-height:50px; margin-top:1px; position:relative;>
</div>
I just want to insert three divs in the main div as below
<div id="main_div" style="height:10px; line-height:50px; margin-top:1px; position:relative;>
<div>
Div One should be Left(breadcrumb_text)
</div>
<div>
Div Two should be Center(dropdownlist)
</div>
<div>
Div Three should be Right(Pagination)
</div>
</div>
So i want the div format to display the text like
breadcrumb_text dropdownlist Pagination
I tried with different css by using position attribute and various css options but could n't able to align them in a horizontal line with one div as left , one div as center and other div to right.
So can anyone let me know me know the css to place them in an horizontal line ?
This maybe help you Fiddle
#main_div > div {
width: 33%;
float: left;
}
I have modified your code little bit with spacing equally for each div and removed Position in the Main div.
Sometimes position will overlap with other div (position) based on z-index value. so if you really need use position unless not required.
#main_div{
height:10px; line-height:50px; margin-top:1px;
box-sizing:border-box;
}
#main_div > div{
width:31.1%;
float:left;
box-sizing:border-box;
border:1px solid grey;
margin-right: 10px;
display:inline-block;
}
#main_div > div:first-child{
margin-left:10px;}
<div id="main_div">
<div>
Div One should be Left(breadcrumb_text)
</div>
<div>
Div Two should be Center(dropdownlist)
</div>
<div>
Div Three should be Right(Pagination)
</div>
</div>
I think this is what you are asking for
JSFiddle
CSS
body
{
margin:0%;
}
.main_div
{
display:block;
margin:0% 5%;
width:90%;/*Just random, modify as per your requirement*/
height:300px; /*Just random, modify as per your requirement*/
background:#eee;
position:relatve;
}
.left-div, .center-div, .right-div
{
display:inline-block;
height:100%;
position:relative;
float:left;
width:33%;
border:1px solid #000;
text-align:center;
padding-top:5px;
}
HTML
<div class="main_div">
<div class="left-div">
Div One should be Left(breadcrumb_text)
</div>
<div class="center-div">
Div Two should be Center(dropdownlist)
</div>
<div class="right-div">
Div Three should be Right(Pagination)
</div>
</div>
I need to show one big div with 3 divs inside it. The layout has to be fluid, i.e. the height of the big div must adapt to the contents of the 3 divs inside it. Moreover, I want the 3 divs have the same height, and I managed to do that with display:table property for the container div and display:table-cell property for the 3 inner divs. Nevertheless, there is a big problem: as soon as I put a div with a margin-top: inside the first of the three divs, it shifts downwards the content of the other two divs.
I really cannot understand why, any help would be much appreciated.
Here is the html and the css code:
<div id="body">
<div id="left-box">
<div id="left-container">
LEFT LEFT LEFT LEFT LEFT LEFT
</div>
</div>
<div id="central-box">
<div id="central-container">
CENTRAL CENTRAL CENTRAL CENTRAL CENTRAL
</div>
</div>
<div id="right-box">
<div id="right-container">
RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT
</div>
</div>
</div>
CSS:
#body {
width:80.9%;
margin:0 auto 0 auto;
height:auto;
/*background-color:#0F3;*/
display:table;
}
#left-box {
height:100%;
width:60%;
background-color:red;
display:table-cell;
border-right:1px solid #000;
}
#left-container {
background-color:#0CF;
width:72%;
margin-top:82px;
margin-left:2%;
}
#central-box {
background-color:#00F;
display:table-cell;
border-right:1px solid #000;
width:20%
}
#central-container {
margin-top:0px;
float:left;
background-color:#FF0;
}
#right-box {
background-color:#0C0;
display:table-cell;
border-right:1px solid #000;
width:19%;
}
#right-container {
margin-top:0px;
background-color:#FF0;
}
Try using vertical-align on the divs, for example something like this:
div {vertical-align:top;}
it is a similar phenomenon as with inline-block elements we discussed here
here I put your code + vertical-align on jsfiddle
<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
Ok, so I am trying to center a div with dynamic content (both its width and height are unknown because the text takes up unknown space and wraps an unknown amount of lines).
Per this post, I managed to center the div horizontally.
However when I apply the same principle to vertical centering, the block only moves 50% down (and doesn't move up at all).
JSFiddle of my problem here: http://jsfiddle.net/nMqJG/2/ ; as you can see, it is centered horizontally but not vertically...
Thanks and any help appreciated,
Edit: FYI, I am using FF10.0.2
If you don't need to support old browsers, use display: table-cell. Details here
HTML:
<div class="wrapper">
<div class="in">
DYNAMIC CONTENT DYNAMIC CONTENT DYNAMIC CONTENT DYNAMIC CONTENT
</div>
</div>
CSS:
.wrapper{
border:1px solid #F00;
width:200px;
height:200px;
display: table-cell;
vertical-align: middle
}
.in{
border:1px solid #00F;
}
Fiddle: http://jsfiddle.net/nMqJG/25/
You need to be thinking in terms of %width and %height:
.wrapper{
border:1px solid #F00;
width:200px;
height:200px;
position:relative;
}
.in{
float:left;
width:100px;
height:100px;
margin:25%;
display:inline-block;
border:1px solid #00F;
}
<div class="wrapper">
<div class="in">
DYNAMIC CONTENT
</div>
</div>
If you are using fixed pixel widths, then you are going to need to think about how your %margin will affect interior divs based on space constraints.
For example, you have a 200x200 container, with a 100x100 interior DIV. So if you move you interior div 25% away from the exterior, you are moving 200*.25 = (50px). 50+100+50 is 200 which is centering your interior div on all sides.
Will this work for you? (Borrowing code and adjusting from other answer)
.wrapper{
border:1px solid #F00;
width:200px;
height:200px;
position:absolute;
}
.in{
left: 25%;
right: 25%;
top: 25%;
bottom: 25%;
position: absolute;
display:inline-block;
border:1px solid #00F;
}
<div class="wrapper">
<div class="in">
DYNAMIC CONTENT
</div>
</div>
Using absolute positioning and 25% on all top/left/bottom/down sides should get your inner div right in the middle regardless of the wrapper size or position on the page.