div element not working in HTML

Question

This is the page I want to design. I am giving you a picture of what I want:

So I wrote the following code. I put the links in one div element and the list in another div element so that they are like block elements and are positioned one over another.

However, The list section seems to start from the same place as that of the links section. I put the two different background colors for each one for you to see that. The design is like messed up and I can't figure out what is wrong here.Clearly div element is not doing its job I suppose. How can I position the links section over the list section and what is wrong with my code ?

I have another question. I used border-radius to contain individual links and to make them circular. In my PC, they work fine. But when I resize the browser window, they become like capsule shaped. What should I do to make them appear circular at all time.

Sorry for the long question..

#links{
 position:relative;
 margin:10px 0px 0px 0px;
 width:100%;
 left:9%;
    background-color:blue;
 }

a.separate_link{
 float:left;
 width:10%;
 height:20%;
 padding: 0px;
 border-radius: 100px;
 margin:0px 10px 0px 10px;
 background-color:#ffffff;
 text-decoration:none;
 text-align:center;
 text-bottom:20px;
 color:#000000;
 font-size:50%;
 }
div.gen_info{
 background-color:yellow;
 padding:12px;
 color:#5E6063
}

<div id="links">
 <a href="#" id="link1"class="separate_link"><p>General Information</p></a>
 <a href="#" id="link2"class="separate_link"><p>Officials</p></a>
 <a href="#" id="link3"class="separate_link"><p>Achievements</p></a>
</div>

<div class="gen_info">
    <div id="listofgeninfo">
  <ul>
            <li><a href="index.html#finli">History</a></li>
            <li><a href="index.html#finhistory">About</a></li>
            <li><a href="index.html#finmarh">Information</a></li>
            <li><a href="index.html#finhi">Location</a></li>
  </ul>
</div>

score 2 · Answer 1 · answered Sep 18 '15 at 15:05

The problem is the float.

Add a clear property to the inner div:

#links{
 position:relative;
 margin:10px 0px 0px 0px;
 width:100%;
 left:9%;
    background-color:blue;
 }

a.separate_link{
 float:left;
 width:10%;
 height:20%;
 padding: 0px;
 border-radius: 100px;
 margin:0px 10px 0px 10px;
 background-color:#ffffff;
 text-decoration:none;
 text-align:center;
 text-bottom:20px;
 color:#000000;
 font-size:50%;
 }
div.gen_info{
 background-color:yellow;
 padding:12px;
 color:#5E6063;
}

#listofgeninfo {
   clear: both;
}

<div id="links">
 <a href="#" id="link1"class="separate_link"><p>General Information</p></a>
 <a href="#" id="link2"class="separate_link"><p>Officials</p></a>
 <a href="#" id="link3"class="separate_link"><p>Achievements</p></a>
</div>

<div class="gen_info">
    <div id="listofgeninfo">
  <ul>
            <li><a href="index.html#finli">History</a></li>
            <li><a href="index.html#finhistory">About</a></li>
            <li><a href="index.html#finmarh">Information</a></li>
            <li><a href="index.html#finhi">Location</a></li>
  </ul>
</div>

Thanks LcSalazar, Now the list section is below the link section. But still the list parts boundary covers the whole of links section. You don't see any blue background here. So if I wanted to place two separate background color for the two sections, I wouldn't be able to do it. Can I do something here? — Benjamin, Sep 18 '15 at 15:17
And the function of float property is limited to only the "separate_link" class, isn't it? So why is it affecting the list section? I mean, the list part is in another div element ? div alone should have done the job of putting them one above another? — Benjamin, Sep 18 '15 at 15:21
Actually @Benjamin, the `float` property takes the element out of the normal document flow, and make it float over the next one. Since your last `separate_link` is floating, the next closest element will be affected by it — LcSalazar, Sep 18 '15 at 17:27

score 1 · Accepted Answer · edited May 23 '17 at 12:03

You can accomplish this in two ways:

1) add overflow: hidden; to #links:

#links{
   position:relative;
   margin:10px 0px 0px 0px;
   width:100%;
   left:9%;
   background-color:blue;
   overflow: hidden;
}

or 2) Add an :after pseudo-element to clear after the #links div:

 #links{
   position:relative;
   margin:10px 0px 0px 0px;
   width:100%;
   left:9%;
   background-color:blue;
}
     #links:after {
       clear: both;
       content: '';
       display: block;
     }

Here is a working example using the pseudo-element approach: http://jsfiddle.net/eprwjxkf/

For more information, you might find the top answer from this issue helpful: What methods of ‘clearfix’ can I use?

Thank you so much ns1234.....That really helped ! Now the two sections are separated....Thanks :) — Benjamin, Sep 18 '15 at 16:38

div element not working in HTML

2 Answers2