Re: [css-d] how to prevent two divs to break line?

[Roger Roelofs]

Patrick,

On Sep 11, 2006, at 6:00 PM, Patrick Aljord wrote:

> On 9/11/06, Roger Roelofs <[EMAIL PROTECTED]> wrote:
>> Without a test page, I can't be sure.  The first thing I would try is
>> to add width: 24%; to #regions.  If that doesn't work, put up a test
>> page and we'll try to give you a better answer.
> here is the page http://haztucherry.sitlib.org/

Here are some beginning suggestions.

First, think about your markup.  It is much more complicated than it 
needs to be and it has presentation mixed in to the structure.  The 
categories look like a menu to me, so I would mark it up as a list of 
links.  Something like this...

<ul id="categories" class="clearfix">
   <li><a href="subcat.asp?subcat=1" onclick="..."><img 
src="/images/people_juliane_krug_04a.png">
     <strong>Trabajos</strong></a>
     <ul class="subcats">
          <li><a href="/anuncios/list?catid=62" title="ver lista de 
anuncios">curriculum vitae</a> <a href="/anuncios/new?catid=62" 
title="crear anuncio de curriculum vitae">crear</a></li>
          <li><a href="/anuncios/list?catid=46" title="ver lista de 
anuncios">domésticos</a> <a href="/anuncios/new?catid=46" title="crear 
anuncio de domésticos">crear</a></li>
          <li>... and so on ...</li>
        </ul>
   </li>
   <li><a href="subcat.php?subcat=2" onclick="..."><img 
src="/images/handshake_01.png">
     <strong>Servicios</strong></a>
     <ul class="subcats">
          <li><a href="/anuncios/list?catid=62" title="ver lista de 
anuncios">curriculum vitae</a> <a href="/anuncios/new?catid=62" 
title="crear anuncio de curriculum vitae">crear</a></li>
          <li><a href="/anuncios/list?catid=46" title="ver lista de 
anuncios">domésticos</a> <a href="/anuncios/new?catid=46" title="crear 
anuncio de domésticos">crear</a></li>
          <li>... and so on ...</li>
        </ul>
   </li>
   <li>... and so on ...</li>
</ul>

-------------  css ----------------

#regions{
        float:left;
        width: 13em;
        font-size : .9em;
}
#categories {
        border: 4px solid;
        background-color: white;
        margin-left: 13.5em;
        font-family: verdana, arial, helvetica, sans-serif;
        font-size:   15px;
        padding-top: 1.5em;
}

/* if you want to force 3 columns */
#categories li {
   float: left;
   width: 33%;
}

/* If you want a specified width with as many on a line as the window 
width can fit */
#categories li {
   float: left;
   width: 10em;
}

#categories a {
   text-aign: center;
}
#categories img {
   width: 60px;
   height: 60px;
   display: block;
   margin: 0 auto;
}
#categories li ul {
   display: none;
}
#categories li.show ul {
   display: block;
}
#categories li li {
   float: none;
}


I hope that gets you started.
-- 
Roger Roelofs
"Remember, if you’re headed in the wrong direction,
        God allows U-turns!"
          ~Allison Gappa Bottke
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/