right-left (not left-right)

**MarekS** · Nov 6, 2007, 04:46

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>

**Tyssen** · Nov 6, 2007, 04:52

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.

**MarekS** · Nov 6, 2007, 06:13

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,

**Tyssen** · Nov 6, 2007, 15:44

Originally Posted by MarekS

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.

**DaveWoods** · Nov 6, 2007, 06:31

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.

The SitePoint Forums have moved.

User Tag List

Thread: right-left (not left-right)

Thread Tools

Display

Hybrid View

right-left (not left-right)

Bookmarks

Bookmarks

Posting Permissions