Can css move a sibling block level element to adjacent is previous block sibling?

In the code below, I’m trying to move the .myWidget div to the right of the .form-table table as if it were an adjacent table cell in a single row, 2 column table.

So the .form-table table would be inside of the left cell and .myWidget would be inside of the right cell (if I could create an adjacent cell on .myTable and place .myWidget inside that cell and aligned to the top, which I know is possible with javascript, but I want to try css first).

The table cell of .myWidget would be a fixed width of my definitation and the table cell of the .form_table table would expand to fill the rest of the available width.

Considering that I can’t change the markup of .form-table, what are my options in css to achieve the layout?


<div class="wrap"> 
	<h2>Edit Category</h2> 
	<div id="ajax-response"></div> 
	<form name="edittag" id="edittag" method="post" action="edit-tags.php" class="validate"> 
	<table class="form-table"> 
			<tr class="form-field form-required"> 
				<th scope="row" valign="top"><label for="name">Name</label></th> 
				<td><p class="description">The name is how it appears on your site.</p></td> 
			</tr> 
			<tr class="form-field"> 
				<th scope="row" valign="top"><label for="slug">Slug</label></th> 
				<td><p class="description">test.</p></td> 
			</tr> 
			<tr class="form-field"> 
				<th scope="row" valign="top"><label for="parent">Parent</label></th> 
				<td></td> 
			</tr> 
			<tr class="form-field"> 
				<th scope="row" valign="top"><label for="description">Description</label></th> 
				<td><textarea name="description" id="description" rows="5" cols="50" style="width: 97%;">description text</span></td> 
			</tr> 
	</table> 
		<div class="myWidget">This is my include comes in the flow</div>
		</table> 
	<p class="submit"><input type="submit" class="button-primary" name="submit" value="Update" /></p> 
	</form> 
</div> 

Hi,

Couldn’t decide what the code should be completely. The parent table is missing? The table would affect a potential solution. The textarea is missing the end tag. A span end tag is alone.

Please check your posted code again and see if there is a few lines missing.

Along with what Erik said, it’d be a wise decision to go validate your code :).

Too late to edit the OP, here’s the correctly nested code. I had just edited it before the OP to make it more readable. The mistakes where in the posting and editing of the posting, not the original code validation.

<div class="wrap"> 
	<h2>Edit Category</h2> 
	<div id="ajax-response"></div> 
	<form name="edittag" id="edittag" method="post" action="edit-tags.php" class="validate"> 
	<table class="form-table"> 
			<tr class="form-field form-required"> 
				<th scope="row" valign="top"><label for="name">Name</label></th> 
				<td><p class="description">The name is how it appears on your site.</p></td> 
			</tr> 
			<tr class="form-field"> 
				<th scope="row" valign="top"><label for="slug">Slug</label></th> 
				<td><p class="description">test.</p></td> 
			</tr> 
			<tr class="form-field"> 
				<th scope="row" valign="top"><label for="parent">Parent</label></th> 
				<td></td> 
			</tr> 
			<tr class="form-field"> 
				<th scope="row" valign="top"><label for="description">Description</label></th> 
				<td><textarea name="description" id="description" rows="5" cols="50" style="width: 97%;">description text</textarea></td> 
			</tr> 
	</table> 
		<div class="myWidget">This is my include comes in the flow</div>
		<table><tr><td>basic table follows here</td></tr></table>
	<p class="submit"><input type="submit" class="button-primary" name="submit" value="Update" /></p> 
	</form> 
</div>

Actually I forgot the first paragraph in your post when I read the second. Reading again I finally understood there were no parent table. :slight_smile:

Depending conditions for the parent container of the “cells” there are different solutions.

This solution is the first that springs to mind, it need the parent container (div.wrap) to reserve space for the include. As a stand alone example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.wrap{
	margin-right:300px;
}
.form-table{
	float:left;
	width:100%;
	background:#fcc;
}
.myWidget{
	float:right;
	display:inline; /* IE6 */
	position:relative; /* IE6 */
	margin-right:-300px;
	width:300px;
	background:#ccf;
}
table{ /* the basic table below */
	clear:both;
	background:#cfc;
}
</style>
</head><body>

<div class="wrap">
	<h2>Edit Category</h2>
	<div id="ajax-response"></div>
	<form name="edittag" id="edittag" method="post" action="edit-tags.php" class="validate">
		<table class="form-table">
			<tr class="form-field form-required">
				<th scope="row" valign="top"><label for="name">Name</label></th>
				<td><p class="description">The name is how it appears on your site.</p></td>
			</tr>
			<tr class="form-field">
				<th scope="row" valign="top"><label for="slug">Slug</label></th>
				<td><p class="description">test.</p></td>
			</tr>
			<tr class="form-field">
				<th scope="row" valign="top"><label for="parent">Parent</label></th>
				<td></td>
			</tr>
			<tr class="form-field">
				<th scope="row" valign="top"><label for="description">Description</label></th>
				<td><textarea name="description" id="description" rows="5" cols="50" style="width: 97%;">description text</textarea></td>
			</tr>
		</table>
		<div class="myWidget">This is my include comes in the flow</div>
		<table><tr><td>basic table follows here</td></tr></table>
		<p class="submit"><input type="submit" class="button-primary" name="submit" value="Update" /></p>
	</form>
</div>

</body</html>