CODEWITHSUNDEEP
htmlcss
Shahjalal
Shahjalal

Reputation: 1151

CSS two column layout Issue

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.

Upvotes: 1

Views: 506

Answers (3)

user2393867
user2393867

Reputation: 

#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.

Upvotes: 0

Nitesh
Nitesh

Reputation: 15779

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.

Upvotes: 2

RYFN
RYFN

Reputation: 3069

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

Upvotes: 0

Related Questions