Home/ Questions/Q 9019435
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T04:46:36+00:00

I am creating a website but I am having some problems with positioning of

  • 0

I am creating a website but I am having some problems with positioning of the divs.
My content div is not positioning beside navigation-bar div, even though I am floating both of them left.

Here is the HTML code. 

<head>
<link rel="stylesheet" type="text/css" href="theme.css">
</head>

<body>

<div id="title">
Sample Title
</div>


<div id="navigation-bar">
Home
<br>
<br>
Products
<br>
<br>
</div>

<div id="content">
content goes here
</div>

</body>

</html>

Here is theme.css file

#title
{
color: black;
padding: 20px;
font-size: 250%;
padding: 2%;
width: 70%;
height: 10%;
border: 4px solid blue;
}

#navigation-bar
{
background-color: #606060;
width: 15%;
height: 70%;
color: white;
text-align: center;
padding: 2%;
font-size: 80%;
border: 4px solid blue;
}

#content
{
border: 4px solid blue;
float: left;
width: 20%;
height: 70%;
}

Problem is that the navigation-bar div and the content div wont position next to each other, instead content div is positioning itself below navigation-bar div.

Thanks.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Where you are using float: left; for #navigation-bar?

    #navigation-bar
{
   background-color: #606060;
   width: 15%;
   height: 70%;
   color: white;
   text-align: center;
   padding: 2%;
   font-size: 80%;
   border: 4px solid blue;
   float: left; <--- Add this Here
}
    • 0