CSS two column layout Issue

Question

I was trying to write one CSS two column layout. In my code there are three <div> tag. First <div> tag contains two other <div> tags. One is for navigation and one is for content. I made these tags as floating tags. There is no problem with these tags. Problem is, the parent <div> tag has a 2px border, but it does not render this border around the screen.

CSS code:

#wrap{
    margin: 0 auto;
    width: 900px;
    border: 2px solid #ADA095;
}

#nav{
    background-color: #DED8B9;
    float: left;
    width: 20%;
}

#content{
    background-color: #EDE9DB;
    float: right;
    width: 80%;
}

HTML code:

<div id="wrap">
      <div id="nav">
        <h2>Sonnet Index</h2>
        <ul>
          <li><a href="#">Sonnet #1</a></li>
          <li><a href="#">Sonnet #6</a></li>
          <li><a href="#">Sonnet #11</a></li>
          <li><a href="#">Sonnet #15</a></li>
          <li><a href="#">Sonnet #18</a></li>
        </ul>
      </div>
      <div id="content">
        <h1>Shakespeare's Sonnet #18</h1>
        <p>This is one of the most famous of the sonnets. It is referenced
           in the film Dead Poets Society and gave names to the band The
           Darling Buds and the book and television series The Darling Buds
           of May. Read it and weep!</p>
        <ul>
          <li>Shall I compare thee to a summer's day?</li>
          <li>Thou art more lovely and more temperate:</li>
          <li>Rough winds do shake the darling buds of May,</li>
        </ul>

        <p class="copyright">See the 
        <a href="http://en.wikipedia.org/wiki/Shakespeare%27s_Sonnets">
        Shakespeare's sonnets</a> Wikipedia article for more information
        </p>
      </div>
    </div>

Here is the output of my code.

enter image description here

But, it should be as follows--

enter image description here

Thanks, in advance.

Nitesh · Accepted Answer · 2013-05-21 11:29:04Z

2

Add an overflow:auto; to <div id="wrap">

Here is the Solution.

The HTML:

<div id="wrap">
      <div id="nav">
        <h2>Sonnet Index</h2>
        <ul>
          <li><a href="#">Sonnet #1</a></li>
          <li><a href="#">Sonnet #6</a></li>
          <li><a href="#">Sonnet #11</a></li>
          <li><a href="#">Sonnet #15</a></li>
          <li><a href="#">Sonnet #18</a></li>
        </ul>
      </div>
      <div id="content">
        <h1>Shakespeare's Sonnet #18</h1>
        <p>This is one of the most famous of the sonnets. It is referenced
           in the film Dead Poets Society and gave names to the band The
           Darling Buds and the book and television series The Darling Buds
           of May. Read it and weep!</p>
        <ul>
          <li>Shall I compare thee to a summer's day?</li>
          <li>Thou art more lovely and more temperate:</li>
          <li>Rough winds do shake the darling buds of May,</li>
        </ul>

        <p class="copyright">See the 
        <a href="http://en.wikipedia.org/wiki/Shakespeare%27s_Sonnets">
        Shakespeare's sonnets</a> Wikipedia article for more information
        </p>
      </div>
    </div>

The CSS:

#wrap{
    margin: 0 auto;
    width: 900px;
    border: 2px solid #ADA095;
    overflow:auto;
    background:#DED8B9;
}

#nav{
    background-color: #DED8B9;
    float: left;
    width: 20%;
}

#content{
    background-color: #EDE9DB;
    float: right;
    width: 80%;
}

Hope this helps.

edited May 21, 2013 at 11:29

answered May 21, 2013 at 11:23

Nitesh

15.8k4 gold badges51 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Shahjalal Over a year ago

Thanks for your solution. One more little problem I have. The left #nav column height has not rendered 100%, with my code. I do not know, why? can you help me??

Nitesh Over a year ago

For that you need to replace the float:left and float:right with display:table-cell. That will make your heights work for the left #nav. Here is the solution. jsfiddle.net/kSVxU/1 - @Shahjalal

RYFN · Accepted Answer · 2013-05-21 11:23:55Z

0

You need to clear your floats.

A common problem with float-based layouts is that the floats' container doesn't want to stretch up to accomodate the floats. If you want to add, say, a border around all floats (ie. a border around the container) you'll have to command the browsers somehow to stretch up the container all the way.

So here, you could add overflow: hidden; to your container, and then set the height of your floated content, for example.

There's also some more information at Web Platform Docs you may find of use - The CSS layout model: borders, boxes, margins and padding

answered May 21, 2013 at 11:23

RYFN

3,0901 gold badge32 silver badges41 bronze badges

Comments

2 revs · Accepted Answer · 2013-05-21 11:36:07Z

0

#wrap{
    margin: 0 auto;
    width: 900px;
    border: 2px solid #ADA095;
    overflow:hidden;
    height:100%;
}

#nav{
    background-color: #DED8B9;
    float: left;
    width: 20%;
    height:100%;
}

#content{
    background-color: #EDE9DB;
    float: right;
    width: 80%;
    height:100%;
}

"Overflow:auto" and "overflow:hidden"  both are working. also add "height:100%" to all three divs.

edited May 21, 2013 at 11:36

community wiki

2 revs
komal

Collectives™ on Stack Overflow

CSS two column layout Issue

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related