SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    SitePoint Addict MarekS's Avatar
    Join Date
    Jan 2003
    Location
    Estonia / Tallinn
    Posts
    201
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    right-left (not left-right)

    It seems to work properly on all of my browsers. However, the bit of HTML code in the header box that has left and right boxes are not so super logical to me.

    I would like to put the left box code before right box code, but then it does not render the thing it right.

    Anyway, do 'yall think this is correct and there is no problem with my layout here?

    Thanks,

    Code HTML4Strict:
    <?xml version="1.0"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
        <title>test</title>
        <style type="text/css">
            .layout {
                width:768px;
                margin-left:auto;
                margin-right:auto;
                border:1px solid black; /* dev */
            }
     
            div.header div.left {
                width:45%;
                background:red; /* dev */
            }
     
            div.header div.right {
                float:right;
                width:45%;
                text-align:right;
                background:green; /* dev */
            }
        </style>
    </head>
    <body>
        <div class="wrap">
            <div class="layout header">
                <div class="right">header right</div> <!-- hmm... right first? -->
                <div class="left">header left</div>
            </div>
     
            <div class="layout splash">
                splash
            </div>
     
            <div class="layout content">
                content
            </div>
     
            <div class="layout footer">
                footer
            </div>
        </div>
    </body>
    </html>

  2. #2
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you don't want the bit that's to be to the right to come first in the source, set the text-alignment of the parent element to right and then float the first bit left instead.

  3. #3
    SitePoint Addict MarekS's Avatar
    Join Date
    Jan 2003
    Location
    Estonia / Tallinn
    Posts
    201
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes it seems to work as you say.

    Code HTML4Strict:
    <?xml version="1.0"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
        <title>test</title>
        <style type="text/css">
            .layout {
                width:768px;
                margin-left:auto;
                margin-right:auto;
                border:1px solid black; /* dev */
            }
     
            div.header {
                text-align:right;
            }
     
            div.header div.left {
                float:left;
                text-align:left;
                background:red; /* dev */
            }
     
            div.header div.right {
                text-align:right;
                background:green; /* dev */
            }
        </style>
    </head>
    <body>
        <div class="wrap">
            <div class="layout header">
                <div class="left">header left</div> <!-- in logical order now -->
                <div class="right">header right</div>
            </div>
     
            <div class="layout splash">
                splash
            </div>
     
            <div class="layout content">
                content
            </div>
     
            <div class="layout footer">
                footer
            </div>
        </div>
    </body>
    </html>

    However, the right div seems to be also under the left one. (Left being somewhat on top of right.) While this cud visually work out for me using some widths and heights I am now not 100% sure I should go with this style just to get my HTML in logical order? What do you think? Is my first example fully okay with CSS pro-s?

    Thanks,

  4. #4
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by MarekS View Post
    While this cud visually work out for me using some widths and heights I am now not 100% sure I should go with this style just to get my HTML in logical order?
    Yes, you have to give the elements widths (ie roughly 50%) for it to work.

  5. #5
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Looks fine to me although you should remove the XML declaration before the doctype otherwise you're going to create problems for yourself in Internet Explorer.

    Also, I'd personally call the "left" and "right" classes something different. I'd always try and call classes and ID's something that relates to what they do or what they contain and not how they look otherwise if you later decide that the content on the left would look better on the right (or another exmaple class="red" would look better in blue) then you'll have HTML markup that's a little confusing.

    Other than that though, that's probably how I'd do it.


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
  •