Home/ Questions/Q 4084856
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-20T18:29:35+00:00

I have following HTML layout <html> <head> <title></title> <meta http-equiv=Content-Type content=text/html; charset=UTF-8> <style type=text/css>

  • 0

I have following HTML layout

<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style type="text/css">
            body {
                margin:10px 0px 0px 0px;
                font-size: 11px;
                font-family: Arial,Tahoma, sans-serif;
                background: #fff;
                color: #444;
            }

            h1 {
                font-size:1.5em;
                font-weight: bold;
            }


            #container { 
                width: 920px;
                margin: 0 auto;
                background-color: red
            }

            #header {
                border: 2px solid #ccc;
                height: 80px;
            }

            #content{
                display: block;
                width: 100%
            }

            #left {
                clear: left;
                float: left;
                width: 660px;
                border: 2px solid #ccc;
                margin:0 0 10px 0;
                padding:20px;
            }

            #right {
                position: relative;
                margin: 0 5px 0 5px;
                padding: 5px 0px 0px 0px;
                float: right;
                width: 200px;
                border: 2px solid #ccc;
            }

            #footer {
                clear: both;
                border: 2px solid #ccc;
                padding: 10px 0 20px 0;
                margin: 20px 0 0 0;
                font-size: .9em;
                color: #9b9b9b;
                width: 100%;
                background-color: skyblue;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="header" >
                <h1>Header</h1>
            </div>
            <div id="content">
                <div id="left">
                    <h1>Left</h1>
                </div>

                <div id="right">
                    <h1>Right</h1>
                </div>
            </div>
        </div>
        <div id="footer">
            <h1>Footer</h1>
        </div>
    </body>
</html>

My problem is #container doesn’t hold the #left & #right contents, it only holds #header

Please refer attached imaged to see what my intended layout is.

Actual and intended results

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I was able to achieve the intended result by using overflow: hidden; property 

    #container { 
      width: 920px;
      margin: 0 auto;
      background-color: red;
      overflow: hidden;
}
    • 0