I've searched around but can't find what I'm looking for. I'm attempting to do something rather specific, but I may just need direction in applying a more general solution.
I would like to create two columns, the left one being split into two rows, for a total of 3 internal divs. (Perhaps they shouldn't be divs; you'll let me know.) The width of both columns is predetermined, but the height of the 3 divs isn't. A little picture:
|---|
|A| |
|-|C|
|B| |
|---|
I would like the following conditions to be met:
height(A)+height(B)==height(C);
height(A)==height(B)
I created a jsfiddle, with A green, B yellow and C red; the background of the whole thing is blue. If the jsfiddle were to fulfil my requirements, the blue would always be hidden:
http://jsfiddle.net/266p3/1/
Can someone give me a hand or point me in the right direction, please?
You do not have to use a table for this. By positioning the parent #wrapper to relative and setting a height (could be 100% if your html and body is set to 100%, or a pixel value as I have in the fiddle), you can then position the columns and rows relative to the parent container. This allows you to set the rows' heights to 50%.
Here's a fiddle: http://jsfiddle.net/266p3/7/
The updated CSS:
#wrapper{
position: relative;
height: 300px;
}
#col1{
background-color: blue;
float: left;
width: 50%;
height: 100%;
}
#row1{
background-color: green;
height: 50%;
}
#row2{
position: relative;
background-color: yellow;
height: 50%;
}
#col2{
background-color: red;
float: left;
width: 50%;
height: 100%;
}
There is probably a better way to organize the CSS and even the markup for that matter, but I just added on/modified your existing fiddle.
LIVE EXAMPLE
<table>
<tr><td>A</td><td rowspan="2">C</td></tr>
<tr><td>B</td></tr>
</table>
table{
height:300px;
}
table td{
background:#eee;
padding:10px;
}
table td:first-child{
height:50%;
background:#eee;
padding:10px;
}
Using a <table> would be very usefull in this situation..
Following html can solve the problem
<table>
<tr class='equalRow'>
<td>row1 col1</td>
<td rowspan='3'>common col</td>
</tr>
<tr class='equalRow'>
<td>row2 col1</td>
</tr>
</table>
Check the Fiddle for demo
Related
I have a html structure as shown below.
<style>
.divcontainer
{
width:100%
}
.left_menu {
background: none repeat scroll 0 0 #333333;
border-radius: 5px 5px 5px 5px;
font-family: Arial,Helvetica,sans-serif;
font-size: 12px;
font-weight: bold;
padding: 5px;
width: 200px;
}
</style>
<div class="divcontainer">
<table width="100%">
<tr>
<td valign="top">
<div class="left_menu">
1
</div>
</td>
<td>
<div>
2</div>
</td>
</tr>
</table>
</div>
I need to create a structure as in the picture below
but i dont want to apply styles to TD. The width of td should be adjusted through the classes applied to the child div. In short my first td should occupied 25% of tr and the second should occupy the remaining 75%.Can anyone throw some light on how to do this?
You may set for second td a hudge width. It will then take max-width avalaible and first td will shrink to its content.
http://jsfiddle.net/f5q3E/
basicly here you need to set :
td {
background:red;
}
td+td {
width:100%;
background:blue;
}
First td will adjust to its content and sized div if any , second td will use remaining space.
There are so many ways to handle this - here is one - FIDDLE - and it's not better than any other approach.
I'm just a little confused about the coloring of your tds and the coloring of the divs that goes into them.
If you can tell us the goals of what you want to do maybe we can make some other suggestions, such as not using table for layout - divs? floated divs?
CSS
table tr td:nth-child(1) {
width: 25%;
background-color: red;
}
table tr td:nth-child(2) {
width: 75%;
background-color: blue;
color: white;
}
I have a dynamically generated div.
I have to add a dynamically generated HTML table on it.
The problem is when I'm add the table, it display as left aligned.
But the div is center aligned for text contents.
Assuming you have your table as a fixed width element, you can set margin-left/right to auto to center a block element in it's container. (Fiddle here: http://jsfiddle.net/SWakJ/)
HTML
<div id="div1">
<table id="tab">
<tr>
<td>test</td>
</tr>
</table>
</div>
CSS
#tab {
border:solid 1px black;
width: 200px;
height: 100px;
margin:2px auto;
}
You may try to add some css to your outer div.
I actually wrote a similar answer here:
Position this div in the center of it's container?
Give your code or just go quick to your code and check this. Put a div above table and set text-align= center. or if your table is in any td then assign text-align:center.
Also you can put tag and put table between it.
If you want to just center the table column than also provide text-align:center
I dont know about your code but as per problem this could help you.
function makeTable() {
row=new Array();
cell=new Array();
row_num=12; //edit this value to suit
cell_num=12; //edit this value to suit
tab=document.createElement('table');
tab.setAttribute('id','newtable');
tbo=document.createElement('tbody');
for(c=0;c<row_num;c++){
row[c]=document.createElement('tr');
for(k=0;k<cell_num;k++) {
cell[k]=document.createElement('td');
cont=document.createTextNode((c+1)*(k+1))
cell[k].appendChild(cont);
row[c].appendChild(cell[k]);
}
tbo.appendChild(row[c]);
}
tab.appendChild(tbo);
document.getElementById('mytable').appendChild(tab);
}
the you can set allignment through CSS as below:
#newtable{
border:2px solid #999;
font-family:verdana,arial,helvetica,sans-serif;
font-size:18px;
margin:auto;
}
#newtable td{
width:50px;
line-height:50px;
border:1px solid #000;
text-align:center;
}
or see this link "http://www.webmasterworld.com/javascript/3614377.htm"
You can use like this
<div id="div1">
<table id="tab">
<tr>
<td>test</td>
</tr>
</table>
</div>
CSS
#div1
{
width:500px;
text-align:center;
}
#tab {
border:solid 1px black;
width: 200px;
height: 100px;
margin:2px auto;
}
#tab td
{
/* width: 200px;
text-align:center;*/
}
Running Demo Jsfiddle
I'm trying to rewrite a site in proper HTML. The site I'm trying to replace was a complete mess. I've run into a problem where I can't get a <table> to fill the height of the <td> it's contained in. I've tried setting height: 100% on the <table>, which based on google and stackoverflow research should work, but I must be missing something stupid. I had tried to do the same thing with <divs> before switching to tables, but I'm not opposed to going back to <divs> if someone can suggest how to do it.
The content I'm developing is currently here: http://96.0.22.228/
Due to project time constraints, I've had to use bad hacks to get the pages looking correctly. I'm not declaring a <doctype> and I'm forcing IE to use IE7-quirks mode. I'd love to have recommendations on how to do this layout in a proper manner using HTML5 and CSS. It does not have to support older browsers, but it does have to look the same in the latest versions of Chrome, Firefox and IE. I'd also like to to do away with the images for the menus and style everything in CSS for the border frames and the menu text.
Even though I've had to complete the site as is, I'm open to going back and fixing it later if there's a good answer to this problem.
100% height in a table cell is always a pain. Technically speaking a TD has no height (because that depends on its contents). What you are asking the browser to do is make the child 100% of its parent, which is 100% of its child, which is 100% of its parent ... You can see how that might be a problem.
You could try adding an explicit height to the TD and using table-layout:fixed on the table. At least that way the browser knows the height of the parent without needing the height of the child but that still may not work.
You might need to rethink how you go about this.
The best solution for this is to have the parent element of the button have a height of 100% as well, assuming you want your button to have a height of 100%.
td {
height: 100%;
}
.btn {
width: 100%;
height: 100%;
}
<tr>
<td><button class="btn" id="1">1</button></td>
<td><button class="btn" id="2">2</button></td>
<td><button class="btn" id="3">3</button></td>
<td><button class="btn" id="plus">+</button></td>
<td rowspan="2"><button class="btn btn-block" id="equals">=</button></td>
</tr>
i got a one solution if you need your desired results you can adjust the padding of your (td.navigation a class link) through this you will get your results.
apply this css:-
td.navigation a {
color: #837768;
display: block;
font-size: 1.2em;
padding: 14px 5px;
text-align: center;
text-decoration: none;
}
So it's done here with divs, absolute positioning in %, and here's the part you won't like, with a specific height set in pixels. The trouble is, if you use table cells (td) the td's don't have height, and so any element inside will calculate 0 for 100% height.
When we use div's the problem is different. We can make sure they retain their height property, but there's no way to tell the div on the left, "be the same height as the div in the center." At least no way I know of. That being said, it seems like your flash object is the tallest thing, and you could easily set the height of all three div's at a pretty pixel perfect amount. Then stretch the ul navigation list to the height to 100% of the div it's nested within.
There's one other way to do this, that might meet your needs better, I'll detail it at the very bottom.
body,
html {
background: black;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#left {
position: absolute;
top: 10%;
left: 0;
background: #eeeeee;
width: 20%;
padding: 2%;
margin: 0;
}
#right {
position: absolute;
top: 10%;
left: 76%;
background: #eeeeee;
width: 20%;
padding: 2%;
margin: 0;
}
#center {
position: absolute;
top: 10%;
left: 24%;
background: #dddddd;
width: 48%;
padding: 2%;
margin: 0;
}
#flash {
background: red;
width: 500px;
height: 500px;
padding: 0;
margin: 0;
}
ul {
height: 500px;
padding: 0;
margin: 0;
padding-left: 25px;
background: #4359ac;
color: #ffffff;
}
li {
height: 10%;
padding: 0;
margin: 0;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>TheDavidFactor's Layout</title>
</head>
<body>
<div id="left">
<ul>
<li>Spa</li>
<li>Hotel</li>
<li>Activities</li>
<li>Hobbies</li>
<li>Night Life</li>
<li>Food</li>
<li>Feedback</li>
<li>Contact</li>
<li>About Us</li>
<li>Copyright</li>
</ul>
</div>
<div id="center">
<div id="flash">Here's your flash Object</div>
</div>
<div id="right">
here's the right div
<br>
<p>Let's throw some random text in here to take up space for now.</p>
</div>
</body>
</html>
The other option you have is to wrap the three columns in a container div, and define a height for that div, then stretch each of the columns to 100% height within that container div.
I have the following :
HTML
<th class="sort">
<div>
<div class="sort"></div>Last Name
</div>
</th>
css:
table.tablesorter thead th.sort
{
padding:0;
}
table.tablesorter thead th div.sort
{
margin:0;
width:15px;
height:30px;
float:left;
background: url("/Content/images/admin/sort.png") no-repeat;
background-position: 0px center;
cursor:pointer;
}
table.tablesorter thead tr th.sort a
{
cursor:pointer;
color:inherit;
vertical-align:middle;
float: left;
padding-top: 7px;
}
I want to display inner and inside vertically aligned middle and always on ONE line so that when a browser window is resized (small) it will not break and will not more underneath inner (which is what is happening now).
thanks
use the "display inline" command...
<div style="display:inline;float left;">First name</div>
<div style="display:inline;float right;">Last name</div>
Its not clear to me what "inner" and "inside" youre referring to (you mught want to update and elaborate a bit, as well as post the complete markup for the table) but it sounds like you basically want everything in the th to be in one continuous line regardless of avialable space. You can turn off the text from wrapping with whitespace: nowrap;. However your content is going to overflow the th because thats how table cells work, so you need to set overflow: hidden on something that wraps the text. Unless yo need more than one elemment inside the cells you dont need the float.
The markup might look like this:
<thead>
<th><div class="clip sort">First Name</th>
<th><div class="clip sort">Last Name</th>
</thead>
Whith the css like so:
.clip {width: 100%; overflow: hidden; whitespace: nowrap;}
th {vertical-align: middle; height: 30px;}
I'm trying to BOTTOM align an image in a fixed-height block:
div { float: left; width: 100px; height: 100px; line-height: 100px; }
div img { vertical-align: middle; }
...works in modern browsers, except IE! IE sucks no wonder, but I really need a fix, if possible.
Edited to add: Can't use tables or background image.
Many thanks
Why can't you just position:relative the division, position:absolute and mess with bottom/left properties?
Or toggle it's position to inline-block and play around.
As much as it pains me to say it and at the risk of being drawn and quartered by the purists out there, the most reliable way to vertically align something in a universally compatible way is to use a table.
table {
float: left;
width: 100px;
height: 100px;
line-height: 100px;
}
<table cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="bottom"><img src="foo.jpg" /></td>
</tr>
</table>
Simplest way to do this is to use in the DIV style="background:url(...) no-repeat center bottom" instead of IMG tag.
I can´t find it right now, but I saw something positioning the element at 50% (the top) and then giving it a negative top-margin of -50%.
Just for the vertical alignment obviously...