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>
Related
need help to make table responsive.
On this size everything is ok:
but when screen size is reduced im getting smth like this:
table is displayed on col-md-7:
<div class="row">
<div class="col-md-7">
<div class="ritekhela-fancy-title-two">
<h2>Turnyrinė lentelė</h2>
</div>
<div class="rs-point-table sec-spacer">
<div class="tab-content">
<table>
<tr>
<td>Vieta</td>
<td class="team-name">Komanda</td>
<td>Sužaista</td>
<td>Perg.</td>
<td>Lyg.</td>
<td>Laim.</td>
<td>Įm.</td>
<td>Pr.</td>
<td>+/-</td>
<td>Taškai</td>
</tr>
<tr>
<td>01</td>
<td class="team-name">Banani FC</td>
<td>60</td>
<td>35</td>
<td>08</td>
<td>16</td>
<td>02</td>
<td>04</td>
<td>11</td>
<td>95</td>
</tr>
</table>
</div>
</div>
</div>
EDITED:
If i trying to add max and min width, marked place is reducing too much:
I've had a look into your second example.
the troubling part is obviously your title bar, whose elements are inside the class ritekhela-fancy-title-two
And you have a wrapping div around this class, named row, this div needs to get set to adapt its width to the nested content.
Since fit-content is experimental and not available at all browsers, you'll need set width to auto and make it behave as an inline block
Then you must set the width of your ritekhela-fancy-title-two class to auto and remove the float:left, or set it to float:none and it will neither overflow on larger screens or not expand to the width of table on smaller screens.
that's it, check the fiddle with above changes implemented
these are the two css styles which were changed/added:
.row {
width: fit-content; /*works with Chrome, but not with FF*/
width: auto;
display: inline-block;
}
.ritekhela-fancy-title-two {
float: none;
width: auto;
padding: 12px 20px 12px 60px;
border-top: 7px solid;
background: url(/css/images/transparent-pattren.png);
position: relative;
margin-top: 30px;
background-color: #6c757d;
}
edit: as above changes also affect the lower title bars, which is easy to correct, adding some height to the second row:
.ec-nextmatch {
border: 1px solid #f3f3f3;
border-top: none;
background-color: #fff;
margin-bottom: 60px;
float:none;
height:90px;
width:auto;
}
also remove .ec-nextmatch from this css, so it looks now:
.ec-team-matches, .ec-match-countdown, .ec-match-countdown .countdown-row, .ec-ticket-button {
float: left;
width: 100%;
}
If you want to avoid the hassle of reducing font sizes, table cells widths, etc. I would recommend using the Bootstrap responsive table utility, basically makes the table scroll horizontally. Can be achieved like so...
...
<div class="tab-content table-responsive">
<table class="table">
...
</table>
</div>
...
I would like to align an image with a table on the same line.
I have tried to use the vertical-align : middle CSS Property but it doesn't work right. the table is not centered with the middle of the image.
<div align="center">
<img src="timing-overview.png" width="800px"/>
<table border style="display: inline-block; vertical-align: middle;">...</table>
</div>
I have tried to replace inline-block display property by inline-table or table without any success.
The solution I found is to set a vertical-align: top and add these 2 properties : position: relative and top: Xpx.
But I need to adjust the pixel number from top which is depending of the image and table size.
<div align="center">
<img src="timing-overview.png" width="800px"/>
<table border style="display: inline-block; vertical-align: top; position: relative; top: 50px;">...</table>
</div>
In my case, the image height is greater than the table height.
Is someone have a idea ?
Regards
You shouldn't use display property for table because it already has property display: table. Wrap your table in a div instead and add style display: inline-block to that div.
.table-wrap {
display: inline-block;
vertical-align: middle;
}
img {
vertical-align: middle;
}
td {
padding: 10px;
border: solid 1px black;
}
<img src="https://s-media-cache-ak0.pinimg.com/236x/38/21/61/3821618a4005b0b4aaaa741a53f496e9.jpg" width="200px"/>
<div class="table-wrap">
<table>
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
<tr><td>4</td></tr>
<tr><td>5</td></tr>
</table>
</div>
You could use flexbox to achieve easily what you want. See my example below. The div .center has everything in it.
The CSS3 Flexible Box, or flexbox, is a layout mode providing
for the arrangement of elements on a page such that the elements
behave predictably when the page layout must accommodate different
screen sizes and different display devices.
Read more about flexbox at Mozilla Developer Network.
.center {
width: 100%;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
}
<div class="center">
<img src="http://i.imgur.com/AzeiaRY.jpg" width="400px"/>
<table border style="">
<tr>
<td>BLALBLALBLALBLALBAL</td>
</tr>
</table>
</div>
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?
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 writing a web page where I show a title and a date over some text.
Blog post header http://filesmelt.com/dl/head00.png
My HTML:
<div class="post">
<h2>Post 1</h2>
<span class="date">February 28, 2011</span>
<div class="post-content">
...
</div>
</div>
My css:
.post h2
{
float: left;
}
.date
{
float: right;
}
.post-content
{
clear: both;
}
What I want to do is vertically align the title and date such that their bottoms match. Right now they don't:
Blog post header with alignment lines http://filesmelt.com/dl/head01.png
I tried wrapping the two text elements in a div, setting the div's position to relative, and using absolute positioning on the two text elements (and taking out the float declarations). That didn't work because the top margin is not preserved due to the wrapper div collapsing, even though I gave it a clearfix class.
Many of the other answers tell you to correct the difference by applying a static number for padding/line-height which I think is a bad solution. If you "correct" a difference with a static number and in the future the difference changes you have to change all the static numbers. Imagine you apply a padding to the Date div and later the font-size of the h2 changes, you'd have to change the padding.
Try this:
<div class="wrapper">
<h2>Post 1</h2>
<span class="date">February 28, 2011</span>
</div>
And css:
.post h2 {
display: inline-block;
}
.wrapper {
position: relative;
}
.date {
display: inline-block;
position: absolute;
right: 0;
bottom: 0;
}
Use padding-top for for class Date
.date
{
float: right;
padding-top:15px;//Distance between the red lines in second image
}
This should fix it
.date
{
float: right;
line-height:150%;
}
I know a lot of people would disagree, and it is a little verbose, but a <table> would solve this issue nicely:
/*CSS Somewhere*/
table {width:100%;}
td {vertical-align:bottom;}
<!--HTML-->
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left">
<h2>Post 1</h2>
</td>
<td align="right">
<span>Feb...</span>
</td>
</tr>
</table>
try specifying line-height for the h2 and span
Syntax: line-height: <value>;
Possible Values:
* normal
* <length> - for example, 10px
* <number> - multiplied with the current font size
* <percentage> - for example, 130% of current font size
* inherit
for example:
h2, span.date {
line-height: 20px;
}
and you might also need to set:
span.date{
display:block;
}
here is a similar question
Vertically align floating DIVs
You can also accomplish this in some scenarios by putting a floated and cleared span inside the h2:
<h2>Actual header text
<span style="display: inline-block; float: right; clear: both;">Some floated content</span>
</h2>
This span will align with the bottom of the h2. Inside it, you can do whatever you want; when the page is shrunk, the floated content will go neatly under the header text.