asked on

CSS forum layout without tables?

I am not sure how to do a CSS layout for a forum without using tables (unless I give up having the user info being on the left).

I've attached a simple example with two posts in a forum. Most of the layout is fine, but the body of the post on the right side.

The major problem is that I don't know how to make the absolutely positioned msgBodyRight div somehow clear the msgBox div.

If this can't be made to easily work then I'll just go back to using a table layout. But I'd like to first know if this is possible.

<html>
<body>
 
<style type="text/css">
    .msgBox2 {
        position: absolute;
        width: 100%;
    }
    .msgBox {
        padding-right: 10px;
        clear: both;
    }
    .msgHeader {
        padding: 0px 4px;
        margin-top: 10px;
        background-color: #595;
    }
    .msgBody {
        position: relative;
        border: 1px solid #595;
    }
    .msgBodyLeft {
        width: 200px;
        background-color: #dfd;
        color: #559;
        font-weight: bold;
        height: 100%;
    }
    .msgBodyRight {
        position: absolute;
        top: 0px;
        left: 200px;
        right: 0px;
        border: 1px solid #f00;
        padding: 4px;
    }
    .msgBodyRightTitle {
        font-weight: bold;
    }
    .msgBodyRightTxt {
    }
</style>
 
 
<div class="msgBox2">
	<div class="msgBox">
		<div class="msgHeader">Apr 15, 2009 12:10:36 PM</div>
		<div class="msgBody">
			<div class="msgBodyLeft">
				Bob
				<div>Posts: 123</div>
 
			</div>
			<div class="msgBodyRight">
				<div class="msgBodyRightTitle">super title 1</div>
				<div class="msgBodyRightTxt">abc<br/>def<br/>ghi<br/>jkl<br/>mno</div>
			</div>
		</div>
 
	</div>
 
	<div class="msgBox">
		<div class="msgHeader">Apr 15, 2009 12:10:36 PM</div>
		<div class="msgBody">
			<div class="msgBodyLeft">
				Jim
				<div>Posts: 456</div>
 
			</div>
			<div class="msgBodyRight">
				<div class="msgBodyRightTitle">super title 2</div>
				<div class="msgBodyRightTxt">abc2<br/>def<br/>ghi<br/>jkl<br/>mno</div>
			</div>
		</div>
 
	</div>
 
</div>
 
</body>
</html>

Open in new window

SOLUTION

David S.

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ASKER CERTIFIED SOLUTION

Binylkumar

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial