I created a test HTML Document <!DOCTYPE html> <html> <head> <style> html { background-color:#ff8700

Question

0

Asked: June 16, 20262026-06-16T21:08:26+00:00 2026-06-16T21:08:26+00:00

I created a test HTML Document <!DOCTYPE html> <html> <head> <style> html { background-color:#ff8700

0

I created a test HTML Document

<!DOCTYPE html>
<html>
<head>
  <style>
  html {
    background-color:#ff8700
}

#header {
    width:99%;
    height:70px;
    margin-top:-10px;
    background-color:red;
    border-radius:5px;
    position:fixed;
    z-index:1
}

.left {
    width:5%;
    height:400px;
    /* Make the same of .right ? */
    background-color:blue;
    border-radius:5px;
    float:left
}

.right {
    width:94%;
    height:auto;
    background-color:orange;
    border-radius:5px;
    float:right
}

#footer {
    width:100%;
    height:auto;
    margin-bottom:-15px;
    background-color:red;
    border-radius:5px;
    clear:both
}

h1 {
    color:#fff;
    font-family:cursive
}

</style>
<title>Test</title>
</head>
<body>
    <div id="header"><h1>Test Site</h1></div><br>
    <div class="left"></div>
    <div class="right"><h2 style="margin-top: 40px">Lorem Ipsum</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod, libero ac ullamcorper consequat, nunc justo placerat neque, eget fringilla odio massa vitae dui. In hac habitasse platea dictumst. Maecenas dapibus purus in arcu lobortis pharetra. Quisque sed augue libero, vitae bibendum tortor. Curabitur mi lacus, tristique quis venenatis non, imperdiet eget sapien. Quisque nunc ligula, commodo nec pellentesque sed, malesuada id lorem. Proin non orci consequat elit lacinia scelerisque id eu lacus. Integer eu sem nec orci facilisis ultricies. Nam fermentum, quam ac vehicula porta, lectus tortor porta libero, in imperdiet tellus urna ac purus. Sed nec nulla arcu, quis lobortis dui. Suspendisse feugiat accumsan blandit. Quisque semper fermentum ligula quis vehicula. Vestibulum in magna accumsan est dapibus sodales. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla ullamcorper quam a nulla iaculis vel facilisis quam sollicitudin. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod, libero ac ullamcorper consequat, nunc justo placerat neque, eget fringilla odio massa vitae dui. In hac habitasse platea dictumst. Maecenas dapibus purus in arcu lobortis pharetra. Quisque sed augue libero, vitae bibendum tortor. Curabitur mi lacus, tristique quis venenatis non, imperdiet eget sapien. Quisque nunc ligula, commodo nec pellentesque sed, malesuada id lorem. Proin non orci consequat elit lacinia scelerisque id eu lacus. Integer eu sem nec orci facilisis ultricies. Nam fermentum, quam ac vehicula porta, lectus tortor porta libero, in imperdiet tellus urna ac purus. Sed nec nulla arcu, quis lobortis dui. Suspendisse feugiat accumsan blandit. Quisque semper fermentum ligula quis vehicula. Vestibulum in magna accumsan est dapibus sodales. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per</p>
        <ul>
            <li>Test text 1</li>
            <li>Test text 2</li>
            <li>Test text 3</li>
        </ul>
    </div>
    <div id="footer">(c) 2012 thisisonlyatest.com</div>
</body>
</html>

You can test it here.
I want the blue block (.left) to have the same size as (.right). I tried with height auto and 100%, but doesn’t seem to work, instead it dissapears. I also tried to make a .parent and put .left and .right into .parent. Then I changed .left height to 100%, but didn’t work.

Help me.
Thanks in advance.