Jump to content

columns of uneven length


oggyswain

Recommended Posts

Doing that tends to be a little bit tricky, since divs only expand to fit their content (unless you give them a fixed height).

 

A couple options:

-- give each column a fixed height (which would mean you would need to change the height every time you added/deleted content)

-- use some sort of javascript based solution to set all of the heights. Maybe overkill in this situation

-- my personal suggestion: create an image that contains a horizontal slice of all three colored columns, and set that as the background on "#content .wrapper" with repeat-y (so it repeats down the page). Then add a couple pixel white top border to each of your ".link2" so that that area seems separate from the rest of the column.

 

See the image attachment for the area you'd want to make into an image. You'd probably want to make an image of just the five columns though -- no white areas to the left or right of the columns.

 

http://www.w3schools.com/css/css_background.asp

http://www.w3schools.com/css/css_border.asp

Link to comment
Share on other sites

The css code for he box does not have a height in it only width. I tried to add height and set them all the same but it did not do anything. I would rather not redo the boxes. If possible I would just like to adjust the height on each box.

Here is the code.

 


/*=========================== TAGS ============================*/

* { 
   margin:0; 
   padding:0;
}

html,
body { 
   background:url(images/tail-body.gif) repeat-x left top #f0f0f0; 
   font-family:"trebuchet MS", Helvetica, sans-serif; 
   font-size:100%; 
   line-height:1em; 
   color:#1f242a; 
   min-width:964px;
   height:100%;
}

object { 
   vertical-align:top; 
   outline:none;
}

input, 
textarea, 
select { 
   font-family:"trebuchet MS", Helvetica, sans-serif; 
   font-size:1em; 
   vertical-align:middle; 
   font-weight:normal;
}

p { 
   margin:0; 
   padding:0;
}

img { 
   border:0; 
   vertical-align:top; 
   text-align:left;
}

/*========================== ALIGMENT =========================*/

.fleft { 
   float:left;
}

.fright { 
   float:right;
}

.clear { 
   clear:both;
}

.alignright { 
   text-align:right;
}

.aligncenter { 
   text-align:center;
}

.wrapper { 
   width:100%; 
   overflow:hidden;
}

.extra-wrapper {
   position:relative;
   width:100%;
   margin:0 auto;
   height:auto !important;
   height:100%;
   min-height:100%;
   background:url(images/tail-main.gif) repeat-y center top;
}

.container { 
   width:100%;
}

/*=========================== TAILING =========================*/

.bg-top {
   background:url(images/bg-top.gif) no-repeat center 160px;
   width:100%;
}
.tail-top { 
   background:url(images/tail-top.gif) left top repeat-x;
}

/*=========================== FORMS ===========================*/

#footer-form {
   position:absolute;
   right:0;
   top:35px;
}
#footer-form input {
   color:#a4a4a5;
   font-size:.83em;
   border-left:1px solid #858585;
   border-top:1px solid #858585;
   border-right:1px solid #d9d9da;
   border-bottom:1px solid #d9d9da;
   width:185px;
   float:left;
   padding:2px 0 2px 11px;
}

#contacts-form .form { 
   height:30px;
}
#contacts-form input {
   width:223px; 
   padding:1px 0 1px 3px; 
   background:#fff; 
   border:1px solid #1f242a; 
   color:#1f242a;    
   vertical-align:top;    
   line-height:1.2em;
}
#contacts-form textarea { 
   width:282px; 
   height:79px; 
   overflow:auto;
   color:#1f242a;
   background:#fff; 
   border:1px solid #1f242a; 
   padding:1px 0 0 3px;
   margin-bottom:25px;
}
#contacts-form a {
   float:right;
   margin-left:24px;
}

/*========================== LISTS ============================*/

ul, ol { 
   list-style:none;
}

.list {
   margin-bottom:-25px;
}
.list li {
   width:100%;
   overflow:hidden;
   vertical-align:top;
   padding-bottom:25px;
}
.list li .img-link {
   margin:5px 20px 0 0;
}
.list li div {
   float:left;
   width:167px;
}
.list li p {
   margin-bottom:0;
}
.list li p a {
   font-weight:bold;
}

.list1 {
   width:100%;
   overflow:hidden;
   padding-bottom:28px;
}
.list1 li {
   float:left;
   margin-right:30px;
}
.list1 li.alt {
   margin-right:0;
}

.list2 {
   padding-bottom:10px;
}
.list2 li {
   padding:0 0 8px 10px;
   background:url(images/arrow-right.gif) no-repeat left 5px;
   font-weight:bold;
}

/*========================== OTHER ============================*/

.img-box1 { 
   width:100%; 
   overflow:hidden;
   margin-top:-5px;
   padding-bottom:20px;
}
.img-box1 p {
   margin-bottom:0;
}
.img-box1 .img-link {
   margin:5px 20px 0 0;
}

p { 
   margin-bottom:20px;
   line-height:1.38em;
}
.p0 {
   margin-bottom:0;
}

.phone { 
   float:right; 
   margin-right:158px;
}

dl {
   margin-bottom:-22px;
   line-height:1.38em;
}
dl dt {
   font-weight:bold;
   color:#00a0dc;
}
dl dd {
   margin-bottom:22px;
}
dl dd a {
   font-weight:bold;
}

/*================= TXT, LINKS, LINES, TITLES =================*/

a {    
   color:#f9964c; 
   outline:none;
}
a:hover {
   text-decoration:none;
}

h2 {
   font-size:43px;
   line-height:1.2em;
   text-transform:uppercase;
   font-weight:normal;
   margin-bottom:20px;
}
h2 b {
   display:block;
   margin-top:-18px;
}
h2 span {
   font-size:36px;
}
h2 strong {
   color:#00b0e6;
   font-weight:normal;
   font-size:40px;
   text-transform:none;
}
h3 {
   font-size:23px;
   line-height:1.2em;
   text-transform:uppercase;
   margin-bottom:30px;
}
h4 {
   font-size:1em;
   line-height:1.38em;
   margin-bottom:15px;
   color:#00a0dc;
}
h5 {
   font-size:1em;
   line-height:1.38em;
   color:#00a0dc;
}

.link {
   color:#fff;
   text-decoration:none;
   font-size:17px;
   line-height:1.2em;
   background:url(images/link-tail.gif) repeat-x left top;
   padding:3px 15px 6px 15px;
   float:left;
   height:19px;
   overflow:hidden;
}
.link:hover {
   background:#959595;
}

.link1 {
   display:block;
   float:left;
   background:url(images/link1-tail.gif) repeat-x left top;
   color:#fff;
   margin-left:8px;
   padding:3px 24px 3px 24px;
   text-decoration:none;
}
.link1:hover {
   background:#8b9097;
}

.link2 {
   font-weight:bold;
   text-align:right;
   padding:16px 24px 14px 0;
}
.link2 a {
   text-decoration:none;
}
.link2 a:hover {
   text-decoration:underline;
}

.img-link {
    display:block;
   float:left;
   border:1px solid #666b72;
}
.img-link:hover {
   border:1px solid #f9964c;
}

.line-ver1 {
   background:url(images/divider1.gif) repeat-y 574px 0;
}
.line-ver2 {
   background:url(images/divider1.gif) repeat-y 332px 0;
}

.line-hor { 
   border-bottom:1px solid #d2d3d4; 
   margin:40px 0 33px 0; 
   overflow:hidden; 
   font-size:0; 
   line-height:0;
}

/*============================ BOXES ==========================*/

.box { 
   width:100%;
}
.box .border-top {
   height:118px;
   text-align:center;
}
.box .border-top h3 {
   padding-top:45px;
}
.box .xcontent {
   margin-bottom:5px;
}
.box .inner { 
   padding:26px 15px 20px 23px;
}
.box h3 {
   color:#fff;
   margin-bottom:0;
}
.box ul {
   padding:0 0 20px 0;
}
.box ul li {
   width:100%;
   overflow:hidden;
   vertical-align:top;
   padding-bottom:3px;
}
.box ul li.alt {
   padding-top:20px;
}
.box ul li a {
   color:#1f242a;
   text-decoration:none;
   padding:4px 0 5px 31px;
   display:block;
}
.box ul li a:hover {
   color:#fff;
}
/*--- style1 ---*/
.box.style1 .xcontent {
   background:#c7c8ca;
}
.box.style1 .border-top { 
   background:url(images/border-top1.gif) repeat-x left top;
}
.box.style1 ul li a:hover {
   background:#73767a;
}
.box.style1 h4 {
   color:#21262c;
}
.box.style1 .link2 {
   background:#b1b3b5;
}
.box.style1 .link2 a {
   color:#21262c;
}

/*--- style2 ---*/
.box.style2 .xcontent {
   background:#bfebf8;
}
.box.style2 .border-top { 
   background:url(images/border-top2.gif) repeat-x left top;
}
.box.style2 ul li a:hover { 
   background:#29a5ca;
}
.box.style2 h4 {
   color:#00a0dc;
}
.box.style2 .link2 {
   background:#a6e3f6;
}
.box.style2 .link2 a {
   color:#00a0dc;
}

/*--- style3 ---*/
.box.style3 .xcontent {
   background:#e9f1c3;
}
.box.style3 .border-top { 
   background:url(images/border-top3.gif) repeat-x left top;
}
.box.style3 ul li a:hover { 
   background:#9dbc3a;
}
.box.style3 h4 {
   color:#7da600;
}
.box.style3 .link2 {
   background:#e4efb7;
}
.box.style3 .link2 a {
   color:#7da600;
}

/*--- style4 ---*/
.box.style4 .xcontent {
   background:#fff1bf;
}
.box.style4 .border-top { 
   background:url(images/border-top4.gif) repeat-x left top;
}
.box.style4 ul li a:hover { 
   background:#e1ae04;
}
.box.style4 h4 {
   color:#e79800;
}
.box.style4 .link2 {
   background:#ffefa8;
}
.box.style4 .link2 a {
   color:#e79800;
}

/*--- style5 ---*/
.box.style5 .xcontent {
   background:#fdd9bf;
}
.box.style5 .border-top { 
   background:url(images/border-top5.gif) repeat-x left top;
}
.box.style5 ul li a:hover { 
   background:#f9964c;
}
.box.style5 h4 {
   color:#ea6300;
}
.box.style5 .link2 {
   background:#fccba6;
}
.box.style5 .link2 a {
   color:#ea6300;
}

/*========================= CONTENT ===========================*/

#content {
   padding-bottom:56px;
}
#content .indent {
   padding:62px 28px 10px 28px;
}
#content .indent1 {
   padding-bottom:10px;
}

/*========================= FOOTER ============================*/

#footer .indent {
   padding:38px 0 0 18px;
}
#footer ul {
   width:100%;
   overflow:hidden;
   padding-bottom:10px;
}
#footer ul li {
   float:left;
   padding-right:19px;
   margin-right:19px;
   background:url(images/divider.gif) no-repeat right 5px;
}
#footer ul li a {
   color:#666b72;
   text-decoration:none;
}
#footer ul li a:hover {
   text-decoration:underline;
}
#footer ul li.last {
   background:none;
   padding-right:0;
   margin-right:0;
}
#footer p {
   color:#666b72;
}
#footer p a {
   color:#f76e00;
}

/*=============================================================*/

Link to comment
Share on other sites

You should be able to use Ben's method fairly easily. Use a graphics program like Irfanview to make an image with the five colors and the white spaces, like item 18 here

http://www.wickham43.net/firefoxbackground.php

 

The background image needs to be in a container for center parts of the five columns because you have broken the columns into three parts; create a new containing div for the center parts of the five columns and put the background-image with repeat-y in the style for that div. It will mean reorganising the body markup so that you have the five top level parts each with a different background-color, then the containing div with the five middle parts and the background image, then the five bottom parts each with a different background-color.

Edited by Wickham
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...