Need a small Help with CSS

Hello,
I need a small help to place two div tags horizontally side by side, like the image below.
The two divs (COMMENTS and Number of Comments) and side by side and wrapped in another div tag.



But, this is what I am getting



Here is the CSS I am using

.full-art-comments-hdr {
    margin-top: 10px;
    padding-top: 10px;
    padding-right: 5px;
    padding-bottom: 10px;
    border-top-width: 6px;
    border-top-style: solid;
    border-top-color: #CA0003;
    height: 21px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #CCCCCC;
    margin-bottom: 10px;
}
.full-art-comment-hdr-left {
    float: left;
    text-align: left;
    clear: both;
}

.full-art-comment-hdr-right {
    float: right;
    text-align: right;
    clear: right;
}

Code (markup):

and here is the php code

<div class="full-art-comments-hdr">
<div class="full-art-comment-hdr-left"><h3>COMMENTS</h3></div>
<div class="full-art-comment-hdr-right"><h4><?php comments_number('no responses','one response','% responses'); ?></h4></div>
</div>

Code (markup):

Please help me to get it like the first image

~ digitech

 

try applying overflow:hidden to the parent div (full-art-comments-hdr)

 

Thanks.. But that hides the COMMENT div (full-art-comment-hdr-left). I need to show them both.

 

how about a link to your site ? also try removing clear:both and clear:right on the child divs

 

Nope.. its not working dynashox..

 

Those two things being floated in both directions normally would give you what you want. The reason it isn't now is they're both clearing. Why are you doing that?

Remove clear from BOTH of those things... if there's a point later in the page where they are clearing other floats above them, then move that clear to their container (always makes more sense to me to have containers do the clearing than floated children inside them).

 

The basic html and css code are below .
<div id="contain">
<div class="left">aaaaa</div>
<div class="right">aaaaa</div>
<br style="clear: both" />
</div>


#contain {
width:768px;
}
.left {
margin:0;
float:left
width:384px;
}
.right {
margin:0;
float:left
width:384px;
}

You can modify it if necessary .

 

Not that one should EVER be using presentational classnames (left, right) or wasting their time on a clearing break in this day and age.

As to OP's code, mein gott that's made of /FAIL/ - you have perfectly good block level containers in the form of the heading tags, so what the **** are they wrapped in DIV for? NOT that Either of those actually LOOK like headings to a section, though I'd have to see where it's used on the page. I'm fairly certain the 'h4' is NOT a heading to a subsection. (I smell tag abuse)

ASSUMING that since you have it all in a DIV called header, I'm going to say throw away ALL of the DIV since that's a single heading entity. I'm also going to assume you have a div wrapping the whole comments section called #fullArtComments.

<h3>
	<span>COMMENTS</span>
	<?php comments_number('no responses','one response','% responses'); ?>
</h3>

Code (markup):

Which would make the CSS a simple:

#fullArtComments h3 {
	overflow:hidden; /* wrap floats */
	zoom:1; /* trip haslayout, wrap floats in IE */
	margin:10px 0;
	padding:10px 5px 10px 0;
	text-align:right; /* positions the responses */
	border-top:6px solid #CA0003;
	border-bottom:1px solid #CCC;
}

#fullArtComments h3 span {
	float:left;
}

Code (markup):

Though I'd have to see the WHOLE code to be certain since I'm guessing on the parent container. I would NOT fix the height of that section since it would make wordwraps made of /FAIL/.


Hope this helps.