div align problem

vobla · #1 Apr 6th, 2008, 18:15

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 · #2 Apr 6th, 2008, 18:31

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

Ed · #3 Apr 6th, 2008, 21:16

Quote:

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 · #4 Apr 6th, 2008, 21:26

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 · #5 Apr 6th, 2008, 21:31

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

vobla · #6 Apr 7th, 2008, 11:43

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 · #7 Apr 7th, 2008, 16:05

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 · #8 Apr 7th, 2008, 19:03

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 · #9 Apr 7th, 2008, 20:42

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 · #10 Apr 7th, 2008, 22:32

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 · #11 Apr 8th, 2008, 09:52

Thank you for this valuable information.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Sifr Align Right	Salbert	Flash & Multimedia Forum	8	Apr 2nd, 2008 13:31
verticle align image problem	heyo	Web Page Design	2	Jul 4th, 2007 18:22
textformat.align problem	janper	Flash & Multimedia Forum	1	Apr 13th, 2007 21:57
Trying to align a div in a wrapper	AdRock	Web Page Design	7	Feb 22nd, 2007 16:03
Align problem	Amphersand	Web Page Design	3	Oct 11th, 2006 17:11

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
div align problem