Marino Bjelopera Marino Bjelopera - 1 month ago 10
CSS Question

How can I make 2 divs be next to each other?

I need to make navbar on the left side of the screen and text div to start right next to the navbar. I only managed to make the text div go all the way to the right side of the screen.
So far I have this:

HTML


<head>

<link rel = "stylesheet" type = "text/css" href = "styles.css">
<title>Homepage</title>

</head>

<body>
<div id = "header">
<h1>Homepage - origins of World Wide Web and the Internet</h1>
</div>
<div id = "wrapper">
<div id = "navbar">
<ul>
<li><a class = "active" href="index.html">HOMEPAGE</a></li>
<li><a href="news.asp">INTERNET PIONEERS</a></li>
<li><a href="contact.asp">HTTP</a></li>
<li><a href="about.asp">TERMINOLOGY</a></li>
<li><a href="about.asp">REFERENCES</a></li>
</ul>
</div>

<div id = "text">
<h2>World Wide Web</h2>

</div>
</div>


CSS:

#header {


width: 97%;
height: 70px;
background: black;
position: relative;
border: 5px solid white;
margin: 20px;
}

#header:after {
content: '';
position: absolute;
top: -15px;
left: -15px;
right: -15px;
bottom: -15px;
background: #600202;
z-index: -1;
}

#header h1 {
font-family: Arial;
color: white;
text-align: center;
}



#navbar {
padding-left: 8px;
margin:5px;
}

#navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 15%;
background-color: #f1f1f1;
position: fixed;
overflow: auto;
border: 5px solid black;
border-radius: 3%;
font-family: Arial;
font-weight: bold;
}

#navbar li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}

#navbar li a:hover {
background-color: #555;
color: white;
}

#navbar li a.active {
background-color: #600202;
color: white;
}


#navbar li {
text-align: center;
border-bottom: 5px solid black;
}

#navbar li:last-child {
border-bottom: none;
}

#text {
border:1px solid black;

}

Answer

As already mentioned by Javier, the problem exists due to a mix of position:fixed and float:left, the width in percentage is not calculated correctly because the element is removed from the document flow.

There are some issues with the code that we need to take care of first:

1.) The position:fixed is part of #navbar ul but in case you would scroll, the navbar container would also scroll along with the text, the fixed navigation would then be scrolling along with its parent container.

2.) The width is defined in the ul element (preventing elements to stretch to their appropriate length), the element itself is positioned fixed, that's why the parent element does not have a width itself (as the element is not rendered as part of the surrounding document flow), that's why the #text element is located below the #navbar element when using float:left

One solution ...

... might be to move the position: fixed to the #navbar element, then define a fixed left margin for the #text element:

#text {
  margin-left: 240px;
  border: 1px solid black;
}

#navbar {
  padding-left: 8px;
  margin: 5px;
  width: 220px;
  position: fixed;
}

#navbar ul {
  list-style-type: none;
  margin: 0;
  padding: 0;  
  background-color: #f1f1f1;
  border: 5px solid black;
  border-radius: 3%;
  font-family: Arial;
  font-weight: bold;
}

I created a fiddle containing the complete change here.

Comments