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
    Apr 2006
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Using CSS & DIV instead of tables for Layout

    Hi All,

    I have been building website for a few years now and have always used tables as a way to structure a page. I have just got more involved in using CSS to it's full potential and usig DIVS to manage the layout.

    What I am completely stuck around is getting one DIV lines up with another. Probably the best way to explain what I mean is using the CodingForums.com header above.

    I have created a div style for the company logo and another div style for a search box. The layout I want to achieve is having the logo on the left (as above) and search box on the right, without using tables.

    I've tried absolute, reletive, left aligns, all sorts (some code below).

    Has anyone any ideas or good tutorials I can follow. For those of you who haven't got a clue what I am going on about, I apologise, as I have a tendency to go round the houses trying to explain something.

    CSS Code
    #outline {
    position: relative; /* This is like centering a table */
    width: 800px; /* Width starts from the centre out - if set to auto it it positioned left */
    margin-right: auto; /* More relevant for inner divs but gives you margin for edge of page or relative position */
    margin-left: auto; /* As above */
    }

    #footeroutline {
    position : relative;
    width : 800px;
    margin-top: 15px;
    margin-right: auto; /* Needed for centering */
    margin-left: auto;
    text-align : center;
    color:#999999;
    }

    #headeroutline {
    position: relative;
    width: 800px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 10px;
    }

    #logo {
    position: relative;
    width: 200px;
    left: 100px;
    margin-top: 10px;
    margin-right: auto;
    margin-left: auto;
    }

    .headerSearch {
    float: right;
    margin-top: 50px;
    }

    HTML Code
    <div id="logo">
    <img src="../images/logos/murge_logo.jpg">
    </div>
    <div class="headerSearch">
    Search Box Goes Here
    </div>

    The result is one under the other, not next to each other.

    Cheers,

    Andy

  • #2
    Regular Coder Masterslave's Avatar
    Join Date
    Dec 2005
    Posts
    287
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I recommend floats instead of absolute positioning.
    http://www.w3schools.com/css/pr_class_float.asp

    Maybe you have to use z-index
    http://www.w3schools.com/css/pr_pos_z-index.asp

  • #3
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    What you can do is just have a header div that is position:relative. Insert your image into this div. Then include your search box .headerSearch{position:absolute; right:0; top:50px;}

  • #4
    Regular Coder oldcrazylegs's Avatar
    Join Date
    Feb 2004
    Location
    East Moline Illinois USA
    Posts
    414
    Thanks
    4
    Thanked 5 Times in 4 Posts
    here are literally thousands of css examples including layouts.

    http://css-discuss.incutio.com/

    read this wonderful book

    http://www.idest.com/csshacks/


  •  

    Posting Permissions

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