div code for layout

Discussion in 'HTML & Website Design' started by greentree, Jun 22, 2008.

  1. #1
    I don't have a clear understanding of how to use the div code to custom a layout. Column 2 will be short because it will contain links. Column 1 and 3 will contain the main site content. How should I set up the div or php code so that I could get this layout in my php file? The '.' are blank and just there to space thing out because this forum reduce blank space so imagine it is not there. The layout I would like is this:

    ________________________________________
    l Header Graphic
    l
    l_______________________________________
    lcolumn ............l..column. l......blog.........l
    l...1................. l...2........l.....................l
    l...main ............l............ l......subcontentl
    l.. content.........l............ l....................l
    l .....................l............ l.....................l
    l .....................l............ l.....................l
    l____________________________________l
     
    greentree, Jun 22, 2008 IP
  2. BANAGO

    BANAGO Active Member

    Messages:
    456
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    58
    #2
    I can do that for you. If interested, let me know.
     
    BANAGO, Jun 22, 2008 IP
  3. greentree

    greentree Active Member

    Messages:
    16
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    86
    #3
    I only need to know how to set up the tag, so I can do that. I don't have the money to pay, which is why I am posting on the forum to get help in learning how to do that.
     
    greentree, Jun 22, 2008 IP
  4. Denn

    Denn Peon

    Messages:
    76
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    
    <div id="container">
    <div id="header">
    </div>
    <div id="floatcontainer">
    <div style="float: left;">
    1
    </div>
    <div style="float: left;">
    2
    </div>
    <div>
    3
    </div>
    </div>
    </div>
    
    
    PHP:
    However the div requires a width before the float works properly.
     
    Denn, Jun 22, 2008 IP
  5. SLoB

    SLoB Peon

    Messages:
    13
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    consider stripping out inline styling and put into separate css file

    and seeing as your using php once you have your layout done consider putting header, footer, menus into template files so the code is only done once but is reused, then you only need to deal with content, good from a maintenance pov and keeps to a nice tidy structure
    you can add in dynamic content to those templates still too
     
    SLoB, Jun 22, 2008 IP
  6. Denn

    Denn Peon

    Messages:
    76
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    SLoB - I'm just showing him the idea of it.
     
    Denn, Jun 22, 2008 IP
  7. greentree

    greentree Active Member

    Messages:
    16
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    86
    #7
    Thank you. I manage to get this part completed. You were both a big help. My site is looking better.
     
    greentree, Jun 23, 2008 IP
  8. SLoB

    SLoB Peon

    Messages:
    13
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #8
    Yea I know Denn, sorry was not trying to undervalue your post in anyway, I know you were just giving an example.

    I was just giving a handy pointer though my post was mainly pushing to reduce duplication of code so that from a maintenance pov duplicate code is not an issue, separation is key to retaining good maintenance. if people can reuse code snippets in templates then it really does help reduce time, effort, then concentration can be better spent on the content as you don't have to worry about header, footers etc. as the code is already done and working.
     
    SLoB, Jun 23, 2008 IP
  9. greentree

    greentree Active Member

    Messages:
    16
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    86
    #9
    No worries. I didn't duplicate or copy/paste or use the code above so mine doesn't look like the one above. I did some google search on float to have a better understanding off it. I wouldn't have known if Denn haven't point me in the right direction by mentioning the word 'float'.
     
    greentree, Jun 23, 2008 IP