CODEWITHSUNDEEP
csshtml
JA1
JA1

Reputation: 15

4 Divs side by side (Menu Bar)

I need to have these divs side by side for a menu bar but up until now it keeps stacking up on each other. I have tried doing margin-right/left/top/bottom, padding, etc... but can't get it to work, any suggestions?

<div id="Menu" >
     <div id="M_1"><a id="M_1_L" href="P4.html">Given</a></div>
     <div id="M_4"><a id="M_4_L" href="P2.html">Received</a></div>
     <div id="M_3"><a id="M_3_L" href="P3.html">Bucket List</a></div>
     <div id="M_2"><a id="M_2_L" href="P1.html">Traditions</a></div>
</div>

The CSS is:

#Menu
{
    width: 50%; height: 40px; background-color: blue; margin-left: auto; 
    margin-right: auto; margin-top: 20px; border-radius: 20px;
}

#M_1
{
    text-align: center; width: 20%; background-color: black;
}

#M_2
{
    text-align: center; width: 20%; background-color: black;
}

#M_3
{
    text-align: center; width: 20%; background-color: black;
}

#M_4
{
    text-align: center; width: 20%; background-color: black;
}

Upvotes: 1

Views: 16279

Answers (4)

Digital Robot Gorilla
Digital Robot Gorilla

Reputation: 397

This best thing to do would be:

    <ul>
    <li><a href="p4.html">given</a></li><li>
    <a href="p3.html">received</a></li>
    </ul>

Ul {
   Width:50%;
   Height:40px;
   Background: blue;
   Margin: 0 auto;
   }

Ul li {
    Display:inline-block;
    Width:20%;
    Background:#000;
    Text-align: center;
    }

Having the closing tag and open tag next to each other stops inline-block from leaving a gap between the elements.

Upvotes: 0

user1902830
user1902830

Reputation:

You can tidy your CSS by merging selectors.

#menu{
    display:table;width: 50%; height: 40px; background-color: blue;
    margin:20px auto; border-radius: 20px;
}
#menu > div{
    text-align: center; background-color: black;display:table-cell
}

Upvotes: 2

Bill Criswell
Bill Criswell

Reputation: 32921

You need to float: left them or set them to display: inline-block.

Upvotes: 2

CRABOLO
CRABOLO

Reputation: 8793

add these two for each one

 #M_1
 {
  display: inline-block;
  float: left;
}

if that doesn't fit them all in, try changing 1 or 2 or all of them to 19% width instead

Upvotes: 7

Related Questions