Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Aug 2007
    Posts
    73
    Thanks
    17
    Thanked 0 Times in 0 Posts

    Resizing a column

    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
    Last edited by billvasko; 03-29-2009 at 07:19 PM.

  • #2
    Regular Coder
    Join Date
    Oct 2007
    Location
    Glencoe, Ontario, Canada
    Posts
    340
    Thanks
    19
    Thanked 27 Times in 27 Posts
    You need to widen the size of the wrapper before you do the columns.

    Code:
    #wrapper
    display: block;
    height: 0px;
    margin-bottom: 0px;
    margin-left: 288px;
    margin-right: 289px;
    margin-top: 0px;
    position: relative;
    text-align: left;
    width: 686px;
    Eric "PitbullMean" Melo
    Always Start your layout with*{border:0; margin:0; padding:0;}
    Be sure to Thank ALL Users who give assistance.

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,695
    Thanks
    22
    Thanked 1,832 Times in 1,816 Posts
    Hello billvasko,
    You'll need to change widths in a couple different spots. I'll hight light them in red below -
    Code:
    #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 so your box model 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 -
    Code:
    #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?verbos...s%2Findex.html
    Last edited by Excavator; 03-29-2009 at 07:38 PM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    New Coder
    Join Date
    Aug 2007
    Posts
    73
    Thanks
    17
    Thanked 0 Times in 0 Posts
    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.

  • #5
    New Coder
    Join Date
    Aug 2007
    Posts
    73
    Thanks
    17
    Thanked 0 Times in 0 Posts
    Oops, thanks Excavator--I posted while u were posting......give me a minute to try these out.

  • #6
    Regular Coder
    Join Date
    Oct 2007
    Location
    Glencoe, Ontario, Canada
    Posts
    340
    Thanks
    19
    Thanked 27 Times in 27 Posts
    What excavator said will work
    Eric "PitbullMean" Melo
    Always Start your layout with*{border:0; margin:0; padding:0;}
    Be sure to Thank ALL Users who give assistance.

  • Users who have thanked PitbullMean for this post:

    billvasko (03-29-2009)

  • #7
    New Coder
    Join Date
    Aug 2007
    Posts
    73
    Thanks
    17
    Thanked 0 Times in 0 Posts
    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........

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,695
    Thanks
    22
    Thanked 1,832 Times in 1,816 Posts
    Quote Originally Posted by billvasko View Post
    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........

    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    billvasko (03-29-2009)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •