Div's not staying together

[top_cat]

I'm having a problem with 3 div's that I am trying to make stay in columns and not bunch up. I've tried "float" but not having much luck.

Anyone here good a CSS and would mind offering some advice?

The CSS code I have is:
#login_comunity{ float: left; width: 700px;}
#search{ position: inherit; float: left; width: 150px; text-align: right; padding: 12px 0px 0px 0px;}
#comunity{ display: inline; position: inherit; float: left; width: 165px; padding: 14px 0px 0px 0px;}

[penders]

position:inherit

What position are you trying to inherit? This may conflict with your floats?! Try removing this in your styles above?

Floated elements generally are 'bunched up'. You can use padding and margin to separate them.

How floated elements appear will also depend on the order they appear in your HTML. If your HTML is in the same order (and ignoring your 'position') then you should have 3 cols: 700, 150 and 165 px wide respt.

[top_cat]

This is the PHP code:
<div id="login_comunity_search">
<div id="login_comunity_search_left">
<div id="login_comunity_search_right" class="clearfix">
<div id="login_comunity">
<div id="logo_f"><a href="index.php"><img src="<?php echo "templates/$this->template/images/"; ?>logo.gif" alt="home" border="0"/></a></div>
<?php if($this->countModules('login')) { ?>
<div id="login" class="clearfix">
<jdoc:include type="modules" name="login" style="row" />
</div>
<?php }?>
<?php if($this->countModules('user4')) { ?>
<div id="comunity">
<jdoc:include type="modules" name="user4" />
</div><!--comunity-->
<?php }?>
<?php if($this->countModules('search')) { ?>
<div id="search">
<jdoc:include type="modules" name="search" style="row" />
</div><!--search-->
<?php } else{} ?>
</div>
</div>
</div><!--login_comunity_search-->

I edited the css file to remove 'position' and it did not resolve the problem. Can anyone see any other problems?

[penders]

Your "login_comunity" div appears to contain all your other divs? I thought from your CSS that #login_comunity was your first column?

Or, may be you are missing a closing </div>? Your code as it stands above does indeed appear to be missing a closing </div> somewhere! Your final line "

</div><!--login_comunity_search-->

" actually closes "login_comunity_search_left", not "login_comunity_search" as you suggest.

<div id="login" class="clearfix">

What is your 'clearfix' class? I guess this is to clear any floated elements inside the container? Just make sure, however, that it's not clearing the container itself.

[top_cat]

thats for spotting this problem with the div's I've added in the missing line and it worked perfectly. Thanks again for your help