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 7 of 7
  1. #1
    Regular Coder
    Join Date
    Sep 2002
    Location
    California
    Posts
    511
    Thanks
    1
    Thanked 1 Time in 1 Post

    Having A positioning Problem With layout

    Hi
    Ive bee working on a new layout for my site for about 2 days now and ive spent about a day and a half and aa certain problem is just buggin the crap out of me and i jsut cant seem to figure it out.

    I have a 3 Colum web page and the 2 outer ones are behaving properly as they should (I think) but the middle one isnt resizing itself properly to fit lower or higher resolutions, it is resizing however but out of proportion to the rest of my site. The middle colum code for the site which is extremely simple is this

    Code:
    <div class="col2">
    <div class="date">October 11th 2004</div>
    <div class="news">And todays news is what is in here</div>
    </div>
    And the css that contros it is
    Code:
    .col2 { 
    	border-collapse:collapse;
    	position:absolute;
    	top:167px;
    	left:17%;
    	right17%;
    	width:66%;
    	border:0px solid #009900;
    	padding:3px;
    	}
    Also I dont know if this is of any sue but heres the code for the news and date sections
    Code:
    .date {
    	padding-right:1px;
    	margin-bottom: -1px;
    	border-collapse:collapse;
    	width:100%;
    	background-color:#011B35;
    	color:#FFFFFF;
    	font-size:15px;
    	border:1px solid #000000;
    	text-align: center;
    	}
    .news	{
    	padding-left:1px;
    	padding-bottom:1px;
    	padding-top:1px;
    	margin-bottom:-1px;
    	font-size:13px;
    	border-collapse:collapse;
    	width: 100%;
    	background-color:#304459;
    	border:1px solid #000000;
    	border-top-width: 0px;
    	color: #FFFFFF;
    	}
    Any help is apreciated
    When traveling down the road of life, Try not to drag your face in the gravel.

  • #2
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Can we see the code for the other 2 columns?

  • #3
    Regular Coder
    Join Date
    Sep 2002
    Location
    California
    Posts
    511
    Thanks
    1
    Thanked 1 Time in 1 Post
    sure thing heres the css part
    Code:
    .col1 {
    	border-collapse:collapse;
    	position:absolute;
    	top:167px;
    	left:0px;
    	width:196px;
    	border:0px solid #00ff00;
    	padding:3px;
    	}
    .col3 {
    	border-collapse:collapse;
    	position:absolute;
    	top:167px;
    	right:0px;
    	width:196px;
    	border:0px solid #009900;
    	margin-right: 0px;
    	}
    Since theres quite a bit of code ill include the other 2 colums in txt files, I have my site divided into 3 pieces, the right and left which are the txt files and the middle which i have given above if that is any more help
    Attached Files Attached Files
    When traveling down the road of life, Try not to drag your face in the gravel.

  • #4
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Your columns are resizing differently because your middle column has percentage units for the margins and your side columns are using pixel units for their width. Make them the same unit and adjust accordingly.

  • #5
    Regular Coder
    Join Date
    Sep 2002
    Location
    California
    Posts
    511
    Thanks
    1
    Thanked 1 Time in 1 Post
    hmm it seems that ive tried making them all percents and had the same effect....ill try it again tho and ill get back to ya, im runnin a system scan for Apsiv.A right now lol so everythings kinda sloooowwwwww adn i cant use ftp
    When traveling down the road of life, Try not to drag your face in the gravel.

  • #6
    Regular Coder
    Join Date
    Sep 2002
    Location
    California
    Posts
    511
    Thanks
    1
    Thanked 1 Time in 1 Post
    No it didnt work I changed it to this, and I still get the same effect.

    Code:
    .col1 {
    	border-collapse:collapse;
    	position:absolute;
    	top:167px;
    	left:0px;
    	width:16%;
    	padding: 3px;
    	}
    
    .col2 { 
    	border-collapse:collapse;
    	position:absolute;
    	top:167px;
    	left:17%;
    	right17%;
    	width:66%;
    	padding: 3px;
    	}
    
    .col3 {
    	border-collapse:collapse;
    	position:absolute;
    	top:167px;
    	right:0px;
    	width:17%;
    	padding: 3px;
    	margin-right: 0px;
    	}
    When traveling down the road of life, Try not to drag your face in the gravel.

  • #7
    Regular Coder
    Join Date
    Sep 2002
    Location
    California
    Posts
    511
    Thanks
    1
    Thanked 1 Time in 1 Post
    nobody's got any other ideas eh?, ive tried all combos of widths in pixels and percent and all that but theya ll have the same exact effect
    When traveling down the road of life, Try not to drag your face in the gravel.


  •  

    Posting Permissions

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