Minor div alignment issue

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • AdventSparky
    New Member
    • Dec 2006
    • 3
    #1

    Minor div alignment issue

    Hi all,

    I am a third level multimedia student and was just wondering what the best/easiest way to have 2 divs beside each other in a page with no wrappng. e.g. a content and a nav div.

    I know the simple answer is to use float but I cannot get it to fit correctly. I want my nav on the right and content on the left.

    Thanks for your time,
    Ian
    Tags: None
    • mtnative
      New Member
      • Dec 2006
      • 6
      #2
      DIV alignment can be a bit tricky. By default a DIV tag includes a line break so you would have to use float to line them up horizontally.

      I'm not sure what you mean when you say "I can not get it to fit correctly." Can you offer some more specific detail about the problem you are having?

        Comment

        • AricC
          Recognized Expert Top Contributor
          • Oct 2006
          • 1885
          #3
          Not really clear is this what your trying to do?

          [html]<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
          <html>
          <head>
          <title>
          Test
          </title>

          <style type="text/css">
          body
          {
          background-color: #000;
          }

          .clsBox1
          {
          width: 75px;
          height: 75px;
          background-color: #fff;
          position: absolute;
          text-align: center;
          }
          .clsBox2
          {
          left: 100px;
          width: 75px;
          height: 75px;
          background-color: #fff;
          position: relative;
          text-align: center;
          }

          </style>

          </head>




          <body>



          <div class="clsBox1" >
          Test
          </div>


          <div class="clsBox2" >
          Test
          </div>


          </body>

          </html>[/html]

            Comment

            • AdventSparky
              New Member
              • Dec 2006
              • 3
              #4
              Upon re-reading my post I realise I wasn't very specific.

              I am attempting to use float to do it. I have them side by side but once my content div finishes My #nav wraps around and places material under my #content.

              It will only be a problem on the front page because the #content is small (just for a login arera) so #nav has room to wrap underneath.

              I just need to learn how to stop the wrapping without having to give my content a fixed size.

                Comment

                • mtnative
                  New Member
                  • Dec 2006
                  • 6
                  #5
                  I was able to reproduce the circumstance you described. I had two DIV's lined up horizontally with the DIV on the right containing more content than the DIV on the left. Neither had a HEIGHT: definition and both had a WIDTH: definition.

                  When I removed the WIDTH: definintion from the STYLE= statement (I was using an inline style statement) on the right hand DIV, its contents wrapped around the bottom of the left hand DIV.

                  So, it appears that you must specify a WIDTH: for the right hand DIV in order to prevent the contents from wrapping.

                  Give it a try and see if this solves your issue.

                    Comment

                    • AricC
                      Recognized Expert Top Contributor
                      • Oct 2006
                      • 1885
                      #6
                      If mtnative's solution doesn't help post your code and a link to the site so we can see what is going on.

                        Comment

                        • AdventSparky
                          New Member
                          • Dec 2006
                          • 3
                          #7
                          Yep all fixed. Thanks everyone.

                            Comment

                            Previous template Next
                            Working...