I have a table set to 100% width. I will add a random div with php full of ads at times. I want the ad div to be on the right and the content of the table. I want the table to be on the left but still at 100% or so it will fill all the space to the left of the ad div.
In short, so when the div is not present the table will fill 100% width.
When the div is present the div will be on the right side of the table at a set width of 300px.
Here is the style for the div
.ContentAds {
float: right;
height: 100%;
width: 300px;
display: block;
clear: none;
}
The table is not a div but simply set to 100% width.
<table width="100%" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td><p class="Title">Title</p>
<p>This is the content. This is the content. This is the content. This is the content. This is the content. This is the content. This is the content. This is the content.. </p></td>
</tr>
</table>
For now I can only suggest to wrap your table with a positioned div. But I can't be sure that it will be sufficient to you cause you provided rather small amount of code
jsfiddle
<div class="ad">
advertise... advertise
advertise... advertise
advertise... advertise
</div>
<div class="table_wr">
<table>
<tr>
<td>
<p class="Title">Title</p>
<p>
This is the content. This is the content.
This is the content. This is the content.
This is the content. This is the content.
This is the content. This is the content..
</p>
</td>
</tr>
</table>
</div>
CSS
body {
position: relative;
}
table {
border: 1px solid black;
width: 100%;
}
.ad {
float:right;
width:300px;
height: 500px;
background-color: #a2e89f;
}
.table_wr {
position: absolute;
left: 0;
right: 300px;
}
border is set for table for you can see where table stretches
I think this won't work unless you give the table a smaller set width when the other DIV is present then you could float it to the left too.
Perhaps you could have the table set to be 100% then when the other DIV is there you add a class onto the table which adjusts the width and floats it?
Related
<table>
<tr>
<td style="vertical-align:bottom;">
<div class="notiece_board">
</div>
</td>
<td>
<div></div>
<div></div>
<div></div>
</td>
</tr>
I want to increase the height of the notiece_board to fit it with td Then after reached the height of the td the notiece_board must become scrollable. The problem is that, the height of the second td will be increased or decreased dynamically as adding/removing <div> in it. The css I used is
.notiece_board {
height: 100%;
display:block;
overflow:auto;
}
You can assign a height to the <td>.
Then make the .notiece_board overflow:scroll;and also assign a max-height that matches the td.
Here is fiddle Fiddle. You can put the second <td> to the same class as notiece_board to avoid dynamic re sizing.
table tr td .Notiece_board {
width: 100%;
height: 150%; // height have to be more than 100% of the td to make it scroll
overflow: scroll; // this makes the box scroll
}
Good luck
I have two float:left divs that are designed to stack left-to-right, one is the classic left nav and has a fixed width declared. The other is designed to span the rest of the width of the browser and fill 100% of the remaining width. Currently it does not have a width declared either natively or by any js/jQuery.
The problem comes where there is a table in the second div, which has about 10 columns of tabular results, some of them longer text. As soon as the cumulative text of the table cells pushes the table width to the size of the div it's in, the div pops under the left nav.
Is there any strategy to basically "tell the table" that it will not expand any wider than the parent div, but instead that text in the cells will wrap? I'm hoping to NOT have to use JS in any way for this.
<div id="container">
<div id="leftNav" style="width:250px;">
left<br>nav<br>here<br>
</div>
<div id="mainContent">
<table>
<tr><td>about</td><td>10</td><td>Columns and they can contain sentences of text as well, but I'd like to not have the table push the div it's in down below the left nav div. This illustrates that point!</td></tr>
</table>
</div>
</div>
and the css:
#container{
width:100%;
}
#leftNav{
float:left;
width:250px;
border:1px solid #ccc;
padding:15px;
}
#mainContent{
float:left;
background-color:aliceblue;
}
/* nothing more*/
I would use display:table for this layout. The main benefit being that the columns will always line up regardless of their content width.
html,body { height: 100%; } enables percentage heights for the child elements of <body>
The container is given display: table
The two columns are given display: table-cell
The left column is given a fixed width and the right column is given no width
Possible drawback - display: table is compatible IE8+
Read more about the display values on the MDN.
CSS / HTML / Demo
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
#container {
width: 100%;
display: table;
height: 100%;
}
#leftNav {
display: table-cell;
vertical-align: top;
width: 250px;
border: 1px solid #ccc;
padding: 15px;
}
#mainContent {
display: table-cell;
vertical-align: top;
background-color: aliceblue;
}
/* nothing more*/
<div id="container">
<div id="leftNav">left
<br>nav
<br>here
<br>
</div>
<div id="mainContent">
<table>
<tr>
<td>about</td>
<td>10</td>
<td>Columns and they can contain sentences of text as well, but I'd like to not have the table push the div it's in down below the left nav div. This illustrates that point!</td>
</tr>
</table>
</div>
</div>
Display the two parent div elements as inline tables, the table will be treated as a child table and assume table like behavior of conforming. To have cell values completely conform to the width of the cell, you can use word-break: break-all; which will give characters inline like display and break when needed.
div {
display: inline-table;
word-break: break-all;
width: 40%;
}
<div>
<p>Hello World</p>
</div>
<div>
<table>
<tr>
<td>Table</td>
<td>Table</td>
<td>Table</td>
<td>Table</td>
<td>Table</td>
<td>Table</td>
<td>Table</td>
<td>Table</td>
<td>Table</td>
</tr>
</table>
</div>
So i'm having this:
<style>
div {
position: absolute;
top: 15px;
width: 500px;
background-color: lightblue;
}
</style>
<div>
<input type="submit" style="float: left" value="leftButton">
<input type="submit" style="float: right" value="rightButton">
</div>
an absolutely positioned button bar
What I want: If the user resizes the window and makes it smaller than 500px, the buttons should get closer together instead of adding a scrollbar. Is this somehow possible?
Use width specified as percentage.
width: 80%;
And if you need you can combine this with:
min-width: 30px;
To cover the case where user sizes too small to fit items in div.
If you want flexible button widths you can simply put them in a table row where the table cells are specified using percentages. Then they will size as user adjusts width. And here again you can combine with min-width and padding etc, to keep proper spacing. Eg.
<table style="width:90%;">
<tr>
<td style="width:10%;"></td>
<td style="width:80%;"></td>
<td style="width:10%;"></td>
</tr>
</table>
EDIT:
there is a solution!
width: 70%;
max-width: 500px;
This will make your bar adjust to the window width, but never exceed 500px. (optionally, add a min-width also)
I have a 1000px wide page that holds output in a table that is much wider than the rest of the page. I have no problem with scrolling horizontally to read all of the data but the backgrounds of the surrounding divs like the header and footer are not repeating out with the large table.
I read some tips about adding "display:inline-block" to a div around the large table, but I still haven't found a solution.
Help is much appreciated.
<div id="top_ad">
</div>
<div id="header">
</div>
<table>
THIS IS THE HUGE TABLE
</table>
<div id="footer">
</div>
The header div's background is repeating out because I have the image set as the BODY's background as opposed to the "header" div. However the "top_ad" and "footer" div's backgrounds stop at 1000px. My CSS below:
body {
background:url(/images/header_background_repeat.jpg) repeat-x 0 110px;
padding:0;
margin:0;
font-family:Arial, Helvetica, sans-serif;
font-size: 13px;
color:#262626;
text-align:center;
}
#top_ad {
width:100%;
height:100px;
background: #0f3245;
text-align:center;
padding-top:10px;
}
#footer {
border-top: 6px solid #C9660D;
padding-top: 0;
width: 100%;
}
It sounds like you just need a scrollable div to contain your table. Here I use width 100% but you may want to use a width = to the width of your page.
http://jsfiddle.net/XXhzp/
<div id="tablecontainer" style="width: 100%; overflow: scroll;">
<table>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
</table>
</div>
append a width of 100% to your body
Try adding a container div around everything in the page. Presumably, that div will take on the width of the child table and will then confer that width to the other divs if they are set to 100%.
I'm trying to make a 100% height layout with a footer at the bottom. I have a site wrapper, in which I have two content divs. In the second content div I have a footer at the bottom. The problem is the top content div seems to be pushing the second content div beyond the website wrapper.
This is the code I'm experimenting with:
<style type="text/css">
html, body { height:100%;}
#sitecontainer {
height:100%;
border: medium #000 solid;
}
#contentcontainerone{
border: medium #F00 solid;
}
#contentcontainertwo{
height:100%;
border: medium #00F solid;
position:relative;
}
#footer{
position:absolute;
bottom:0;
width:100%;
text-align:center;
}
</style>
</head>
<body>
<div id="sitecontainer">
<div id="contentcontainerone">
Some content <br />
Some content <br />
Some content <br />
Some content <br />
Some content <br />
</div>
<div id="contentcontainertwo">
<div id="footer">Footer</div>
</div>
</div>
</body>
This is the link to the page: http://www.smsidat.com/test/index.html
What I basically want to achieve is that the website should always be 100% height wise and so stretch to the bottom of the browser window or where the content ends if it's of greater height with a footer at the bottom. So ideally, the div with the blue border should remain within the wrapper which has the black border and stretch no further than the bottom of the browser window or the end of the content if it's greater.
Would appreciate any ideas how to fix this, thanks.
Here the solution:
html, body
{
height: 100%;
overflow: hidden;
}
#sitecontainer
{
height: 100%;
position: relative;
}
#footer /*OUTSIDE THE CONTAINER */
{
bottom: 0;
position: absolute;
height: 50px; /*change this*/
}
Using the <table> tag is indeed not recommended for layout.
CSS3 has many ways to solve this as described above (use 100% height for the container and their parents all the way to the html tag). There are cases (ref: Eric Meyer, Smashing CSS book) however, when the CSS display: table-cell style attribute can be appropriate for layout ... such that at least it puts the layout control back in the CSS versus the content as a best-practice.
Trying to align a DIV at the bottom of another div can be tricky. There are hackish ways to accomplish this but I would recommend just using a table.
<table>
<tr>
<td><div id="header"></div></td>
</tr>
<tr>
<td><div id="content"></div></td>
</tr>
<tr>
<td><div id="footer"></div></td>
</tr>
</table>
Then use CSS to define the heights of each DIV, with the content DIV stretching with the page until overflow occurs while the header and footer DIVs stay at their original heights.