I am trying to style a div table using css. Here is my sample working code:
HTML:
<div class="container">
<div class="row">
<div class="table-row">
<div class="mycolumn" id="sidebar">
Sidebar area
</div>
<div class="mycolumn" id="content">
<p>content area</p>
<p>some more content</p>
</div>
</div>
</div>
</div>
CSS
#sidebar{
width: 250px;
background-color: #eaeff1;
}
.table-row {
display: table-row;
}
.mycolumn {
display: table-cell;
padding: 15px;
}
#content {
background-color:#00eff0;
/* width:100%; */
}
div {
outline: 1px solid #3a87ad;
}
http://jsfiddle.net/gbovzuqm/
How can I get content area div to cover up all the remaining space at the back? I have tried by apply width:100% to it, but it will squeeze the sidebar area.
How can I do it with CSS styling?
no need to use display:table-row use this
.table-row {
display: table;
width: 100%;
}
updated jsFiddle Code
Inorder to correct this you can do like this
.table-row {
display: table; //replace display:table-row;
width: 100%;
}
If you have set display: table-cell, it only makes sense to also set display: table-row and display: table to its ancestors in order to simulate a table.
Click here to see updated fiddle
This question could be purely academic, but just some things to think about in case you're really doing this in a real life production system: why would you want to use <div> to simulate tables and cells when you could simply use <table>, <tr> and <td>?
Also, from the words used inside the cell data, it sounds like you're using <div> as a disguise for tables in order to do page layout. PLEASE don't do this in real life. Tables for layout are hated for good reason; disguising them using other HTML tags is an even worse thing to do.
Related
How can I set the height of the div to be the same than another div with only CSS with text?
For example I have a div whose max-width is 10px and it contains the text
CSS is one of the most famous Programming Language to design webpages
and have another div whose max-width is also 10px.
<div style="max-width:10px">CSS is one of the most famous Programming Language to design webpages</div>
<div style="max-width:10px"></div>
What I want is set the height of the second div equal to the height of the First Div relative to the content. If the div has more or less text it is adjustable by it.
My fiddle: http://jsfiddle.net/p38hmoz0/
NOTE: I can't use jquery or javascript for this purpose because it would be difficult for me to add it in the polymer as it uses shadow dom.**
Since you said you can make the second div as a child of first div:
Demo: http://jsfiddle.net/p38hmoz0/6/
HTML:
<div class="parent">
CSS is one of the most famous Programming Languages to design webpages
<div></div>
</div>
CSS:
div.parent {
position: relative;
max-width: 10px;
}
div.parent > div {
max-width: 10px;
position: absolute;
top: 100%;
left: 0;
height: 100%;
border: 1px solid #0ff; /* for demo purposes */
}
You can do this with css only if you can add a wrapper and use display: table;: JS Fiddle
Note: I adjusted the max-width and added a blue background to the empty div to show the example.
HTML
<div class="table">
<div style="max-width:100px">CSS is one of the most famous Programming Language to design webpages</div>
<div style="max-width:100px" id="two"></div>
</div>
CSS
.table {
display: table;
}
.table div {
display: table-cell;
}
You can't do it the way you explain as CSS is stateless, you cannot know anything that you didn't previously defined.
I suggest you to use a wrapper and table display
HTML
<div id="wrapper">
<div id="div1" style="max-width:10px">CSS is one of the most famous Programming Language to design webpages</div>
<div id="div2" style="max-width:10px"></div>
</div>
CSS
#wrapper
{
display: table;
}
#div1
{
border: 1px solid blue;
display: table-cell;
}
#div2
{
border: 1px solid yellow;
display: table-cell;
}
JSFiddle
My problem is quite simple, but I couldn't figure out how to do it.
I have a div and inside it, I display some information . basically, something like this:
title1: 20
title2: 30
I want the title to be aligned to the left, and the number to the right.
Here is how I did http://jsfiddle.net/MmLQL/34/ . As you can see, I have a line break between the number and the title (which I believe comes from the use of h tag). But the thing is even if I use a span tag which is supposed to display elements inline and does not force line break, I lose the text-align right/left option. Here is an exmaple : http://jsfiddle.net/MmLQL/35/
You should try this way with "float:":
.container {
width: 100%;
clear: both;
}
.title {
float:left ;
display: inline;
}
.number {
float: right;
}
<div >
<div class="container">
<div class="title">title:</div>
<div class="number">number </div>
</div>
<div class="container">
<div class="title">title:</div>
<div class="number">number </div>
</div>
</div>
I'd do this woth float param. Like this: http://jsfiddle.net/dan1410/MmLQL/38/
Try this, http://jsfiddle.net/MmLQL/36/,
HTML
<div >
<h3>number </h3>
<h2 >title: </h2>
</div>
<div >
<h3>number </h3>
<h2 >title: </h2>
</div>
<div >
<h3>number </h3>
<h2 >title: </h2>
</div>
<div >
<h3>number </h3>
<h2 >title: </h2>
</div>
CSS
h2 {text-align:left}
h3 {
text-align: right;
float:right;
}
You might have to use float-clear on the divs though, this should help, http://www.positioniseverything.net/easyclearing.html,
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
..and modify the divs as class="clearfix".
I think the following should work, using inline-block to adjust the layout of the headers, then a float on the left-aligned one to ensure it's nestled against the right one.
div { width: 100%; }
h2 {
width: 50%;
display: inline-block;
float: left;
}
h3 {
display: inline-block;
width: 50%;
text-align: right;
}
You can also use CSS table/table-cells
<div class="container">
<h2>title: The Title</h2>
<h3>number</h3>
</div>
CSS:
.container {
border: 1px solid gray;
display: table;
width: 400px; /* set to 100% if full width */
}
h2 {
text-align:left;
display: table-cell;
}
h3 {
text-align: right;
display: table-cell;
}
See demo http://jsfiddle.net/audetwebdesign/pcZaq/
This approach is useful if you need some control over vertical alignment.
In addition, the table-cells will always remain on a single line, unlike floats or inline-blocks that could wrap to a second line for small screen sizes.
The choice depends in part on how you want the layout to behave in a responsive manner.
Instead of all the hacky solutions provided in other answers, it looks like you want to align tabular data. In which case, you should use a table for that.
Display:table-cell actually only exists in CSS to give the actual element and it's children their styles. It should not be used to let non-table elements behave like table elements. At least, imho.
Float:left seems like an ok alternative, if you're only looking for aligning the lay-out of the elements.
If your data actually is tabular data, then use a table. It solves your problem and is more semantic at the same time.
I would like to convert the table below into a series of DIV tags, styled with CSS. I have used text-align, and am familiar with display: block; and margin: auto type tricks, but nothing gives me the same result as this simple table layout:
<table width="100%">
<tr>
<td align="center">
<div>some objects</div>
</td>
</tr>
</table>
The issue with using the other approaches I'm familiar with is that they rely on me knowing the width of the objects I'm trying to align - which I don't. I want to be able to center arbitrarily wide objects, such as buttons and images.
margin: 0 auto; works perfectly anyway. If you are suffering from this, try to use text-align: center;
div{margin: 0 auto; text-align: center;} /* Replace div to your selector. */
After you could use text-align: left; if you like to others.
What you are doing there can be achieved with exactly this:
<div>some objects</div>
css:
div{
text-align:center;
}
No more fuzz needed. text-align basically centers the content, so you can place other elements into that div which get perfectly centered automatically.
Demo
You could use display:table;
http://jsfiddle.net/3Z4E8/
<div class"table">
<div class="row">
<div class="cell" style="text-align:center">
<div>some objects</div>
</div>
</div>
</div>
.table {
display: table;
width: 100%;
border: 1px solid blue;
}
.row {
display: table-row;
border: 1px solid red;
}
.cell {
display: table-cell;
border: 1px solid green;
}
See the docs.
You should be able to use a div like this...
HTML
<div class="example">
Some objects!
</div>
CSS
.example {
width: 60%;
margin: 0 auto;
}
I am slightly guessing that you are just using the table in order to make the div tag appear in the middle of the screen - the margin style does this.
To center child elements, which I guess are also div elements, you need to do two things.
.example {
text-align: center;
}
.example .button {
display: inline-block;
}
I can be more specific if you can show me your markup - maybe on a JSFiddle.
If you simply want your inner div to be in center of the outer container, you can simply do this (without using table):
<div class="parent">
<div>some objects</div>
</div>
Where .parent is:
.parent
{
text-align: center;
width: 100%;
}
See this fiddle.
You just have to use text-align:center CSS to center align your inner content.
Note that, parent container must have enough width to show visible spaces at the left and right ends.
I tried your code here with CSS and divs:
<html>
<head>
<style>
#td{
text-align:center;
}
</style>
</head>
<body>
<table width="100%">
<tr>
<td align="center">
<div>some objects</div>
</td>
</tr>
</table>
<div id="table">
<div id="td">
Some objects
</div>
</div>
</body>
</html>
Please run the above code. Both are displaying in the same manner. If the above is not what you want, then please can you show what you tried?
You can use text-align: center; to center the objects in a parent container without knowledge about the width of the objects.
Use tabletodivconverter.com to convert html layout table to div tag and CSS. Did I mention that it's free?
I'm trying to center the strings "1","2" and "3" vertically as seen here:
But when I use display: table-cell; vertical-align: middle; for all 3 div's, but then I get his unwanted result:
HTML is
<div id='alldivs'>
<div id='red' class='each_div'>1</div>
<div id='blue' class='each_div'>2</div>
<div id='green' class='each_div'>3</div>
</div>
CSS is
.each_div {
width: 80px;
height: 50px;
text-align: center;
display: table-cell; vertical-align: middle;
}
Demo
How do I keep the 3 div's aligned vertically while keeping vertical alignment within each div?
This is a conceptual misunderstanding. Without a parent element with display:table-row the tables cell will always span over full width, because it will create anonymous table object of table-row and table.
According to W3C Specification article: Tables
Document languages other than HTML may not contain all the elements in the CSS 2.1 table model. In these cases, the "missing" elements must be assumed in order for the table model to work. Any table element will automatically generate necessary anonymous table objects around itself, consisting of at least three nested objects corresponding to a 'table'/'inline-table' element, a 'table-row' element, and a 'table-cell' element. .....
Here is a quirksmode page showing uses of display: table and so on. A image showing the same effect as on this question.
To solve this problem semantically, you have to add an extra element to display as row.
<div id='alldivs'>
<div id='red' class='each_div'>
<div class="cell">1</div>
</div>
<div id='blue' class='each_div'>
<div class="cell">2</div>
</div>
<div id='green' class='each_div'>
<div class="cell">3</div>
</div>
</div>
Then assign relative CSS to them
#alldivs { display: table; }
.each_div {
display: table-row;
}
.cell {
width: 80px;
height: 50px;
display: table-cell;
vertical-align: middle;
border: 1px #000 solid;
}
Demo
I think there's a much simpler way, using line-height:
<div id='alldivs'>
<div id='red' class='each_div'>1</div>
<div id='blue' class='each_div'>2</div>
<div id='green' class='each_div'>3</div>
</div>
.each_div {
width: 80px;
height: 50px;
line-height:50px; // set to the same height as the div
text-align: center;
clear:both;} // add clear both to skip line
See the jsfiddle here and compare with the other answers.
You can wrap each one in another <div> with display: table-row; and it will look as you wish:
HTML:
<div id='alldivs'>
<div class="row">
<div id='red' class='each_div'>1</div>
</div>
<div class="row">
<div id='blue' class='each_div'>2</div>
</div>
<div class="row">
<div id='green' class='each_div'>3</div>
</div>
</div>
CSS:
.each_div {
width: 80px;
height: 50px;
display: table-cell;
vertical-align: middle;
border: 1px #000 solid;
}
.row {
display: table-row;
}
This is because table-* is designed to emulate a table, thus one must follow table structure to get table appearance. In this case you may just want to use a table.
I have found a work-around that works the way you want. If you wish then you can use it:
Change your CSS as:
.each_div {
width: 100%;
height: 50px;
vertical-align: middle;
text-align:center;
background:red;
}
#alldivs{
width:80px;
display:block;
}
Note that I have mentioned width:80px for the parent div alldivs
It gives the output as:
I'm using a table for the footer of my web page. I really don't know much about tables because I've always used CSS. The following is the only table I've ever made. It seems to work in Opera, Chrome, and Firefox, but everything goes to the left in IE. I'm not sure what I'm doing wrong with the table because I don't know much about tables. Here is the HTML:
<div id="framecontentBottom">
<div id="container">
<div id="row">
<div id="left">
<!-- Counter Code START --><img src="http://www.e-zeeinternet.com/count.php?page=760915&style=LED_g&nbdigits=4&reloads=1" alt="Web Counter" border="0" ><br>Page Views<!-- Counter Code END -->
</div>
<div id="middle">
Contact me at jacksterdavis<img src="images/#white.png">gmail.com
</div>
<div id="right">
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4f302421558e3fc2"></script>
<!-- AddThis Button END -->
</div>
</div>
<div id="row">
<div id="left">
</div>
<div id="middle">
<p>The internet is the printing press of the 21'st century.</p>
</div>
<div id="right">
</div>
</div>
And here is the CSS:
#container {
display: table;
width: 100%;
}
#row {
display: table-row;
}
#middle {
width:50%;
text-align:center;
display: table-cell;
}
}
#left
{
width:25%;
text-align:left;
display: table-cell;
}
#right
{
width:25%;
text-align:right;
display: table-cell;
padding: 5px;
}
#quote
{
text-align:center;
width:100%;
}
#logoBtm
{
align:middle;
text-align:center;
}
#logoBtmLeft
{
align:left;
}
#logoBtmRight
{
align:right;
}
#framecontentBottom{
clear: both;
position: relative;
z-index: 10;
margin-top: -3em;
top: auto;
bottom: 0;
height: 80px; /*Height of bottom frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: #585858;
color: white;
width: 100%;
}
If you point out everything wrong with my table it's appreciated, thanks. A CSS fix would be the best but if the HTML must be edited it's fine.
the problem most likely lies in the fact that you have two divs with the same id. use classes for row instead.removed for the comfort of others. This line doesnt help the solution at hand.
also, in referring to your comment, ie 7 does not support table display CSS.
http://caniuse.com/#search=table-cell
use a combination of inline block or float. but beware, as inline block has its own issues with ie7
http://flipc.blogspot.com/2009/02/damn-ie7-and-inline-block.html
Here is a working, valid, example.
http://jsfiddle.net/mRHnW/2/
A couple changes: Ive styled every div inside of .row so that it gets applied once (and if it needs to be fixed, it can be, in one place. Even in CSS, it needs to be DRY.
I removed the margin-top from the #frameContentBottom selector because it was screwing with jsfiddle giving me visible results. Feel free to re-instate it if its important to your layout.
I adjusted the width of your 'columns' to be slightly less than 100%, because you've also included padding. The way the CSS Box Model as specified by W3C works is that the width declaration does not include padding, border, and margin. Thus, if you're creating a 100% div, and want 5px padding, then you need to specify less than 100% to get the padding within the 100% confines.
On a sufficiently wide screen (something bigger than jsfiddle default panes), your footer should look about what you expect.