?
Solved

CSS forum layout without tables?

Posted on 2009-04-15
2
Medium Priority
?
307 Views
Last Modified: 2012-05-06
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

0
Comment
Question by:HappyEngineer
2 Comments
 
LVL 43

Assisted Solution

by:David S.
David S. earned 600 total points
ID: 24153252
You have no doctype? You need to use one that will trigger "standards mode".

http://www.dynamicsitesolutions.com/html/document-types/
http://dev.opera.com/articles/view/14-choosing-the-right-doctype-for-your/


The solution is to not use absolute positioning. You need to maintain control of the document flow, which can't be done with it. Use floats and margins instead.

Recommended reading: http://www.dynamicsitesolutions.com/css/layout-techniques/#floats_margins
    .msgBodyLeft {
        width: 200px;
        background-color: #dfd;
        color: #559;
        font-weight: bold;
        height: 100%;
        float: left;
    }
    .msgBodyRight {
        margin-left: 200px;
        border: 1px solid #f00;
        padding: 4px;
    }

Open in new window

0
 
LVL 3

Accepted Solution

by:
Binylkumar earned 1400 total points
ID: 24155597
Hi,

Try this. If you found exact solution with this then fine, either if you need further assist on this solution, please post the query.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
    .msgBox2 {
        width: 100%;
    }
    .msgBox {
        padding-right: 10px;
        clear: both;
            height:auto;
    }
    .msgHeader {
        padding: 0px 4px;
        background-color: #595;
    }
    .msgBody {
            float:left;
            width:100%;
        border: 1px solid #595;
            height:auto;
    }
    .msgBodyLeft {
            float:left;
        width: 200px;
        background-color: #dfd;
        color: #559;
        font-weight: bold;
        height: 100%;
    }
    .msgBodyRight {
            float:left;
        border: 1px solid #f00;
        padding: 4px;
    }
    .msgBodyRightTitle {
        font-weight: bold;
    }
    .msgBodyRightTxt {
    }
      
      .clearMyFix {
            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility:hidden;            
      }
</style>
</head>

<body>
<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>
0

Featured Post

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Suggested Courses
Course of the Month15 days, 13 hours left to enroll

850 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question