7 Replies Latest reply on Oct 13, 2006 8:39 AM by La Bestia

    HTML/CSS Layout Help

    La Bestia
      Here is my layout and code. What I am simply trying to accomplish is to position that red div(rightcolumn) over to the right of the gray div (leftcolumn) I have attached the code I currently have in Dreamweaver. Can anyone tell me what I need in the CSS in order to get this position to the right. I would like the content box to shrink the content so the layout is fluid so I dont think absolute positioning will be right here.
      http://i30.photobucket.com/albums/c313/pcproff/layout.gif">
      http://i30.photobucket.com/albums/c313/pcproff/code.gif">
        • 1. Re: HTML/CSS Layout Help
          Level 7
          La Bestia wrote:

          > Here is my layout and code. What I am simply trying to accomplish is to
          > position that red div(rightcolumn) over to the right of the gray div
          > (leftcolumn) I have attached the code I currently have in Dreamweaver.
          >
          >
          > <img src=" http://i30.photobucket.com/albums/c313/pcproff/code.gif">
          > <img src=" http://i30.photobucket.com/albums/c313/pcproff/layout.gif">
          >


          #leftcolumn {
          float: left;
          background-color: #666666;
          padding: 10px;
          width: 355px;
          }

          #rightcolumn {
          float: left;
          background-color: #FF9933;
          padding: 10px;
          width: 355px;
          }

          • 2. Re: HTML/CSS Layout Help
            Level 7
            Also:

            Add clear; both; to your #footer as well. That will push it down under
            the floated <divs>

            If the #footer is inserted within the #container <div> then theres no
            need to declare its with. A <div> will expand to take up the width of
            its parent container.

            If the #footer is not within the #container then make its with 730px.
            Padding gets added to the width of the <div> so you need to get rid of 20px.

            A tip: It is nearly always better to add padding to content within the
            <div> like a <p> paragraph. This will stop you having to worry about the
            calculations so much


            Osgood wrote:


            >
            > #leftcolumn {
            > float: left;
            > background-color: #666666;
            > padding: 10px;
            > width: 355px;
            > }
            >
            > #rightcolumn {
            > float: left;
            > background-color: #FF9933;
            > padding: 10px;
            > width: 355px;
            > }
            >

            • 3. Re: HTML/CSS Layout Help
              La Bestia Level 1
              OK one other question.... How can I center the entire layout??
              • 4. Re: HTML/CSS Layout Help
                Level 7
                La Bestia wrote:

                > OK one other question.... How can I center the entire layout??


                Alter the #container margin css to:

                margin: 0 auto;


                If you want it to center in IE5x then you need to add to your css:

                body {
                text-align: center;
                }

                plus add

                text-align: left; to the #container css.

                • 5. Re: HTML/CSS Layout Help
                  Level 7
                  You should end up with this:


                  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                  " http://www.w3.org/TR/html4/loose.dtd">
                  <html>
                  <head>
                  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
                  <title>Untitled Document</title>
                  <style type="text/css">
                  body {
                  text-align: center;
                  }
                  #container {
                  padding: 10px;
                  width: 750px; /* real width 770px */
                  background-color: #cccccc;
                  text-align:left;
                  }
                  #leftcolumn {
                  float: left;
                  background-color: #666666;
                  padding: 10px;
                  width: 355px; /* real width 375px */
                  }
                  #rightcolumn {
                  float: left;
                  background-color: #cc3333;
                  padding: 10px;
                  width: 355px; /* real width 375px */
                  }
                  #footer {
                  background-color: #ff9933;
                  padding: 10px;
                  } </style>
                  </head>

                  <body>
                  <div id="container">
                  <div id="leftcolumn">Left Column</div>
                  <div id="rightcolumn">Right Column</div>
                  <div id="footer">Footer</div>
                  </div>
                  </body>
                  </html>









                  Osgood wrote:

                  > La Bestia wrote:
                  >
                  >> OK one other question.... How can I center the entire layout??
                  >
                  >
                  >
                  > Alter the #container margin css to:
                  >
                  > margin: 0 auto;
                  >
                  >
                  > If you want it to center in IE5x then you need to add to your css:
                  >
                  > body {
                  > text-align: center;
                  > }
                  >
                  > plus add
                  >
                  > text-align: left; to the #container css.
                  >

                  • 6. Re: HTML/CSS Layout Help
                    Level 7
                    Geezz...... apart from I left out margin: 0 auto; from #container <div> css





                    Osgood wrote:

                    > You should end up with this:
                    >
                    >
                    > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    > " http://www.w3.org/TR/html4/loose.dtd">
                    > <html>
                    > <head>
                    > <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
                    > <title>Untitled Document</title>
                    > <style type="text/css">
                    > body {
                    > text-align: center;
                    > }
                    > #container {
                    > padding: 10px;
                    > width: 750px; /* real width 770px */
                    > background-color: #cccccc;
                    > text-align:left;
                    > }
                    > #leftcolumn {
                    > float: left;
                    > background-color: #666666;
                    > padding: 10px;
                    > width: 355px; /* real width 375px */
                    > }
                    > #rightcolumn {
                    > float: left;
                    > background-color: #cc3333;
                    > padding: 10px;
                    > width: 355px; /* real width 375px */
                    > }
                    > #footer {
                    > background-color: #ff9933;
                    > padding: 10px;
                    > } </style>
                    > </head>
                    >
                    > <body>
                    > <div id="container">
                    > <div id="leftcolumn">Left Column</div>
                    > <div id="rightcolumn">Right Column</div>
                    > <div id="footer">Footer</div>
                    > </div>
                    > </body>
                    > </html>
                    >
                    >
                    >
                    >
                    >
                    >
                    >
                    >
                    >
                    > Osgood wrote:
                    >
                    >> La Bestia wrote:
                    >>
                    >>> OK one other question.... How can I center the entire layout??
                    >>
                    >>
                    >>
                    >>
                    >> Alter the #container margin css to:
                    >>
                    >> margin: 0 auto;
                    >>
                    >>
                    >> If you want it to center in IE5x then you need to add to your css:
                    >>
                    >> body {
                    >> text-align: center;
                    >> }
                    >>
                    >> plus add
                    >>
                    >> text-align: left; to the #container css.
                    >>
                    >

                    • 7. Re: HTML/CSS Layout Help
                      La Bestia Level 1
                      Great stuff guys real knowledgable people in here! thanks again...