SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast Uphoreum's Avatar
    Join Date
    Jul 2006
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question CSS DIV Question

    Say I wanted to have two div's next to eachother, like a nav bar and the content of the page. When you make a new div, it puts it at the bottom of the previous one. How can I make them go to the right and left of eachother?

  2. #2
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,347
    Mentioned
    63 Post(s)
    Tagged
    3 Thread(s)
    float one left and the other one right

    see http://www.456bereastreet.com/archiv...width_elastic/ for example
    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  3. #3
    Guru Meditation Error gnarly's Avatar
    Join Date
    Dec 2003
    Location
    Cheltenham, United Kingdom
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Arrow

    There's a number of ways to crack that nut. One is to use floats, for example:

    HTML Code:
    <div id="navigation">foo</div>
    <div id="content">bar</div>
    CSS:
    Code:
    #navigation {
         width: 20em;
         float: left;
    }
    If you need anything to appear below them (e.g. <div id="footer">), try the following:

    Code:
    #footer {
         clear: both;
    }
    Olly Hodgson
    thinkdrastic.net

  4. #4
    SitePoint Enthusiast Uphoreum's Avatar
    Join Date
    Jul 2006
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys, that's what I wanted

  5. #5
    Eat, Sleep, *********! J. Pederson's Avatar
    Join Date
    Sep 2001
    Location
    Wisconsin
    Posts
    103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can also just make one display:inline

    for example if you want the navbar to be on the left and the content on right, you would say:

    <div id='navbar' style='display:inline; width: 100px;'>navbar</div><div id='contant'>content</div>

    Enjoy
    James Pederson - Web Design & Development
    phone: 608.243.7898
    e-mail: james@transparentacoustics.com
    websites: clear speaker box | website development madison


Bookmarks

Posting Permissions

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