...

View Full Version : Resizing a column



billvasko
03-29-2009, 07:16 PM
I want to increase the width of the right column in the site linked below. I tried changing #'s in "body .i" but that only moved the location of the texts/images. Which section of CSS code will increase the width of the column to give me more space to work with? Thank you!!

http://www.maxxtraining.com/antalis/index.html

PitbullMean
03-29-2009, 07:29 PM
You need to widen the size of the wrapper before you do the columns.


#wrapper
display: block;
height: 0px;
margin-bottom: 0px;
margin-left: 288px;
margin-right: 289px;
margin-top: 0px;
position: relative;
text-align: left;
width: 686px;

Excavator
03-29-2009, 07:36 PM
Hello billvasko,
You'll need to change widths in a couple different spots. I'll hight light them in red below -

#wrapper {
text-align: left;
margin: auto;
/*width: 6px; - seems narrow, could be a problem*/
width: 800px; /*maybe more like 786px?*/
position: relative;
}
#head-top {
position: absolute;
top: 0;
left: 259px;
width: 527px;
height: 32px;
z-index: 2;
background: url(images/head_top.gif) repeat-x;
}
#head-right {
position: absolute;
top: 0;
left: 786px;
width: 13px;
height: 145px;
z-index: 3;
background: url(images/head_right.gif) no-repeat;
}
#body {
position: absolute;
width: 527px;
top: 0;
left: 259px;
background: white;
overflow: hidden;
}

That should add 100px width to #body.

This is a pretty difficult way to make a layout though. You have absolute position on everything (http://www.tyssendesign.com.au/articles/css/absolute-positioning-pitfalls/)so your box model (http://www.w3.org/TR/CSS2/box.html) being off isn't really hurting you. Still, things like #family being 383px wide bug me. Put a background color on that to see what size it really is, like this -
#family {
position: absolute;
background: #f00 url(images/ourstaff4.jpg) no-repeat;
width: 383px;
height: 381px;
top: 204px;
left: 0px;
z-index: 1;
}


And, like it says in my sig... http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.maxxtraining.com%2Fantalis%2Findex.html

billvasko
03-29-2009, 07:36 PM
Pitbull, I changed the wrapper size to 850, and then I also changed the size of this:

#body {
position: absolute;
width: 600px;
top: 0;
left: 259px;
background: white;
overflow: hidden;

The 600 was 427.

Everything is good so far except, my frame or inner wrapper, not sure what it is called, needs extended out.

billvasko
03-29-2009, 07:37 PM
Oops, thanks Excavator--I posted while u were posting......give me a minute to try these out.

PitbullMean
03-29-2009, 07:38 PM
What excavator said will work

billvasko
03-29-2009, 07:58 PM
Thanks guys for putting up with a rookie.......I know I kind of do things the hard way, but that's because I learned html in 1995 and just now figuring out CSS--it's a big leap!!

Everything worked out great, except I have a small gap in the gray header........

Excavator
03-29-2009, 08:15 PM
Thanks guys for putting up with a rookie.......I know I kind of do things the hard way, but that's because I learned html in 1995 and just now figuring out CSS--it's a big leap!!

Everything worked out great, except I have a small gap in the gray header........

http://www.maxxtraining.com/antalis/images/head_top.gif
See the gap at the left?
Crop that image down so it's 1px X 32px, it's repeated on the x axis and there is no need for an image that wide.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum