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 4 of 4
  1. #1
    New Coder
    Join Date
    Mar 2009
    Location
    Phoenix Arizona
    Posts
    37
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Question 3 Total divs side by side with the left and right divs at 100% width. Please Help :)

    Hi, I could easily do what I need to do with a basic table but know that it's not proper. So I'm wondering how I can do the following...


    [ 100% ] [ 1022px ] [ 100% ]

    Basically Have a fixed div in the middle with 2 divs on each side so I can place repeating backgrounds in them. I've been trying to do it unsuccessfully.

    Here is my attempt...

    Code:
    <div style="width: 100%; height: 300px;">
    	<div style="width: 100%; height: 300px; background: url(images/headbg.png) repeat-x; float: left;"></div>
    	<div style="width: 1022px; height: 300px; background: url(images/head.png) no-repeat; float: left;"></div>
        <div style="width: 100%; height: 300px; background: url(images/headbg.png) repeat-x; float: right;"></div>
    </div>
    Thanks for any help!

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello CruxCreations,
    You've already see that 100% widths don't work.
    Try this instead - http://nopeople.com/CSS/1022px%20cen...ars/index.html
    Last edited by Excavator; 12-08-2009 at 01:36 AM.
    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

  • #3
    Regular Coder hdewantara's Avatar
    Join Date
    Aug 2009
    Location
    Jakarta, Indonesia.
    Posts
    354
    Thanks
    9
    Thanked 52 Times in 51 Posts
    Hi,
    If for backgrounds why not just having a "content" div inside "background" div like following:
    PHP Code:
    <div style="width: 100%; background: url(images/headbg.png) repeat-x; ">
      <
    div style="width: 1022px; height: 300px; background: url(images/head.png) no-repeat; "></div>
    </
    div
    But I'd rather follow Excavator's...
    You have more control with CSS method.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Depending on what your doing.. this may be a lot simpler
    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


  •  

    Posting Permissions

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