Position 2 DIVs on Single Line

Discussion in 'HTML' started by vunet, Aug 5, 2008.

  1. vunet

    vunet Guest

    I want to position 2 divs correctly. First one is the content and
    second one is the right side bar of fixed size.
    I want the content to have no fixed width but right side bar would be
    200px. If no right side bar div tag shown, the first div would fully
    expand.
    Please recommend based on my bad example below or suggest something
    better if possible.
    The example below has a fixed width for div 2, but I need full width
    and div 2 would fit in on right side moving div 1 content to the left.
    Thanks a lot


    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html;
    charset=iso-8859-1" />
    <style type="text/css">
    <!--
    body {
    margin: 0px;
    padding: 0px;
    }
    div#one {
    float: left;
    width:300px;
    margin: 0px;
    background-color: red;
    }
    div#two {
    float: right;
    width: 200px;
    padding: 5px;
    margin: 0px;
    background-color: silver;
    }

    -->
    </style>
    </head>

    <body>
    <div id="one">
    Port side text...
    <p>Eu fugiat nulla pariatur. Velit esse cillum dolore duis aute
    irure dolor ut aliquip ex ea commodo consequat. </p>
    </div>

    <div id="two">
    Second column text...
    <p>Velit esse cillum dolore duis aute consectetur adipisicing
    elit. Quis nostrud sed tempor est laborum. </p>
    <p>Sed do eiusmod tempor incididunt sunt in culpa consectetur
    adipisicing elit. Excepteur sint occaecat eu fugiat nulla pariatur. Eu
    fugiat nulla pariatur. Ut labore et dolore magna aliqua. </p>
    </div>
    </body>
    </html>
     
    vunet, Aug 5, 2008
    #1
    1. Advertising

  2. vunet

    Neredbojias Guest

    On 05 Aug 2008, vunet <> wrote:

    > I want to position 2 divs correctly. First one is the content and
    > second one is the right side bar of fixed size.
    > I want the content to have no fixed width but right side bar would be
    > 200px. If no right side bar div tag shown, the first div would fully
    > expand.
    > Please recommend based on my bad example below or suggest something
    > better if possible.
    > The example below has a fixed width for div 2, but I need full width
    > and div 2 would fit in on right side moving div 1 content to the left.
    > Thanks a lot
    >
    >
    > <html>
    > <head>
    > <title>Untitled Document</title>
    > <meta http-equiv="Content-Type" content="text/html;
    > charset=iso-8859-1" />
    > <style type="text/css">
    > <!--
    > body {
    > margin: 0px;
    > padding: 0px;
    > }
    > div#one {
    > float: left;
    > width:300px;
    > margin: 0px;
    > background-color: red;
    > }
    > div#two {
    > float: right;
    > width: 200px;
    > padding: 5px;
    > margin: 0px;
    > background-color: silver;
    > }
    >
    > -->
    > </style>
    > </head>
    >
    > body>
    > div id="one">
    > Port side text...
    > <p>Eu fugiat nulla pariatur. Velit esse cillum dolore duis aute
    > irure dolor ut aliquip ex ea commodo consequat. </p>
    > </div>
    >
    > div id="two">
    > Second column text...
    > p>Velit esse cillum dolore duis aute consectetur adipisicing
    > elit. Quis nostrud sed tempor est laborum. /p>
    > p>Sed do eiusmod tempor incididunt sunt in culpa consectetur
    > adipisicing elit. Excepteur sint occaecat eu fugiat nulla pariatur. Eu
    > fugiat nulla pariatur. Ut labore et dolore magna aliqua. /p>
    > /div>
    > /body>
    > /html>


    Well, exactly what don't you like about the results of your example? Do
    you want the right content to clear a whole column on the right or what?

    --
    Neredbojias
    http://www.neredbojias.net/
    Adult Website
     
    Neredbojias, Aug 5, 2008
    #2
    1. Advertising

  3. vunet

    dorayme Guest

    In article
    <>,
    vunet <> wrote:

    > I want to position 2 divs correctly. First one is the content and
    > second one is the right side bar of fixed size.
    > I want the content to have no fixed width but right side bar would be
    > 200px. If no right side bar div tag shown, the first div would fully
    > expand.


    I assume the difficulty you are having is that you are not wanting to
    specify a right margin for the content div. In a table, in theory, it is
    easy, you just have a 2 col table, give it a width of 100% and give the
    2nd col a width of 200px.

    <style type="text/css" media="screen">
    body {margin: 0;}
    table {border-collapse: collapse; width: 100%;}
    td {color: #000; background: red;}
    td#two {color: #000; background: silver; width: 200px;}
    </style>
    </head>
    <body>
    <table>
    <tr><td>Content</td>
    <td id="two">Right side</td></tr>
    </table>

    Now if there is no second table cell, the first will simply go the whole
    width, notwithstanding the provision for a second in the CSS.

    Of course, it is easy to achieve a 200px right side-bar with a right
    float and a content that fills the left to the left by simply floating
    the 200px wide div to the right and not floating the content div at all
    (you are unlikely to want it to shrink to fit its own content, it might
    never make it to the left edge of the right div!). Unfortunately, one of
    the best ways to achieve this is to give the content div a right margin
    in which the right div float sits:

    <style type="text/css">
    body {margin: 0;}
    div#one {margin-right:200px;color:#000;background: red;}
    div#two {float: right;width:200px;color:#000;background:silver}
    </style>
    </head>
    <body>
    <div id="two">Left side</div>
    <div id="one">Content</div>
    </body>

    But you are unlikely to want this for the situation where there is no
    right side panel. If you leave it as above but have no div#two, the
    content div will still keep the margin.

    Not sure why you would not simply adjust the CSS and margin etc to suit
    the page and solve the problem, but I guess you have your reason, a
    dynamic website, content management site?

    There are other things to be tried but I will stop here.

    --
    dorayme
     
    dorayme, Aug 5, 2008
    #3
  4. vunet

    Gus Richter Guest

    vunet wrote:
    > I want to position 2 divs correctly. First one is the content and
    > second one is the right side bar of fixed size.
    > I want the content to have no fixed width but right side bar would be
    > 200px. If no right side bar div tag shown, the first div would fully
    > expand.
    > Please recommend based on my bad example below or suggest something
    > better if possible.
    > The example below has a fixed width for div 2, but I need full width
    > and div 2 would fit in on right side moving div 1 content to the left.
    > Thanks a lot


    To continue with what dorayme was saying, I've modified your example
    with changes which you should note in detail. Also read explanation
    notes in the example.


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html;
    charset="iso-8859-1">
    <style type="text/css">
    body {
    margin: 0;
    padding: 0;
    }
    div#one {
    margin: 0 210px 0 0;
    background-color: red;
    }
    div#two {
    float: right;
    width: 200px;
    padding: 5px;
    margin: 0;
    background-color: silver;
    }
    </style>
    </head>
    <body>
    <div id="two">
    Second column text...
    <p>Velit esse cillum dolore duis aute consectetur adipisicing
    elit. Quis nostrud sed tempor est laborum. </p>
    <p>Sed do eiusmod tempor incididunt sunt in culpa consectetur
    adipisicing elit. Excepteur sint occaecat eu fugiat nulla pariatur. Eu
    fugiat nulla pariatur. Ut labore et dolore magna aliqua. </p>
    </div>
    <div id="one">
    Port side text...
    <p>The second column (div#two) is floated right and must appear first
    in the markup/source. The first column (div#one) is not floated, but is
    permitted to automatically flow to the left of the second column. The
    second column has a fixed width declared, but the first column, with no
    width declared, will use whatever width is remaining.</p>
    <p>The right margin value of 210px applied to the first column will
    prevent any extended text from wrapping around the second column.</p>
    <p>If the first column is shorter than the second column and a
    subsequent element should not be beside the second column but below it,
    then the subsequent element must be cleared with a {clear:right;}.</p>
    <p>If the second column (div#two) is removed, then the first column
    (div#one), with its right margin value of 210px removed, will take up
    the full viewport width.</p>
    <p>Take note of the Doctype Declaration which I have added and which you
    should be using.<br>
    Also note the changes I made in your meta element, as well as the
    removal of the comment tags in your stylesheet.</p>
    filler<br>
    filler<br>
    filler<br>
    filler<br>
    filler<br>
    filler<br>
    filler<br>
    filler<br>
    </div>
    </body>
    </html>
     
    Gus Richter, Aug 6, 2008
    #4
  5. vunet

    vunet Guest

    On Aug 6, 8:08 am, Gus Richter <> wrote:
    > vunet wrote:
    > > I want to position 2 divs correctly. First one is the content and
    > > second one is the right side bar of fixed size.
    > > I want the content to have no fixed width but right side bar would be
    > > 200px. If no right side bar div tag shown, the first div would fully
    > > expand.
    > > Please recommend based on my bad example below or suggest something
    > > better if possible.
    > > The example below has a fixed width for div 2, but I need full width
    > > and div 2 would fit in on right side moving div 1 content to the left.
    > > Thanks a lot

    >
    > To continue with what dorayme was saying, I've modified your example
    > with changes which you should note in detail. Also read explanation
    > notes in the example.
    >
    > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    > "http://www.w3.org/TR/html4/strict.dtd">
    > <html>
    > <head>
    > <title>Untitled Document</title>
    > <meta http-equiv="Content-Type" content="text/html;
    > charset="iso-8859-1">
    > <style type="text/css">
    > body {
    >         margin: 0;
    >         padding: 0;}
    >
    > div#one {
    >         margin: 0 210px 0 0;
    >         background-color: red;}
    >
    > div#two {
    >         float: right;
    >         width: 200px;
    >         padding: 5px;
    >         margin: 0;
    >         background-color: silver;}
    >
    > </style>
    > </head>
    > <body>
    > <div id="two">
    >      Second column text...
    >      <p>Velit esse cillum dolore duis aute consectetur adipisicing
    > elit. Quis nostrud  sed tempor est laborum. </p>
    >      <p>Sed do eiusmod tempor incididunt sunt in culpa consectetur
    > adipisicing elit. Excepteur sint occaecat eu fugiat nulla pariatur. Eu
    > fugiat nulla pariatur. Ut labore et dolore magna aliqua. </p>
    > </div>
    > <div id="one">
    >    Port side text...
    >    <p>The second column (div#two) is floated right and must appear first
    > in the markup/source. The first column (div#one) is not floated, but is
    > permitted to automatically flow to the left of the second column. The
    > second column has a fixed width declared, but the first column, with no
    > width declared, will use whatever width is remaining.</p>
    > <p>The right margin value of 210px applied to the first column will
    > prevent any extended text from wrapping around the second column.</p>
    > <p>If the first column is shorter than the second column and a
    > subsequent element should not be beside the second column but below it,
    > then the subsequent element must be cleared with a {clear:right;}.</p>
    > <p>If the second column (div#two) is removed, then the first column
    > (div#one), with its right margin value of 210px removed, will take up
    > the full viewport width.</p>
    > <p>Take note of the Doctype Declaration which I have added and which you
    > should be using.<br>
    > Also note the changes I made in your meta element, as well as the
    > removal of the comment tags in your stylesheet.</p>
    > filler<br>
    > filler<br>
    > filler<br>
    > filler<br>
    > filler<br>
    > filler<br>
    > filler<br>
    > filler<br>
    > </div>
    > </body>
    > </html>


    What a great answer, thanks! Dorayme was very helpful and your example
    extended the answer in a way I was looking for.
    So my problem was switching of elements order.
    Removing DOCTYPE adds spacing in IE6. So I'll have to use it but I am
    just curious what strict DOCTYPE does to the document? How to choose
    the best DOCTYPE for, say, modern AJAX applications (aka RIA)?
     
    vunet, Aug 6, 2008
    #5
  6. vunet

    Gus Richter Guest

    vunet wrote:

    > Removing DOCTYPE adds spacing in IE6. So I'll have to use it but I am
    > just curious what strict DOCTYPE does to the document? How to choose
    > the best DOCTYPE for, say, modern AJAX applications (aka RIA)?


    Search for Doctype Switching or Doctype Sniffing and read all about it.

    The short answer is that most other Doctype Declarations other than the
    one I used or not using one at all, as you did, causes UAs to go into
    their Quirks Mode whereby they display as per their historic quirky,
    non-conforming way. A Strict one causes rendering in Standards
    Conforming way.

    --
    Gus
     
    Gus Richter, Aug 6, 2008
    #6
  7. Gazing into my crystal ball I observed vunet <> writing
    in news::

    > Removing DOCTYPE adds spacing in IE6. So I'll have to use it but I am
    > just curious what strict DOCTYPE does to the document? How to choose
    > the best DOCTYPE for, say, modern AJAX applications (aka RIA)?
    >


    All new pages should use Strict - Transitional is for pages that are, well,
    transitioning. It is what the server sends to the browser that is
    important here - not what language is being used on the server. This page
    [http://hsivonen.iki.fi/doctype/] makes interesting reading.

    --
    Adrienne Boswell at Home
    Arbpen Web Site Design Services
    http://www.cavalcade-of-coding.info
    Please respond to the group so others can share
     
    Adrienne Boswell, Aug 6, 2008
    #7
  8. vunet

    Bergamot Guest

    vunet wrote:
    >
    > Removing DOCTYPE adds spacing in IE6. So I'll have to use it but I am
    > just curious what strict DOCTYPE does to the document?


    Removing DOCTYPE puts the page into quirks mode.
    http://www.cs.tut.fi/~jkorpela/quirks-mode

    If you want any consistency across browsers, you must use standards mode.

    --
    Berg
     
    Bergamot, Aug 7, 2008
    #8
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Ralf Müller
    Replies:
    2
    Views:
    520
    Ralf Müller
    Jan 3, 2005
  2. rich
    Replies:
    0
    Views:
    724
  3. ThunderMusic
    Replies:
    6
    Views:
    423
    ThunderMusic
    Sep 28, 2006
  4. ela
    Replies:
    12
    Views:
    351
    Uri Guttman
    Apr 6, 2009
  5. maya
    Replies:
    4
    Views:
    243
Loading...

Share This Page