these link boxes are lining up underneath each other instead of left to right. why is this? heres the code. its probally the most simplest thing in the world, but i just cant seem to remember why its doing this. thx in advance.

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<title>Zeroencryption</title>
<link rel="stylesheet" type="text/css" href="looksgood.css" />
</head>

<body>
<div id="MASTERBODY"><!--START OF MASTERBODY-->

<div id="header">

    <div id="heading">
    </div>

    <div id="navigationmenu">
<div class="toplinkdiv"><a href="" class="toplink">Home</a></div>
<div class="toplinkdiv"><a href="" class="toplink">About</a></div>
<div class="toplinkdiv"><a href="" class="toplink">Contact</a></div>
<div class="toplinkdiv1"><a href="" class="toplink">Portfolio</a></div>
    </div>
</div>

</div> <!--END OF MASTERBODY-->
</body>
</html>

CSS:

body,html{
margin: 0;
padding: 0;
background: #0512c1 url(gradient.jpg) repeat-y center;
height: 100%;
}


#MASTERBODY{
height: 100%;
width: 665px;
display: block;
margin-left: auto;
margin-right: auto;
border: 1px solid black;
background-color: transparent;
}



#header{
border: 1px solid black;
width: 665px;
background-color: transparent;
height: 150px;
border: 1px solid white;
}

#heading{
width: 665px;
height: 100px;
background-color: #95B9C7;
margin-top: 0px;
}

#navigationmenu{
width: 665px;
height: 50px;
background-color: white;
border: 1px solid green;
}

.toplinkdiv{
height: 45px;
width: 100px;
margin-left: 7px;
border: 1px inset black;
}

.toplinkdiv1{
height: 45px;
width: 120px;
margin-left: 7px;
border: 1px inset black;
}

.toplink{
font-size: 13px;
margin-left: auto;
margin-right: auto;
font-color: white;
}

2 answers

4
points
This was chosen as the best answer

The divs are doing what divs are meant to do - be block elements which means each one starts on a new line. You need to give them display:inline or to float them left. floating is probably better, as they remain blocks and those css properties which are ignored for inline elements (e.g. width) are still applicable.

.toplinkdiv {
float:left;
height: 45px;
width: 100px;
margin-left: 7px;
border: 1px inset black;
}
Answered almost 7 years ago by Richard Grevers
5
points

Can I ask why you are using divs for a navigation menu? It's easier to use an un-ordered list.

<ul id="navigationmenu">
<li class="toplinkdiv"><a href="" class="toplink">Home</a></li>
<li class="toplinkdiv"><a href="" class="toplink">About</a></li>
<li class="toplinkdiv"><a href="" class="toplink">Contact</a></li>
<li class="toplinkdiv1"><a href="" class="toplink">Portfolio</a></li>
    </ul>

#navigationmenu ul li {float:left;display:inline;}
Answered almost 7 years ago by VagrantRadio
  • I'm using divs because I'm going to make these divs have image backgrounds. Is there an easier way to do this? canyonchase1 almost 7 years ago