Home/ Questions/Q 7510027
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-29T23:06:23+00:00

Okay I’m using XHTML1.1 due to the fact that HTML5…doesn’t behave as I expect,

  • 0

Okay I’m using XHTML1.1 due to the fact that HTML5…doesn’t behave as I expect, if anyone can provide a decent tutorial I’d be happy to look at it, so far anything I write in HTML5 doesn’t render in any other browser but Chrome >_>; .

Now back to my problem. 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <style>
    #Content{
        position: relative;
        background-color: #8CF;
        padding: 1%;
        border-color: black;
        border-style: solid;
        border-left-width: 1px;
        border-right-width: 1px;
        border-bottom-right-radius: 10px;
        border-bottom-left-radius: 10px;
        height: 100%;
    }


    #Announcer {
        position: relative;
        background-color: #6AF;
        padding: 1%;
        border-color: #6AFFFF;
        border-width: 1px;
        border-style: inset;


    }

    #Column_Holder {
        position: relative;
        background-color: #6CF;
        padding: 1%;
        height: 100%;


    }

    .Column {
        float: left;
        padding: 1%;
        overflow: auto;
        height: 100%;
    }

    #Col1 {

        width: 60%;
        border-color: black;
        border-style: solid;
        border-right-width: 1px;
        border-width: 1px;

    }

    #Article_Image {

        background-color: #3DE;
        position: relative;
        float: right;
        width: 20%;
        text-align: right;
    }

    #Col2 {
        width: 30%;

        padding-left: 3%;
    }



    </style>
</head>
<body>
    <div id="Content">

        <div id="Announcer">
            <h2>Announcer Place Holder</h2>
        </div>
        <div id="Column_Holder">
            <div class="Column" id="Col1">
                <div id="Article_Image">Image PlaceHolder</div>
                <h1>Lots a text</h1>
                <p>Creating Websites since 1989. I have created lots and lots of websites. This one is with XHTML1.1 and CSS3</p>
            </div>
            <div class="Column" id="Col2">
                <h2>Another story</h2>
                <p>Something else happened teh other day =3</p>
            </div>
        </div>

    </div>
</body>
</html>

I’ve tried using floats…it’s not appropriate as a solution in this instance. I’ve tried 100% height, Xhtml seems to completely ignore that instruction. Unless I declare a pixel height it’s ignored strangely (yeah I’m struggling with this difference from HTML). Anyone want to provide a hint? Just a keyword >_<;

Thanks for reading

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    1. first of all, seriously? XHTML and without the XHTML doctype?
    2. percentage is a relative unit of measurement. this means that whatever you place percentage dimensions, it depends on the parent. now, width doesn’t have the need for the parent to have width declared for relativeness but height does. since #Content is a child of body, you need body to have a height (like say 100%). body is a child of the <html> tag, and for body’s 100% to work, you need to have 100% for html.

    plug this in your CSS above everything else to see what i mean:

    html,body{height:100%;}​
    • 0