CODEWITHSUNDEEP
htmlcssposition
Marino Bjelopera
Marino Bjelopera

Reputation: 3

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;

}

Upvotes: 0

Views: 49

Answers (3)

SaschaM78
SaschaM78

Reputation: 4497

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.

Upvotes: 0

Abhishek Zirota
Abhishek Zirota

Reputation: 86

I tried this with the code Javier Rey wrote, and it worked exactly the way you want. Try temporarily removing the styles related to nav and the div, its because of the margins and padding.

Upvotes: 1

Javier Rey
Javier Rey

Reputation: 1620

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

#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;
}

#text {
    border:1px solid black;
    float: left;
}

Upvotes: 0

Related Questions