div align problem

[vobla]

Hi all,

I've got fixed width container and some fixed width id=cat divs in it. First 3 of them fit in one row horizontaly, others are shown in a next row leaving a vertical spaces on a page. I could split container into 3 parts, but I need to keep html simple as shown. Is there any CSS trick to force last 3 divs to stick to upper ones verticaly?

Thanks in advance.

Heres the code:

HTML:

Code: Select all

<div id="container">

    <div id="cat">
        <div class="title">title1</div>
        <br/><br/><br/><br/><br/><br/>
    </div>
            
    <div id="cat">
        <div class="title">title2</div>
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    </div>
            
    <div id="cat">
        <div class="title">title3</div>
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    </div>
            
    <div id="cat">
        <div class="title">title4</div>
        <br/><br/><br/><br/><br/><br/><br/>
    </div>
            
    <div id="cat">
        <div class="title">title5</div>
        <br/><br/><br/><br/><br/><br/><br/><br/>
    </div>
            
    <div id="cat">
        <div class="title">title6</div>
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    </div>
        
</div>

CSS:

Code: Select all

*
{
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
}

#container
{
    margin: 50px auto;
    padding: 2px;
    width: 801px;
    overflow: auto;
    border: 3px solid #eee;
}

#cat
{
    width: 262;
    float: left;
    
    background: #eee;
    border: 2px solid #fff;
}

#cat .title
{
    background: #eee;
    text-align: center;
    border-bottom: 3px double #fff;
}

[dab42pat]

<div id="cat"> is used 5 times. #cat should only be used once per page.
Try changing your #cat to .cat

[Ed]

Originally Posted by dab42pat

<div id="cat"> is used 5 times. #cat should only be used once per page.
Try changing your #cat to .cat

To elaborate on that vobla, an id is a unique attribute. It can only be used once per page, and not five times as dab42pat has explained. These are obviously the ones in your CSS with the '#'

However, you can use a class, which can be used one or more times in a page. These are the ones in you CSS with the '.'.

Hope this helps you understand.

Ed.

[vobla]

Hi,

Thanks for your answers. Learned something new
Anyway, that does not answer my question and does not change the layout in anyway.

Here's how the code looks now:

HTML:

Code: Select all

<div id="container">

    <div class="cat">
        <div class="title">title1</div>
        <br/><br/><br/><br/><br/><br/>
    </div>
            
    <div class="cat">
        <div class="title">title2</div>
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    </div>
            
    <div class="cat">
        <div class="title">title3</div>
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    </div>
            
    <div class="cat">
        <div class="title">title4</div>
        <br/><br/><br/><br/><br/><br/><br/>
    </div>
            
    <div class="cat">
        <div class="title">title5</div>
        <br/><br/><br/><br/><br/><br/><br/><br/>
    </div>
            
    <div class="cat">
        <div class="title">title6</div>
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    </div>
        
</div>

CSS:

Code: Select all

*
{
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
}

#container
{
    margin: 50px auto;
    padding: 2px;
    width: 801px;
    overflow: auto;
    
    border: 3px solid #eee;
}

#container .cat
{
    width: 262;
    float: left;
    
    background: #eee;
    border: 2px solid #fff;
}

#container .title
{
    background: #eee;
    text-align: center;
    border-bottom: 3px double #fff;
}

[dab42pat]

could you post a screenshot of what you have. and you're full code.

[vobla]

Sure
I had to do that in a first place :P



So I have these dynamicly generated boxes. I want to keep backend generated code simple so the frontend would be highly customizable with as less restrictions and rules as posible. In this case backend generates:

Code: Select all

<div class="cat">
        <div class="title">title1</div>
        <!-- some lines here -->
</div>

So I was just wondering is there any CSS trick to do that?

[vobla]

Oh, full code:

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>

<head>
    
    <link rel="stylesheet" type="text/css" href="style.css"/>
    
    <title></title>
</head>

<body>

<!-- html from post #4 -->
        
</body>
</html>

[shalom_m]

I have rewritten your code, color-coded the 3 columns for easier identification, you can undo that.

HTML

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CssCreator-->HTML 4.01 Strict Template</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link href="001.css" rel="stylesheet" type="text/css">
</head>
<body> 
<div id="pagewidth" > 
  <div id="wrapper" class="clearfix" > 
    <div id="twocols" class="clearfix"> 
      <div id="maincol" > Main Content Column
        <div class="cat"> 
          <div class="title">title2</div> 
          <br/> 
          <br/> 
          <br/> 
          <br/> 
          <br/> 
          <br/> 
          <br/> 
        </div> 
        <div class="cat"> 
          <div class="title">title5</div> 
          <br/> 
          <br/> 
          <br/> 
          <br/> 
          <br/> 
          <br/> 
        </div> 
      </div> 
      <div id="rightcol" > Right Column
        <div class="cat"> 
          <div class="title">title3</div> 
          <br/> 
          <br/> 
          <br/> 
          <br/> 
          <br/> 
          <br/> 
          <br/> 
          <br/> 
        </div> 
        <div class="cat"> 
          <div class="title">title5</div> 
          <br/> 
          <br/> 
          <br/> 
          <br/> 
          <br/> 
          <br/> 
        </div> 
      </div> 
    </div> 
    <div id="leftcol" > Left Column
      <div class="cat"> 
        <div class="title">title1</div> 
        <br/> 
        <br/> 
        <br/> 
        <br/> 
        <br/> 
        <br/> 
      </div> 
      <div class="cat"> 
        <div class="title">title4</div> 
        <br/> 
        <br/> 
        <br/> 
        <br/> 
        <br/> 
        <br/> 
        <br/> 
      </div> 
    </div> 
  </div> 
</div> 
</body>
</html>

CSS

Code: Select all

html, body{
 margin:0;
 padding:0;
 text-align:center;
}

#pagewidth{
 width:750px;
 text-align:left;
 margin-left:auto;
 margin-right:auto;
}

#leftcol{
 width:250px;
 float:left;
 position:relative;
 background-color:#2C8080;
 }

#twocols{
 width:500px;
 float:right;
 position:relative;
  }

#rightcol{
 width:250px;
 float:right;
 position:relative;
 background-color:#694C80;
 }

#maincol{
 background-color: #2C4C80;
 float: left;
 display:inline;
 position: relative;
 width:250px;
 }

 /* *** Float containers fix: *** */
.clearfix:after {
 content: ".";
 display: block;
height: 0;
 clear: both;
 visibility: hidden;
 }

.clearfix{display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix{height: 1%;}
.clearfix{display: block;}
/* End hide from IE-mac */


.cat
{
    width: 245px;
    float: left;
    background: #eee;
    border: 2px solid #fff;
    clear: left;
}

.title
{
    background: #eee;
    text-align: center;
    border-bottom: 3px double #fff;
}

Tested in IE6, IE7, FF2, Opera and Safari

[vobla]

Ok. Originaly I was asking is there any CCS trick to make it work *without* puting cat's into three containers. Hmm.. I asume not.

I rating myself as a guy who can write some raw HTML/CSS and make it work on Firefox, so your code above looks very strange to me. Why do you put two cols in a container which already is in a container? That doesnt look logical. Can't I just put all the cols in one container?

Anyway, I've just googled this 'clearfix' and whanted to ask why is it better than 'overflow: auto;'. Doesn't that work on some browsers?

Thanks.

[shalom_m]

Sorry, I read the "without 3 containers" but after a few tries must have pushed it out of my accessible memory.

If the problem is that you don't want the end user to get confused, why not put the 6 separate "CAT's" into 6 separate SSI files? Then your clients will not see any html at all.

The 2 in 1 column is a spillover from making the center column the MAIN column, the left the navigation and the right the announcements/news column. Some search engines give higher scores to what is written first in the HTML. This way, one ensures the central column to be the first.

As to the clearfix, I find that it works in all cases. Some time ago I had some problems with a browser called Konqueror and clearfix seemed to solve it.

[vobla]

Thank you for this valuable information.