Problem with Comment Layout

HTML & CSS
1

I am having problems modifying my Comments Layout.

Here is a stripped down version of what I am having problems with now…

Why does the background-color for the class “commentBottom” set the background to Orange for the whole parent DIV?!

(And also why does the Purple background-color for “userInfo” extend to the right underneath “userPost”?? Looks like the same problem…)

I want it so that the following sub-areas can have their own distinctive colors:

  • commentBody

or

  • userInfo
  • userPost

and

  • commentBottom
  • commentWrapper

Here is the HTML for it…


	<div id="boxComments">
		<h3>What Do You Think?</h3>
			<p>To leave a comment, you need to...</p>

			<div class="commentWrapper">
				<div class="commentBody">

					<div class="userInfo">
						<a href="#" class="username">
							<strong>username</strong>
						</a>

						<img class="noborder" src="/community/uploads/' . $photoName . '" width="100" alt="" />

						<dl>
							<dt>Joined:</dt>
								<dd>date</dd>

							<dt>Location:</dt>
								<dd>location</dd>

							<dt>Posts:</dt>
								<dd>' . $posts . '</dd>
						</dl>
					</div>

					<div class="userPost">
						<span class="commentDate">Posted on: date</span>
						<span class="commentNo">commentCount</span>
						<p>$comments</p>
					</div>
				</div>

				<div class="commentBottom">LOOK</div>

				</div>

Here are my styles…


#boxComments .commentWrapper{
/*	background-color:aqua;		/**/
}

#boxComments .commentBody{
	float: left;
	clear: both;
	max-width: 640px;
	margin: 20px 0;
	background-color: #A0A;		/**/
	border-top: 1px solid #333;
}

#boxComments .userInfo{
	float: left;
	width: 170px;		/**/
	padding: 10px 0px 0 0;		/**/
	font-size: 0.9em;
	text-align: center;
}

#boxComments .userInfo a{
	padding: 0 0.7em 0 0;
	color: #0071D8;
	font-size: 1.1em;
	font-weight: bold;
	text-decoration: none;
}

#boxComments .userInfo dl{
	margin: 0;
	padding: 10px 0 0 0;
}

#boxComments .userInfo dt{
	float: left;
	width: 4.5em;
	text-align: right;		/**/
}

#boxComments .userInfo dd{
	margin: 0 0 0 5em;
	text-align: left;
}

#boxComments .userPost{
	float: left;
	max-width: 430px;													/* 115px + 225px = 340px */

																					/* FIX THIS */
	min-width: 430px;		/**/
	padding: 10px 20px 20px 20px;		/**/
	font-size: 0.9em;
	background-color: #F4F4F4;		/**/
}

#boxComments .commentDate{
	display: inline-block;
	padding: 0 0 10px 0;
	color: #AAA;
}

#boxComments .commentNo{
	display: inline-block;
	float: right;
	padding: 0 0 10px 0;
	color: #AAA;
}

#boxComments .commentBottom{
	margin:0;
	padding: 0;
	background-color: orange;		/**/
}

Hope that makes sense?!

BTW, would I want to your position: relative here, and why or why not?

Thanks,

Debbie

2

As for the orange background…When you float something , and then have an unfloated element as an adjacent child (as with your example), the static content (the adjacent child) actulaly is taking up the full width of the parent. It’s not recognizing the float is there really. In some regards. So what you’re seeing isn’t the orange background actually taking up the parents background. It’s just that you have a margin set on the float (a top margin) which allows the orange background to seep over top of it. If you were to float the orange box as well, you would see this issue disappear completely. You have several options really. I just gave one :).

I’m not really seeing the 2nd issue. Both the user info and user post are being floated. This isn’t the same issue (though to be honest I can’t see what hte issue is?The purple isn’t overlapping the gray :))

When you float everything (and avoid overlapping), allowing each section to have a different background is easy work.

Most definitely not a place to use position:relative. It just doesn’t have a place here. You are dealing with the structure of the page, and RP should have nothing to do with the overall structure :).

Off Topic:

Someone needs to quote my post and post it, that way the OP can read it. I’m on her blocked list…:wink:

3

Would using Floats help?

I’m still not understanding the behavior I’m seeing.

Thanks,

Debbie

4

Someone please quote my post above.

5

Debbie, read this ^ :slight_smile:

6

Well, Ryan’s explained the problem with the orange background. You need to float commentBottom to get it to wrap its contents. I’m guessing commentBottom should be below commentBody, so add a width (640px or whatever) to commentWrapper, which will force commentBottom onto a new line. You’ll also need to float the parent div or add overflow:hidden to ensure it contains its children.

If you set the purple background on .userInfo rather than on .contentBody, then it won’t continue for the full width of the div.

I’m not sure where you were thinking of using position:relative, but I agree with Ryan - don’t. :slight_smile:

BTW, you’re missing a closing </div> in the code you posted.

7

I did float it.

I’m guessing commentBottom should be below commentBody,

Right.

so add a width (640px or whatever) to commentWrapper, which will force commentBottom onto a new line.

I have widths set on .userInfo and .userPost

You’ll also need to float the parent div or add overflow:hidden to ensure it contains its children.

The parent is floated.

If you set the purple background on .userInfo rather than on .contentBody, then it won’t continue for the full width of the div.

Why does the purple on .userInfo appear to go the whole width of commentBody and thus go behind .userPost??

(That was my key question in my original post)

I’m not sure where you were thinking of using position:relative, but don’t. :slight_smile:

Paul O uses position: relative a lot when laying out pages…

Here is my updated code…


	<div class="commentWrapper">
		<div class="commentBody">

			<div class="userInfo">
				<a href="#" class="username">
					<strong>DoubleDee</strong>
				</a>

				<img class="noborder" src="/community/uploads/' . $photoName . '" width="100" alt="" />

				<dl>
					<dt>Joined:</dt>
						<dd>Jan 2012</dd>

					<dt>Location:</dt>
						<dd>Phoenix, AZ</dd>

					<dt>Posts:</dt>
						<dd>119</dd>
				</dl>
			</div>

			<div class="userPost">
				<span class="commentDate">Posted on: 2012-03-14 9:25am</span>
				<span class="commentNo">#1</span>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
			</div>
		</div>

		<div class="commentBottom">LOOK</div>
	</div>



#boxComments .commentWrapper{
	float: left;
	background-color: #FFFFCC;		/* Buff */
}

#boxComments .commentBody{
	float: left;
	margin: 20px 0;
	background-color: #A0A;		/**/
/*	background-color: #FFC;		/**/
	border-top: 1px solid #333;
}

#boxComments .userInfo{
	float: left;
	width: 170px;		/**/
	padding: 10px 0px 0 0;		/**/
	font-size: 0.9em;
	text-align: center;
}

#boxComments .userInfo a{
	padding: 0 0.7em 0 0;
	color: #0071D8;
	font-size: 1.1em;
	font-weight: bold;
	text-decoration: none;
}

#boxComments .userInfo dl{
	margin: 0;
	padding: 10px 0 0 0;
}

#boxComments .userInfo dt{
	float: left;
	width: 4.5em;
	text-align: right;		/**/
}

#boxComments .userInfo dd{
	margin: 0 0 0 5em;
	text-align: left;
}

#boxComments .userPost{
	float: left;
	max-width: 430px;													/**/
																					/* FIX THIS */
	min-width: 430px;		/**/
	padding: 10px 20px 20px 20px;		/**/
	font-size: 0.9em;
	background-color: #F4F4F4;		/**/
}

#boxComments .commentDate{
	display: inline-block;
	padding: 0 0 10px 0;
	color: #AAA;
}

#boxComments .commentNo{
	display: inline-block;
	float: right;
	padding: 0 0 10px 0;
	color: #AAA;
}

#boxComments .commentBottom{
	float: left;
	margin:0;
	padding: 0;
	background-color: orange;		/**/
}

Here is what I am still not understanding…

1.) Why does the purple extend all the way across .commentBody?

2.) How can I make the shading Full-Height for .userInfo and .userPost? (It almost looks like .userPost is inside of .userInfo?!)

3.) Why doesn’t the orange background extend the whole width of .commentBottom (and .commentBody)?

Thanks,

Debbie

8

Yes, and those widths are less than the full width of the viewport, so your floated .commentBottom has plenty of room to sit alongside them. If you want .commentBottom to sit underneath them, then you need to put a width on .commentWrapper, which contains those three divs, to constrain the overall width.

Because, as I said before, you have that purple colour set on .commentBody, not on .userInfo.

Because that’s the div its applied to. :slight_smile:

.userPost is inside .commentBody, which is where the purple is coming from.

It does extend the full width of .commentBottom. Because the div is floated, it shrinks to fit its contents, so the orange extends the full width of the contents. If you want it to extend to the same width as .commentBody, then you need to set a width on it. You can set width: 100% to make it extend the width of the parent container.

9

He may use it, but it’s not using it as the structure. There’s a huge difference in what you are thinking about doing, and what Paul actually does.

Techno answered your other questions :).

10

TechnoBear,

I think I got it figured out.

Thanks for the help!

Debbie

11

I’m going to step in here and comment on the ridiculousness of this thread. Ryan, if Debbie is choosing to ignore you, don’t help her out. Her loss.
This quoting is just silly.

12

Say, one more thing while we are on the topic…

What do I need to do to my code to make .userPost “fluid” and .userInfo a fixed width of 170px?

Here is what I get when I minimize my browser…

As you can see, the User Post (i.e. Comments) are not fluid.

Here is my updated code…


	<div class="commentWrapper">
		<div class="commentBody">

			<div class="userInfo">
				<a href="#" class="username">
					<strong>DoubleDee</strong>
				</a>

				<img class="noborder" src="/community/uploads/' . $photoName . '" width="100" alt="" />

				<dl>
					<dt>Joined:</dt>
						<dd>Jan 2012</dd>

					<dt>Location:</dt>
						<dd>Phoenix, AZ</dd>

					<dt>Posts:</dt>
						<dd>119</dd>
				</dl>
			</div>

			<div class="userPost">
				<span class="commentDate">Posted on: 2012-03-14 9:25am</span>
				<span class="commentNo">#1</span>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
			</div>
		</div>

		<div class="commentBottom">LOOK</div>
	</div>



#boxComments{
	max-width: 640px;
	margin: 0 auto;
	margin: 40px auto;
	padding: 0 20px 60px 20px;
	border: 1px solid #333;
}

#boxComments:after{													/* Contain floats without overflow. */
	content: "";
	clear: both;
	display: block;
	height: 0;
	font-size: 0;
}

#boxComments h3,
#boxAddComment h3{
	height: 20px;
	margin: 0px -20px 10px -20px;
	padding: 0.4em 10px 0.2em 10px;
	text-align: left;
	line-height: 1.4em;
	font-size: 1em;
	font-weight: bold;
	color: #FFF;
	background-color: #333;
}

/* Row of Buttons. */
#boxComments ul{
/*	list-style: none;		/**/
	margin: 0 0 0 20px;		/**/
/*	margin: 0px 0px 50px 20px;		/**/
	padding: 0;
}

#boxComments ul li{
	float: left;
	margin: 5px 5px 0 0;
	padding: 0;
}


#boxComments .commentWrapper{
	width: 100%;	/**/
	float: left;
	background-color: #FFFFCC;		/* Buff */
}

#boxComments .commentBody{
	width: 100%;	/**/
	float: left;
/*	margin: 20px 0;	/**/
	background-color: #A0A;		/**/
/*	background-color: #FFC;		/**/
	border-top: 1px solid #333;
}


/* LEAVE THIS FIXED-WIDTH */
#boxComments .userInfo{
	float: left;
	width: 170px;		/**/
	padding: 10px 0px 0 0;		/**/
	font-size: 0.9em;
	text-align: center;
	background-color: #9F9;		/**/
}

#boxComments .userInfo a{
	padding: 0 0.7em 0 0;
	color: #0071D8;
	font-size: 1.1em;
	font-weight: bold;
	text-decoration: none;
}

#boxComments .userInfo dl{
	margin: 0;
	padding: 10px 0 0 0;
}

#boxComments .userInfo dt{
	float: left;
	width: 4.5em;
	text-align: right;		/**/
}

#boxComments .userInfo dd{
	margin: 0 0 0 5em;
	text-align: left;
}


/* MAKE THIS FLUID */
#boxComments .userPost{
	float: left;
	width: 430px;
/*	max-width: 430px;													/**/
																					/* FIX THIS */
/*	min-width: 430px;		/**/
	padding: 10px 20px 20px 20px;		/**/
	font-size: 0.9em;
	background-color: #F4F4F4;		/**/
}

#boxComments .commentDate{
	display: inline-block;
	padding: 0 0 10px 0;
	color: #AAA;
}

#boxComments .commentNo{
	display: inline-block;
	float: right;
	padding: 0 0 10px 0;
	color: #AAA;
}

#boxComments .commentBottom{
	float: left;
	width: 100%;
	margin:0;
	padding: 0;
	background-color: orange;		/**/
}

I used to know how to do “fluid” designs but I’ve been messing with my code and it keeps breaking.

I have also been playing with FireBug but I’m admittedly stuck and could use some help.

Thanks,

Debbie

13

Those styles you posted bear no relation to your HTML.

14

You need to go back to the HTML in the original post and add in the missing lines with the all-important <div id=“boxComments”> and then they match up. :wink:

Debbie, it would really help (us and you) if you gave us the full picture at the start of what you’re trying to achieve, then we won’t keep wandering down the wrong paths. :slight_smile:

To make .userPost fluid, remove the float and the width, and add margin-left:170px. That should solve that problem.

You can also remove the float and the width from .commentBottom, as they’re no longer necessary in your updated version.

15

Tell you what I’ll do…

Hopefully in the next several days I can publish my latest website and let you look at it in whole.

I know I have more “Spring Cleaning” to do around what we have been discussing, and I think if you can see my entire working - or not! - website that would help. Right?

To make .userPost fluid, remove the float and the width, and add margin-left:170px. That should solve that problem.

Doh! I knew that?! Worked like a charm! :slight_smile:

You can also remove the float and the width from .commentBottom, as they’re no longer necessary in your updated version.

That isn’t working like I want, but let me publish my code before we tackle that.

Thank you,

Debbie

16

Now that sounds like an excellent idea. :slight_smile:

Great - glad I could help.

Weird, because it’s working fine for me. (: Have you double-checked for typos? (My no.1 cause of unexpected behaviour. :lol: )

17

No, it’s not that. It relates to your earlier comment…

My website is getting to be fairly complex - at least to me - and what used to be easy to tweak is not much harder because one change HERE ends up throwing off things THERE (unless I get my code “tuned” better)!

Like I said, maybe I can publish my entire code-base here shortly, and then you all can see exactly what I am seeing.

Paul O’Brien was a real saint and helped me created a pretty studly layout last year.

Now I want to go back and clean up the new things I’ve added so that they don’t take away from HIS awesome design! :cool:

Thanks,

Debbie

18

Adding a margin-left will give you the layout you asked for but there will be side effects if you leave it like that.

If for instance in your main column you have floats that you want to clear then adding a clear:both will in fact see the element clearing the whole left side column instead.

Just add this to see the effect.

.userPost p{clear:both;}

That is unusable in a real situation as you never know when you might want to float and clear something.

The options are to nest an inner 100% wide floated element inside userPost which will then contain the clearing of any child floats to only that context. If you don’t need visible overflow then you could use the overflow:hidden method and remove the margin-left and just use overflow:hidden.


#boxComments .userPost {
/*margin-left:170px*/
overflow:hidden
zoom:1.0;/* let ie6 and 7 play */
}

There will be no need for the margin and no need for the extra element as overflow other than visible forces the element into a rectangular block that will sit next to a float and span all the available width. It’s of no use if you need visible overflow but in most cases its fine. There will also be a problem if the element is squeezed tight and you may see it dropping under the side column at small screen sizes (which may be a benefit in some cases) unlike the margin-left method where the element will stay 170px from the left (but will still drop down in older IE).

Which method you use depends on the criteria you need. The margin-left approach with an inner nested 100% wide float is the most robust but needs extra mark-up.

There never is one way to do something as it all depends on what happens next.:slight_smile:

That isn’t working like I want, but let me publish my code before we tackle that.

Thank you,

Debbie[/QUOTE]

19

Paul,

Thanks for chipping in your thoughts.

If you don’t mind, can you hold off on your comments until I can get my website posted online?

Honestly I was getting lost in your explanation, and I think if everyone can see my final code/website it would be more efficient.

Hopefully I can have things up next week.

Thanks,

Debbie