Category: CSS

Sometimes you’ll need to display data in rows which also align vertically. (See the example).

For this it is best to create a div for your row holder with individual divs to set the column constraints.

[div class=’row’]
[div class=’cell’]Column 1[/div]
[div class=’cell’]Column 2[/div]
[div class=’cell’]Column 3[/div]
[/div]
And within the stylesheet:
.row {
clear:both;
}

.cell {
float:left;
width:100px;
}

Duplicate the row div and you will have equal rows and columns for your data.

View the example here

This example is originally based off of the ‘Flexible CSS Teaser Box’ by 456 Bereastreet.

I have modified it to use four different corner images and four expandable side images.

The site’s frame can stretch indefinitely vertically and horizontally whereas the original had width restrictions of 1600 pixels. I do agree, however, that most cases 1600 pixels wide would be overkill.

One of the first things I needed to figure out is how to have the sidebar colour or pattern stretch to line up with the length of the content. I’ve found the best way to do this is to initially create a background image showing a segment of the width of your site like this:
(This image would repeat vertically, with the white bit as my content area and the coloured bit on the right as my sidebar)

Then set up your sidebar and content area within the y-axis repeating background div. This way, the content will stretch down and cause the background to repeat, forcing the sidebar colour to also extend.

See below for a quick code example:

First, the CSS to show the bg image and the content areas:

#full_content {
background-image:url(../images/framework/page_bg_tile.jpg);
background-repeat:repeat-y;
margin: 0 auto;
width: 708px;
}

#side_bar {
float:right;
text-align:left;
width: 210px;
}

#main_area {
float:left;
margin: 10px auto;
text-align:left;
width: 670px;
}

Now the div’s to organise your content

<div class=”full_content”>

<div class=”side_bar”>
Sidebar content in here
</div>

<div class=”main_area”>
Main area text
</div>

</div>

The following code will completly center your page.

#horizon
{
color: white;
background-color: #0ff;
text-align: center;
position: absolute;
top: 50%; /* positioned absolutely 50% from the top */
left: 0px;
width: 100%; /* 100% wide */
height: 1px; /* nominal height of 1px */
overflow: visible; /* overflow is set to ‘visible’ */
visibility: visible;
display: block
}

#content
{
font-family: Verdana, Geneva, Arial, sans-serif;
background-color: #f00;
margin-left: -125px; /* negative margin that is exactly half of its width */
position: absolute;
top: -35px; /* negative top position that is exactly half of its height */
left: 50%; /* positioned absolutely 50% from the left */
width: 250px;
height: 70px;
visibility: visible
}

____

[div id=”horizon”]
[div id=”content”]
This is the centered box
[/div]
[/div]