Home/ Questions/Q 7047301
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T02:45:17+00:00

I am trying to create a 2 column layout with my html and its

  • 0

I am trying to create a 2 column layout with my html and its just not happening. Here’s my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Welcome</title>
<style>
body {
    margin: 0;
    padding: 0;
    width: 100%;
    color: black;
    font: normal 12px/1.8em Arial, Helvetica, sans-serif;
    background-color: #132959;
    background-repeat: repeat;
    background-position: left top;
}


.outer{
    width:970px;
    margin: 0 auto;
    background: black;
}

.toc{
    width:250px;
    margin: 0;
    padding:0;
    float:left;
    color:yellow;
}

.content{
    padding: 0;
    width:720px;
    float:right;
    color:white;
}
.container{
    width:970px;
    margin: 20px auto;
}

.logo {
    margin: 0;
    padding: 0;
    float: left;
    width: auto;
}

.logo a{
    color : #fff;
    text-decoration:none;
    font: bold 40px/1.2em Arial, Helvetica, sans-serif;
    letter-spacing: -2px;
}

.logo small {
    display: block;
    padding-left: 80px;
    font: normal 12px/1.2em Arial, Helvetica, sans-serif;
    color: #EDF3F6;
    letter-spacing: normal;
}

.logoimage {
    height: 50px;
    border: none;
    margin: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="logo"> 
    <a href="http://www.csmart.co.in">Csmart 
    <small>Let's make life easy!</small> </a> 
</div>
<div style="clear:both;padding:15px"/>
<div class="outer">
  <div class="toc"> 
  TOC
  </div>
  <div class="content">
    Welcome
  </div><!-- content -->
</div><!-- outer-->
</div>

My div outer is coloured black. But it does not show up on the screen. If I give a height to .outer.. then it shows up. But it doesn’t have to be this way.. I can’t predict the height of the page. Why doesnt the background colour of the div outer not show up on the browser?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    All of your inner elements are floated, and therefore have no height. You will need to unfloat one of the inner elements, provide a height for the container element, or add a clearing div after the outer element.

    • 0