I have this table, which is how it will look when a user posts. When a large amount of content is entered in the second td, the first td does what it should naturally do and center itself with the second one. Here is what it looks like:
http://puu.sh/YdaE
Is it possible to make it so the first td stays at the top and doesn't center itself with the second one? Because it looks kind of silly when it does...
Here is the basic jist the code:
<div id="feed">
<div class="post">
<table>
<tr>
<td><img src="images/profile-pic.jpg"></td>
<td>
<div class="name">Kevin Jones</div>
<div class="message">Hanging out with my girlfriend, etc.</div>
</td>
</tr>
</table>
</div>
</div>
Any help is appreciated, thanks.
Yes, with CSS.
vertical-align: top;
So you could just give a class to your first TD and apply the above-mentioned CSS.
I'm not sure I understood your question, but if you want to prevent the image on the first td to be vertically aligned just specify vertical alignment via HTML attribute as shown here:
<div id="feed">
<div class="post">
<table>
<tr>
<td valign="top"><img src="images/profile-pic.jpg"></td>
<td>
<div class="name">Kevin Jones</div>
<div class="message">Hanging out with my girlfriend, etc.</div>
</td>
</tr>
</table>
</div>
</div>
Add valign="top" attribute to the td tag
Related
Iam trying to add html piece of code to an existing html page. I am trying to use a DIV inside TD, then display:inline css attribute for DIV, doesn't work as expected. Any reason why ?
<table>
<tr>
<td width="20%" class="oddrow"></td>
<td width="80%" class="oddrow-l">
<div style="display: inline;"> Hello</div>
<div style="display: inline;">
Hiii
</div>
</td>
</tr>
</table>
You have to set width for your table:
table {
width: 100%;
}
http://codepen.io/anon/pen/LKizB
add your display:inline to the td style as well. http://jsfiddle.net/v5Ld3/
<table>
<tr>
<td width="20%" class="oddrow"></td>
<td width="80%" class="oddrow-l" style"display: inline">
<div style"display: inline">Hello</div>
<div style"display: inline">Hiii</div>
</td>
</tr>
</table>
Use <span> instead of <div>. Also as others mentioned your table nor td have width defined, so they will use as small width as possible. span is inline anyway and could change that.
If you don't want the whole table being width: 100% you may just set width for the problematic column.
Here is my page structure with three column: 30-40-30
Here is fiddle: http://codepen.io/karimkhan/pen/BDfhJ
Proble is :
I want to position div in right section at particular height with div-height is 200px.
When I put style="height:150px" in right section div, right div remains on top and left and middle section move at 150px height.
Why?
<table border="0" width="100%">
<tr>
<td style="width:30%">
<div class="left">
Hi
</div>
</td>
<td style="width:40%">
<div class="middle">
<input type="text" id="url" width="80%">
<button type="submit" onclick="GetSentiment()" value="Submit">GetSentiment</button>
</div>
</td>
<td style="width:30%">
<div class="right" style="height:150px">
nice
</div>
</td>
</tr>
</table>
This is because the text in the <td> elements is vertically centered by default. If you apply styles to the <div>s in the other <td> elements, they will also behave. Alternatively, you can do <td valign="top"...> for each <td>.
EDIT: I notice that the code you posted above is much simpler than the code you posted on github. There may be other factors, including JavaScript or other styles affecting your production code. Without the production HTML, CSS, and scripts, it's impossible to determine everything that could be affecting the layout.
Have a look at this fiddle Here for the CSS and HTML view.
The code is:
<body>
<div class="header-bar" id="header-bar">
<div class="title-bar" id="title-bar">
<table id="header-table" class="header-table" width="100%">
<tr>
<td>
<div class="site-title" id="site-title">Site Title</div>
</td>
</tr>
<tr>
<td>
<div class="site-tagline" id="site-tagline">Site Tagline</div>
</td>
</tr>
</table>
</div>
<div class="header-login-bar" id="header-login-bar">
<div class="header-login-form" id="header-login-form">
<table>
<tr>
<th>Name</th>
<td><input type="text" name="user-email"/></td>
</tr>
<tr>
<th>Password</th>
<td><input type="password" name="user-pass"/></td>
</tr>
</table>
</div>
<div class="header-logged-in" id="header-logged-in">
Welcome {$user}.
Dashboard
Logout
</div>
</div>
</div>
<div id="content-bar" class="content-bar">
This is the content part
</div>
</body>
The div with id header-bar must contain all of the elements drawn in this segment, but I cannot understand why, this segment refuses to behave. I am new to design, using more of graphical tools like Dreamweaver with code and design views to make these things, even there the content gets placed all wrong.
And in the browser, the div with id header-bar does not show any text at all. The div with id header-bar reports a height of 0px in Chrome's Inspect Element.
Add overflow:auto to your header-bar div. When the child elements of any element are floated, they're removed from the normal flow of the document which is why your header-bar div reports a height of zero. Adding overflow:auto to the parent div (header-bar) restores the expected behavior.
jsFiddle example
I have the following example
<table align="right" border="1" cellpadding="1" cellspacing="1">
<tbody>
<tr>
<td>
test
</td>
<td>
test
</td>
</tr>
<tr>
<td>
test
</td>
<td>
test
</td>
</tr>
</tbody>
</table>
<div style="width: 100%; background-color: red">
test
</div>
If the code is run, the div will enter the floated table. The table will need to be floated so this can't change. Is there a way to stop the other content entering the floated element?
One solution is to give the table an explicit background color.
<table style="background:white; float:right" ...
See new JSFiddle.
The other answers all change other properties such as the relative widths or positions of the div and the table.
Try not to use depreciated HTML tags like align and border. Cellpadding and cellspacing can also be achieved with styles but I'll leave that as an exercise :) This will make the div take up as much space as is needed. If you know the size of the parent div which the table and this div are contained in, just set the width of the table and div to a fixed value.
<table style="float:right; border: 1px solid black;" cellpadding="1" cellspacing="1">
<tbody>
<tr>
<td>
test
</td>
<td>
test
</td>
</tr>
<tr>
<td>
test
</td>
<td>
test
</td>
</tr>
</tbody>
</table>
<div style="float:left; background-color: red">
test
</div>
http://jsfiddle.net/Shnjt/
use this
<div style="90%; margin-left:auto; margin-right:auto;">
<table style="float:right;width:45%">
</table>
<div style="width:45%;background-color: red; float:left;">
test
</div>
</div>
If you want div and table to be floated you need to set width for both and css: float: left to the div and float: right to the table.
Otherwise you can try removing width:100% from your div and adding display: inline-block.
There is a css property that controls whether an element respect the previous floating element.
Here is the documentation: http://www.w3.org/wiki/CSS/Properties/clear
I do not know what you want to get, but that might help.
# Mr.Lister....
<div style="width: 100%; background-color: red;float:left;">
test
</div>
Float:left; will be helpful to your code.
Good Luck!
I have a table with 2 columns
<table border="2">
<tr>
<td>
<div id="menupage" >
...
...
</div>
</td>
<td align="center" >
<div id="contentpage" >
...
...
</div>
</td>
</tr>
</table>
I want to keep always in top not in center if the size of <div id="contentpage" > is big
You can use the CSS vertical-align property to align the TD contents to the TOP:
vertical-align:top;
See this working Fiddle Example!
e.g.,
<table border="2">
<tr>
<td style="vertical-align:top;">
<div id="menupage">
...
</div>
</td>
<td align="center" style="vertical-align:top;">
<div id="contentpage" >
...
</div>
</td>
</tr>
</table>
You probably are looking at valign or vertical-align.
<td align="center" valign="top">
<div id="contentpage">
</div>
</td>
See http://jsfiddle.net/nivas/Y84pS/
Note that valign is a deprecated attribute (so are align and border. See Index of Attributes for a complete list.). The recommended way to get these functionality is via CSS, using vertical-align, text-align and border.
The second table in my jsfiddle example uses CSS, and gets the same functionality.
If you're going to use tables then you might as well just use valign.
eg: <div id="menupage" valign="top">
If you want to use CSS you can use vertical-align.
You could set all td's in your stylesheet like so:
td {
vertical-align: top;
}
I've no idea of your experience etc so I won't go on, but you should avoid tables for layout. You'll save yourself a lot of downvotes and "don't use tables" comments.