Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

positioning inside table cells 1

Status
Not open for further replies.
jpadie

jpadie

Technical User
Nov 24, 2003
10,094
FR
i have a table cell that looks something like this
Code: 
<td>
	<div class="weekday">1</div>
	<div class="itemsContainer">
		<span class="item">something</span>
		<span class="item">something else</span>
	</div>
</td>
i am looking for some css to position the weekday at the top left of the cell and the contents of the itemsContainer at the bottom right. The cells are variable height but a fixed width. It may be possible for me to contrain the height if this is required.

I'm drawing a blank at present. i would normally try absolute positioning on the items Container and relative on the td but this does not seem to work on firefox/safari ( and i have not tried other browsers).

all help gratefully received.
thanks
Justin
 
Sort by date Sort by votes
Hi

Something like this ?
Code: 
td {
  clear: both;
}
div.weekday {
  float: left;
}
div.itemsContainer {
  float: right;
}
Of course, this may look bad unless you force some adequate [tt]width[/tt]s.

Or I just misunderstood you...

Feherke.
 
Upvote 0 Downvote
thanks for your reply. how does the above force the itemsContainer to the bottom of the table cell? i can see how it creates the right alignment.

thanks
Justin
 
Upvote 0 Downvote
Hi

You wrote that "The cells are variable height but a fixed width.", so I supposed this means the cell will as high as the content, so the itemsContainer will always touch its bottom...

Feherke.
 
Upvote 0 Downvote
sorry. i should have been more clear and provided a more fulsome snip of html.

to try and abstract the issue, let's say that the cell height is 100px.

 
Upvote 0 Downvote
i'd rather go with xhtml strict, but can live with transitional.

Off topic: [btw BRPS - could you check the email from your site's contact form]
 
Upvote 0 Downvote
Try this for size:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] lang="en" xml:lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<meta http-equiv="content-language" content="en" />

	<title>Table test</title>

	<style type="text/css">
		.hasWeekday {
			width: 100px;
			height: 200px;
			position: relative;
			display: block;
		}

		.weekday {
			position: absolute;
			top: 0px;
			left: 0px;
		}

		.itemsContainer {
			position: absolute;
			bottom: 0px;
			right: 0px;
		}

	</style>
</head>

<body>

	<table border="1">
		<tr>
			<td>A cell</td>
			<td class="hasWeekday">
				<div class="weekday">1</div>
				<div class="itemsContainer">
					<span class="item">something</span>
					<span class="item">something else</span>
				</div>
			</td>
			<td>Another cell</td>
		</tr>
	</table>
</body>
</html>

Of course it's not perfect because of the absolute positioning... you might be better off putting a nested table in that cell and using valign and align to do the job.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
thanks, Dan. i'll give it a whirl later this evening and post back.
 
Upvote 0 Downvote
Dan

thanks for your post.

the position attribute did not work with a table cell (in ff for mac and safari). and the display:block murdered the table in those browsers too.

but following on from your example, I create a 100% height/width div inside the table cell (this works because i had previously given the table cell a fixed height/width) and positioned this as relative. the absolute positioning of the other two divs then worked as expected.

thanks again
Justin
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

PeDa
  • Locked
  • Question
Display table td's as block element on mobile phone 1
Replies
3
Views
895
spamjim
spamjim
ashokkumary
  • Locked
  • Question
missing leading zero when we download in excel from html table data.
Replies
1
Views
163
spamjim
spamjim
PeDa
  • Locked
  • Question
Table not formatted correctly in all browsers 1
Replies
2
Views
168
PeDa
PeDa
PSchubert
  • Locked
  • Question
Data in db table cell not displayed in asp table cell -- a CSS issue?
Replies
2
Views
145
vacunita
vacunita
lupidol
  • Locked
  • Question
Positioning elements, how do I do it ?! 2
Replies
2
Views
130
vacunita
vacunita

Part and Inventory Search

Sponsor

Back
Top