dcsimg
www.webdeveloper.com
Results 1 to 2 of 2

Thread: div layout assist

  1. #1
    Join Date
    Mar 2011
    Posts
    1

    div layout assist

    I'm trying to transition from tables to div tags for a web site I manage. I'm using an old version of Dreamweaver to handle menus, but rolling my own divs for layout purposes. For some reason, I cannot seem to get a bulleted list (ul tag) to line up propery. See the test page at http://myfranciscanknights.org/test/index3.html and take a look at how the list lines up with respect to the div on the left. Also, I'd like to have a uniform background to the div sidebar1, but am having problems getting that done.

    I used internal styles in this page so you'll be able to see everything at once. To see the original site, look at http://myfranciscanknights.org/.

    Thanks for any hints. -Larry

  2. #2
    Join Date
    Jun 2006
    Location
    Boston, MA
    Posts
    383
    you're layout is a little odd.. i'd start with a basic layout and work from there.. something like this... (i set fixed heights just so you can see how it lays out, do with them what you will..)

    HTML Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Untitled Document</title>
    <style>
    #container{width:500px;height:800px;}
    #header{width:500px;height:100px;margin-bottom:10px;}
    #footer{width:500px;height:100px;}
    #mid-wrap{width:500px;height:800px;margin-bottom:10px;}
    #sidebar{float:left;width:150px;height:800px;margin-right:10px;}
    #content{float:left;width:340px;height:800px;}
    </style>
    </head>
    <body>
    <div id="container">
    
    <div id="header"></div>
    
    <div id="mid-wrap">
    <div id="sidebar"></div>
    <div id="content"></div>
    </div>
    
    <div id="footer"></div>
    
    </div>
    </body>
    </html>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles