Placing Two DIV's Side-by-Side

I am reworking my Article Comments section, and would like to follow a format similar to what SitePoint uses for Posts.

On the left side would be the Commentor’s info, and on the right side is the Comment itself.

(Haven’t worked with CSS much in the last few months and apparently am getting rusty?!) :blush:

Here is what I have so far…

<div id="boxComments">
	<h3>What Do You Think?</h3>


	<div class="commentor">
		<p class="commentAuthor">By <a href="<?php //echo BASE_URL ?>profile.php">John Doe</a></p>
			<img class="noborder" src="/community/uploads/f21190299a795e9cf3439f7f62c223f79e023ab7.jpg" width="100"
			alt="Picture: Postage Meter.  Credit: John Doe, Wikimedia Commons."
			title="Picture: Postage Meter.  Credit: John Doe, Wikimedia Commons." />

	<div class="comment2">
		<p class="commentDate">8:38pm on July 10, 2011</p>
		<p>You think HOAs are bad? Wait until you get involved with a "special taxation district." In Florida, such an entity is supposed to operate under government rules (the Sunshine Law for example.) But they routinely run the show as if it were their private fiefdom, then whine and complain when someone tries to object.</p>

	min-width: 340px;
	max-width: 580px;
	margin: 40px auto;
	padding: 0 30px 60px 30px;
	border: 1px solid #333;

	float: left;
	width: 115px;
	background-color: #FCC;

	float: left;
	padding: 0.5em 0 1em 0em;
	font-size: 0.9em;
	border-top: 1px solid #333;
	background-color: #CFC;

I thought by assigning a Fixed-Width to my first DIV, and by using Floats, that the second DIV would expand to fill the remaining space to the right of the Commentor DIV and that everything would expand to fill the parent DIV boxComments.

What am I doing wrong?



Anyone?? :-/


You have to give us more than 2 hours to get a look at a thread. Some of us have better things to do all Saturday evening than stay on these forums :).

I’ll go take a look at hte issue now.

Your logic is almost correct. You not specifying a width on the 2nd float though causes it to just take up the natrual space that it would normally have to take up.

Thus it dictates its’ own width and it’s too wide obviously. To make the 2nd object fill the rest of hte space, you need only to remove it as a float, aka remove the float:left, and you have to give iet a left margin equal to the other floats width. Aka margin-left:115px;

So you are basically making the changes in red.

    [COLOR=red]/*[COLOR=#000000][B]float[/B][/COLOR][COLOR=#00AA00]:[/COLOR] [COLOR=#000000][B]left[/B][/COLOR][COLOR=#00AA00];*/[/COLOR]        margin-left:115px;[/COLOR]    [COLOR=#000000][B]padding[/B][/COLOR][COLOR=#00AA00]:[/COLOR] [COLOR=#993333]0.5em[/COLOR] [COLOR=#CC66CC]0[/COLOR] [COLOR=#993333]1em[/COLOR] [COLOR=#993333]0em[/COLOR][COLOR=#00AA00];[/COLOR]    [COLOR=#000000][B]font-size[/B][/COLOR][COLOR=#00AA00]:[/COLOR] [COLOR=#993333]0.9em[/COLOR][COLOR=#00AA00];[/COLOR]    [COLOR=#000000][B]border-top[/B][/COLOR][COLOR=#00AA00]:[/COLOR] [COLOR=#993333]1px[/COLOR] [COLOR=#993333]solid[/COLOR] [COLOR=#CC00CC]#333[/COLOR][COLOR=#00AA00];[/COLOR]    [COLOR=#000000][B]background-color[/B][/COLOR][COLOR=#00AA00]:[/COLOR] [COLOR=#CC00CC]#CFC[/COLOR][COLOR=#00AA00];[/COLOR][COLOR=#00AA00]}[/COLOR]

Edit-that coloring came off wrong. Basically remove the float:left and add that left margin.