I am trying to layout a couple of div's inline and want to give them a fixed width. I currently have:
<style>
.af-header{
border: 1px solid black;
}
.menu-item-header{
border: 1px solid blue;
width: 200px;
}
.menu-item-detail{
border:1px solid orange;
width: 400px;
}
.menu-item{
border: 1px solid red;
}
</style>
<table class='af-header'>
<tr>
<td width=800>
<div class='menu-item'>
<div class='menu-item-header'>my header</div>
<div class='menu-item-detail'>here is my detail</div>
</div>
</td>
</tr>
<tr>
</tr>
</table>
The problem that I'm having is that the menu-item-header and menu-item-detail collapse down to fit the text like in the following screenshot:
How do I fix the width in these two so that the width is respected?
Use display: inline-block not display: inline.
Use display:inline-block for your div elements to put them in line
.af-header div
{
display:inline-block;
}
Js Fiddle Demo
I'm not sure why are you using table here, if it only to take the advantage of column effect then you don't need to use it. You can use just div to achieve the same
<div class="af-header">
<div class='menu-item'>
<div class='menu-item-header'>my header</div>
<div class='menu-item-detail'>here is my detail</div>
</div>
</div>
Js Fiddle without table
Related
I know there are similar questions, but I was not able to find answer to my question.
I have two divs next to each other, left is fixed width of 220px and right should take up the rest of the space. The trick is that the right one contains a table that should be fluid too and always stay as wide as it can.
I tried it even without right div, so there was div on left and table on right. If I don't give the table set width of 100% its fine, but then table stays at about 150px, and does not occupy all free space (as table changes size based on content).
Here is the JSFiddle: http://jsfiddle.net/4tchm0r9/6/
.wrapper {
width: 100%;
max-width: 800px;
}
.left {
border: 1px solid green;
float: left;
width: 220px;
}
.right {
width: 100%;
border: 1px solid red;
}
<div class="wrapper">
<div class="left">
<div>
Some random irrelevant div that has fixed width of 220px no matter what and contians two divs.
</div>
<div>
Ladidaaaa? Maybe? Lolz.
</div>
</div>
<table class="right">
<tr>
<td>
Table that should occupy the rest of the space and fluidly resize!
</td>
</tr>
<tr>
<td>
Table that should occupy the rest of the space and fluidly resize!
</td>
</tr>
</table>
</div>
Thanks for any help. I Googled, but haven't found nothing.
Ps.: I can not set both of them to % or use table for it, as depending on device size, I will be swapping their positions (the two divs on left will go next to each other and the one on right will go below them).
I also can not use calc function for backwards compatibility, no JS too. Pure HTML and CSS required.
Did you tried use table properties?
The .wrapper can be the table, then their children will be the cells. Look:
.wrapper{
width: 100%;
display: table;
}
.left{
border: 1px solid green;
width: 220px;
display: table-cell;
}
.right{
border: 1px solid red;
display: table-cell;
}
<div class="wrapper">
<div class="left">
<div>
Some random irrelevant div that has fixed width of 220px no matter what and contians two divs.
</div>
<div>
Ladidaaaa? Maybe? Lolz.
</div>
</div>
<table class="right">
<tr>
<td>
Table that should occupy the rest of the space and fluidly resize!
</td>
</tr>
<tr>
<td>
Table that should occupy the rest of the space and fluidly resize!
</td>
</tr>
</table>
</div>
Fiddle: http://jsfiddle.net/83295cvs/
Add both of those divs to a 100% parent container, with position set to relative. Then, the fixed div with width of 200px should be absolutely positioned on the top left, and add padding-left to the right div equal to the left div's width.
http://jsfiddle.net/z12p0b5v/
HTML:
<div class="container">
<div class="left">
<div class="content"></div>
</div>
<div class="right">
<div class="content"></div>
</div>
</div>
CSS:
.container {
width: 100%;
position: relative;
}
.left {
position: absolute;
left: 0;
top: 0;
}
.left .content {
width: 200px;
height: 200px;
background-color: red;
}
.right {
padding-left: 200px;
}
.right .content {
background-color: blue;
width: auto;
height: 300px;
}
Just put table with width:100% into a div with display:flex
.wrapper{
width: 100%;
max-width: 800px;
}
.left{
border: 1px solid green;
float: left;
width: 200px;
}
.right{
border: 1px solid red;
width: 100%;
}
<div class="wrapper">
<div class="left">
<div>
Some random irrelevant div that has fixed width of 220px no matter what and contians two divs.
</div>
<div>
Ladidaaaa? Maybe? Lolz.
</div>
</div>
<div style="display: flex;">
<table class="right">
<tr><td>
Table that should occupy the rest of the space and fluidly resize!
</td></tr>
<tr><td>
Table that should occupy the rest of the space and fluidly resize!
</td></tr>
</table>
</div>
</div>
I have an example of the problem here:
http://jsfiddle.net/s6t3p/
I have the following markup:
<h1>Just Text</h1>
<table>
<tr>
<td class='cell'>Some Text</td>
<td class='cell'>More Text</td>
</tr>
</table>
<h1>With Icon Cell</h1>
<table>
<tr>
<td class='cell'>Some Text</td>
<td class='cell-ico'><div class='ico'></div></td>
<td class='cell'>More Text</td>
</tr>
</table>
And the following CSS:
table,td,tr
{
margin: 0; padding: 0;
border: none; outline: none;
font-size: 100%; font: inherit;
vertical-align: baseline;
}
table { border-collapse: collapse; border-spacing: 0;}
.cell
{
border:solid 1px #DDD; padding:0 5px; text-align:left;
line-height:27px;
}
.ico {width:24px; height:24px; background:#05F;}
I wish for each cell to be 27px in height. This is the case for the 1st table. But the second table which contains a cell with a 24px div has a height of 32px. I don't understand why. It seems like a 24x24 div should fit inside fine without increasing the cell height.
Can anyone explain why this is happening and how to fix it so that I can keep the cells at a height of 27px? I am currently testing with FireFox 29.
Thanks for any help.
If you are looking to display tabular data, then this is the way to go :)
The behaviour is caused by vertical-align: baseline;.
Just reset the vertical-align for .cell-ico and provide a set height. Give .ico a height of 100%.
Have a fiddle
.cell-ico {
height: 24px;
vertical-align: top;
}
.ico {
width:24px;
height: 100%;
background:#05F;
display: block;
}
try to add this inside your CSS
td{
vertical-align:middle;
height:27px;
}
Looks like vertical-align: baseline; applied to all tags table, tr, td is messing it up.
Remove it and try it out.
I'd suggest you use div elements with their respective display attributes set to either table, table-row, table-cell, etc. Instead of actual tables. The use of tables as a layout techique is discouraged since HTML4. This approach may be a little bulky, but for layout purposes it'll save you some trouble dealing with css.
Check this jsfiddle for example:
HTML:
<div id="Table">
<div class="row">
<div class="cell">Lorem ipsum</div>
<div class="cell">Lorem ipsum</div>
</div>
<div class="row">
<div class="cell">Lorem ipsum</div>
<div class="cell">Lorem ipsum</div>
</div>
</div>
<br/>
<br/>
<div id="Table">
<div class="row">
<div class="cell2"><div class="oddDiv">im inside a div</div></div>
<div class="cell2">Lorem ipsum</div>
</div>
<div class="row">
<div class="cell2">Lorem ipsum</div>
<div class="cell2">Lorem ipsum</div>
</div>
</div>
CSS:
#Table {
display: table;
width: 200px;
border-collapse: collapse;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
border: 1px solid blue;
height: 27px;
}
.cell2 {
display: table-cell;
border: 1px solid red;
height: 24px;
}
.oddDiv {
height: 24px;
width: 24px;
overflow: hidden;
}
Update, regarding semantics:
It's true that from a developer's point of view there's no difference between a table markup element and a generic container like a div with the appearance of a table in terms of layout and even code comprehension. But, there's no way for an accessibility tool, say, an screen reader, to discern between a bunch of div elements with different id's, unless the tool was proprietary or there was some kind of convention for special id's to use for this kind of purposes (which I doubt). So for layout purposes divs are the way to go, but if semantics are a concern, the use of tables is the best solution.
Can someone explain why the two table layouts below aren't the same (specifically, why the second 'table-cell' div doesn't stretch to take up the rest of the width of the 'table' parent div, as it does in the real table)?
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head></head>
<body>
<div style="width: 100%; border: 1px solid black;">
<div style="display: table-cell; border: 1px solid red; height: 20px; width: 20px;">.</div>
<div style="display: table-cell; border: 1px solid red;">.</div>
<div style="display: table-cell; border: 1px solid red; height: 20px; width: 20px;">.</div>
</div>
<table style="width: 100%; border: 1px solid black; border-spacing: 0;">
<tr>
<td style="width: 20px; border: 1px solid red;">.</td>
<td style="border: 1px solid red;">.</td>
<td style="width: 20px; border: 1px solid red;">.</td>
</tr>
</table>
</body>
</html>
Edit: turns out you get some unexpected behaviour if you try and style an image as a table-cell:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style type="text/css"><![CDATA[
* {border: 1px solid black;}
table, .table, .row {
width: 100%;
}
.table {
display: table;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
}
img {
height: 21px;
width: 21px;
}
]]></style>
</head>
<body>
<div class="table">
<div class="row">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" class="cell" />
<div class="cell">
</div>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" class="cell" />
</div>
</div>
</body>
</html>
The 2nd cell-styled div doesn't stretch all the way horizontally to fill the rest of the table width. If you add content to it, it gradually does though. Weird.
Unless the a table-cell element's parent is a table-row element (and its parent element is a table element) or table element, anonymous table and table-row elements are inserted for you. Anonymous elements cannot be styled.
If you want your table-cell elements to take up the entire available width, you need to make an explicit table element to contain them for styling purposes.
http://tinker.io/29b92
<div style="width: 100%; display: table; border: 1px solid black;">
<div style="display: table-cell; border: 1px solid red; height: 20px; width: 20px;">.</div>
<div style="display: table-cell; border: 1px solid red;">.</div>
<div style="display: table-cell; border: 1px solid red; height: 20px; width: 20px;">.</div>
</div>
Turns out the answer was 'images don't reliably style as table-cells', but I mis-simplified my initial test case. Thanks all!
You should work with tables inside other tables if you want one of your rows to expand to the same width.
Also, if your parent table is 100%, your child table can't be 100% as well, have you tried 98%?
Style your HTML in and external CSS file to prevent repeating your clause every line.
If that doesn't work, let me know and i will keep looking for more options you can try.
I'm having a table with a td having two div's. I want both of that div to be in line, but the 2nd div gets wrapped as no of columns increases. I don't want to set the fixed width for each column though.
HTML td structure:
<td class="tableHead">
<div class="tableHeadTxt">Lorem Ipsum</div>
<div class="toggler togglerImgCollapse"> </div>
</td>
div.tableHeadTxt should get a white-space: nowrap; CSS. This will make it not wrap the text, so the second div is forced to.
td.tableHead div.tableHeadTxt, td.tableHead div.toggler should get a float: left; CSS. This ensures it will render inline.
You need a third div following the other two, which has a clear: both; height: 0; width: 100%; CSS attached to it. This ensures that the td retains proper height despite having only inline elements.
Hey now you can do this as like this
Used white-space:nowrap; in your css fine and give to parent div this properties
and child div define display:inline-block; in your css file
Css
.tableHead{
border:solid 1px red;
white-space:nowrap;
}
td.tableHead > div{
border:solid 1px green;
display:inline-block;
}
HTML
<table>
<tr>
<td class="tableHead">
<div class="tableHeadTxt">Lorem Ipsum</div>
<div class="toggler togglerImgCollapse">Lorem Ipsum </div>
</td>
</tr></table>
Live demo http://jsfiddle.net/2965K/
use float in your divs
<table>
<tr>
<td class="tableHead">
<div class="tableHeadTxt" style="float:left">Lorem Ipsum</div>
<div class="toggler togglerImgCollapse" style="float:left">pbaris</div>
</td>
</tr>
</table>
http://jsfiddle.net/gkzdG/
I am using these lines:
<div style="background: transparent url("../Images/20_20.png") no-repeat center; height: 20px; width:80px; ">
<span style=" background: transparent url("../Images/ObjectType/10_10.png") no-repeat center; height: 20px; width:80px; height: 20px; width:20px; margin-left:40px; "> </span>
</div>
Hope it can help you.
I am trying to have a div with a horizontal scrollbar inside a table that has 100% width:
<div id="div1" style="border: thin solid red; width: 800px; height: 150px;">
<table id="table1" style="border: thin solid yellow; width: 100%; display: block;">
<tr>
<td>
<div id="div2" style="border: thin solid black; width: 100%; height: 150px; overflow: auto;">
<div id="div3" style="border: thin solid blue; width: 1000px;">Hello</div>
</div>
</td>
</tr>
</table>
</div>
I don't know why, but all browsers display #div2 1000px wide instead of 800px. Why is that?
How can I achieve displaying it only 800px wide and have a scrollbar inside #div2?
I don't want to specify the exact width for the <td> tag.
Wrapping div2 inside a single cell table with style="table-layout: fixed; width: 100%" appears to be a solution. See http://jsfiddle.net/gvqVN/1/.
As I remember, the div-s and table-s don't like each other :) Try to give the 800px width to the div2. Also use overflow:scroll to have the scrollbars Here is the JSFiddle
And the code:
<div id="div1" style="border: thin solid red; width: 800px; height: 150px;">
<table id="table1" style="border: thin solid yellow; width: 100%; display: block;">
<tr>
<td>
<div id="div2" style="border: thin solid black; width: 800px; height: 150px; overflow: scroll;">
<div id="div3" style="border: thin solid blue; width: 1000px;">Hello</div>
</div>
</td>
</tr>
</table>
</div>
To div id div1 add overflow: hidden
Your first line should looks like this:
<div id="div1" style="border: thin solid red; width: 800px; height: 150px; overflow: hidden;">
Because #div2's child element (#div3) has the width of 1000px.
You'll have to change the 100% width on div2 with 800px, otherwise it'll just take the width of its child div3.
EDIT: If you can't use fixed width, you could set all table elements to display:block - standard tables have a very awkward way of handling dimensions, which is why your example didn't work.
Downside of this solution is, of course, that your table won't react like a table anymore...
http://jsfiddle.net/WKG5F/