Body Elements Going outside of the Body

up vote
0
down vote

favorite

body {

  margin: 0px;

  border: 1px solid black;

}



#head {

  text-align: center;

  background: linear-gradient(to right, cyan, purple);

  margin: 0px;

  padding: 20px;

  border: 1px solid black;

}



#head h1 {

  margin: 0px;

  font-family: 'Great Vibes', cursive;

  color: white;

  font-size: 40px;

}



.contianer {

  display: flex;

  flex-direction: column;

  justify-content: center;

  height: 100%;

}



.ops {

  display: flex;

  justify-content: center;

  border-bottom: 1px solid black;

  border-top: 1px solid black;

}



#list ul {

  list-style-type: none;

  margin: 0px;

  padding: 0px;

}



#list li {

  float: left;

  padding: 0px;

  margin: 0px;

}



#list li:hover {

  background-color: lightgrey;

}



#list {

  display: flex;

  justify-content: center;

  margin: 10px;

}



form {

  padding: 0px;

  margin: 0px;

}



.dhund {

  display: flex;

  justify-content: center;

  padding: 10px;

}



input[name="name"] {

  max-height: 37px;

  max-width: 400px;

  min-width: 200px;

  border-radius: 10px;

  font-size: 17px;

  border: 1px solid black;

  padding: 5px;

  margin: 5px;

}



input[name="search"] {

  background-color: rgb(183, 242, 184);

  font-size: 15px;

  border: 1px solid black;

  border-radius: 5px;

  color: black;

}



input[name="logout"],

input[name="chat"],

input[name="update"],

input[name="homepage"],

input[name="event"] {

  background-color: white;

  border: none;

  padding: 10px 19px;

}



input[name="logout"]:hover,

input[name="chat"]:hover,

input[name="update"]:hover,

input[name="homepage"]:hover,

input[name="event"]:hover {

  background-color: lightgrey;

}



.content {

  display: flex;

  flex-direction: row;

}



.sidebar {

  display: flex;

  flex-direction: column;

  border-right: 1px solid black;

  height: 100%

}



#image {

  margin: 2px;

  padding: 5px;

  display: flex;

  justify-content: center;

}



#image img {

  border: 1px solid black;

}



#upload {

  border-top: 1px solid black;

  margin: 2px;

  min-width: 250px;

}



#upload p {

  text-align: center;

}



#stupid {

  display: flex;

  justify-content: center;

  margin: 5px;

}



.material {

  margin: 20px;

  min-width: 400px;

  border: 1px solid black;

  border-radius: 10px;

  background-color: lightgrey;

}



.posts {

  border: 1px solid black;

  margin: 17px;

  margin-top: 80px;

  border-radius: 7px;

}



.feed {

  padding: 20px;

}



.post p {

  padding: 5px;

}



.poster {

  padding-left: 10px;

  border-bottom: 1px solid black;

}



.poster p {}



#matter p {

  text-indent: 30px;

}



#matter {

  border: 1px solid black;

  margin: 8px;

  background-color: white;

  border-radius: 20px;

  padding: 20px;

}



.main {

  display: flex;

  flex-direction: column;

  margin: 5px;

  width: 100%;

}





/*#mind

{

	display: flex;

	flex-direction: row;

	justify-content: center;

	border: 1px solid black;

	border-radius: 8px;

	background-color: lightgrey;

}*/



textarea[name="mind"] {

  border-radius: 10px;

  border: 1px solid black;

  font-size: 15px;

  padding: 10px 5px 10px 5px;

}



input[name="post"] {

  width: 120px;

  height: 50px;

  background-color: powderblue;

  font-size: 17px;

}

<!DOCTYPE html>

<html>



<head>

  <title>The Joint.</title>

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

  <link href="https://fonts.googleapis.com/css?family=Great+Vibes|Slabo+27px" rel="stylesheet">

</head>



<body>

  <div id="head">

    <h1>The Joint.</h1>

  </div>



  <div class="contianer">

    <div class="ops">

      <div id="list">

        <ul>

          <li>

            <form action="homepage.php" method="GET"><input type="submit" name="homepage" value="Homepage"></form>

          </li>

          <li>

            <form action="homepage.php" method="GET"><input type="submit" name="update" value="Update"></form>

          </li>

          <li>

            <form action="homepage.php" method="GET"><input type="submit" name="chat" value="Chat"></form>

          </li>

          <li>

            <form action="homepage.php" method="GET"><input type="submit" name="event" value="Your Events"></form>

          </li>

          <li>

            <form action="homepage.php" method="GET"><input type="submit" name="logout" value="logout"></form>

          </li>

        </ul>

      </div>

    </div>

    <div class="dhund">

      <form method="POST" action="homepage.php">

        <input type="text" name="name" placeholder="Search for People or things">

        <input type="submit" name="search" value="search">

      </form>

    </div>

    <div class="content">



      <div class="sidebar">

        <div id="visual">

          <div id="image">

            <img src="<?php echo $avatar ?>" width="200" height="250">

          </div>

          <div id="upload">

            <form action="homepage.php" method="POST" enctype="multipart/form-data">

              <p>Upload Pic:</p><input type="file" name="img"><br>

              <div id="stupid">

                <input type="submit" name="upload" value="Upload">

              </div>

            </form>

          </div>

        </div>

      </div>



      <div class="main">

        <div id="mind">

          <form method="GET" action="homepage.php">

            <textarea name="mind" cols="40" rows="5"></textarea>

            <input type="submit" name="post" value="Post">

          </form>

        </div>

        <div class="feed">

          <div class="posts">

            <div class="poster">

              <p><b>Poster</b></p>

            </div>

            <div class="post">

              <p>It give me immense pleasure To announce the arrival of happening to your college, Embrace..!</p>

            </div>

          </div>

        </div>

      </div>

    </div>

  </div>

</body>



</html>

I had read that every thing inside the <body> tags will fit inside of the body and the body will adjust according to the width of individual elements, but the website I designed the content seems to go outside the body, I know it because I gave body a border and found out that the content goes outside the body when I resize the browser. Why is it happening in the first place and what is the best way to make a website that is all screen friendly? also I tried to use vw instead of px is it a good idea?

asked Nov 19 at 6:41

Mrak Vladar

132

It because height is auto to the content inside the body
– לבני מלכה
Nov 19 at 6:45

can you attach a screenshot of the original problem
– Viira
Nov 19 at 6:59

can't reproduce the issue.
– Zohir Salak
Nov 19 at 15:05

add a comment |

up vote
0
down vote

favorite

body {

  margin: 0px;

  border: 1px solid black;

}



#head {

  text-align: center;

  background: linear-gradient(to right, cyan, purple);

  margin: 0px;

  padding: 20px;

  border: 1px solid black;

}



#head h1 {

  margin: 0px;

  font-family: 'Great Vibes', cursive;

  color: white;

  font-size: 40px;

}



.contianer {

  display: flex;

  flex-direction: column;

  justify-content: center;

  height: 100%;

}



.ops {

  display: flex;

  justify-content: center;

  border-bottom: 1px solid black;

  border-top: 1px solid black;

}



#list ul {

  list-style-type: none;

  margin: 0px;

  padding: 0px;

}



#list li {

  float: left;

  padding: 0px;

  margin: 0px;

}



#list li:hover {

  background-color: lightgrey;

}



#list {

  display: flex;

  justify-content: center;

  margin: 10px;

}



form {

  padding: 0px;

  margin: 0px;

}



.dhund {

  display: flex;

  justify-content: center;

  padding: 10px;

}



input[name="name"] {

  max-height: 37px;

  max-width: 400px;

  min-width: 200px;

  border-radius: 10px;

  font-size: 17px;

  border: 1px solid black;

  padding: 5px;

  margin: 5px;

}



input[name="search"] {

  background-color: rgb(183, 242, 184);

  font-size: 15px;

  border: 1px solid black;

  border-radius: 5px;

  color: black;

}



input[name="logout"],

input[name="chat"],

input[name="update"],

input[name="homepage"],

input[name="event"] {

  background-color: white;

  border: none;

  padding: 10px 19px;

}



input[name="logout"]:hover,

input[name="chat"]:hover,

input[name="update"]:hover,

input[name="homepage"]:hover,

input[name="event"]:hover {

  background-color: lightgrey;

}



.content {

  display: flex;

  flex-direction: row;

}



.sidebar {

  display: flex;

  flex-direction: column;

  border-right: 1px solid black;

  height: 100%

}



#image {

  margin: 2px;

  padding: 5px;

  display: flex;

  justify-content: center;

}



#image img {

  border: 1px solid black;

}



#upload {

  border-top: 1px solid black;

  margin: 2px;

  min-width: 250px;

}



#upload p {

  text-align: center;

}



#stupid {

  display: flex;

  justify-content: center;

  margin: 5px;

}



.material {

  margin: 20px;

  min-width: 400px;

  border: 1px solid black;

  border-radius: 10px;

  background-color: lightgrey;

}



.posts {

  border: 1px solid black;

  margin: 17px;

  margin-top: 80px;

  border-radius: 7px;

}



.feed {

  padding: 20px;

}



.post p {

  padding: 5px;

}



.poster {

  padding-left: 10px;

  border-bottom: 1px solid black;

}



.poster p {}



#matter p {

  text-indent: 30px;

}



#matter {

  border: 1px solid black;

  margin: 8px;

  background-color: white;

  border-radius: 20px;

  padding: 20px;

}



.main {

  display: flex;

  flex-direction: column;

  margin: 5px;

  width: 100%;

}





/*#mind

{

	display: flex;

	flex-direction: row;

	justify-content: center;

	border: 1px solid black;

	border-radius: 8px;

	background-color: lightgrey;

}*/



textarea[name="mind"] {

  border-radius: 10px;

  border: 1px solid black;

  font-size: 15px;

  padding: 10px 5px 10px 5px;

}



input[name="post"] {

  width: 120px;

  height: 50px;

  background-color: powderblue;

  font-size: 17px;

}

<!DOCTYPE html>

<html>



<head>

  <title>The Joint.</title>

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

  <link href="https://fonts.googleapis.com/css?family=Great+Vibes|Slabo+27px" rel="stylesheet">

</head>



<body>

  <div id="head">

    <h1>The Joint.</h1>

  </div>



  <div class="contianer">

    <div class="ops">

      <div id="list">

        <ul>

          <li>

            <form action="homepage.php" method="GET"><input type="submit" name="homepage" value="Homepage"></form>

          </li>

          <li>

            <form action="homepage.php" method="GET"><input type="submit" name="update" value="Update"></form>

          </li>

          <li>

            <form action="homepage.php" method="GET"><input type="submit" name="chat" value="Chat"></form>

          </li>

          <li>

            <form action="homepage.php" method="GET"><input type="submit" name="event" value="Your Events"></form>

          </li>

          <li>

            <form action="homepage.php" method="GET"><input type="submit" name="logout" value="logout"></form>

          </li>

        </ul>

      </div>

    </div>

    <div class="dhund">

      <form method="POST" action="homepage.php">

        <input type="text" name="name" placeholder="Search for People or things">

        <input type="submit" name="search" value="search">

      </form>

    </div>

    <div class="content">



      <div class="sidebar">

        <div id="visual">

          <div id="image">

            <img src="<?php echo $avatar ?>" width="200" height="250">

          </div>

          <div id="upload">

            <form action="homepage.php" method="POST" enctype="multipart/form-data">

              <p>Upload Pic:</p><input type="file" name="img"><br>

              <div id="stupid">

                <input type="submit" name="upload" value="Upload">

              </div>

            </form>

          </div>

        </div>

      </div>



      <div class="main">

        <div id="mind">

          <form method="GET" action="homepage.php">

            <textarea name="mind" cols="40" rows="5"></textarea>

            <input type="submit" name="post" value="Post">

          </form>

        </div>

        <div class="feed">

          <div class="posts">

            <div class="poster">

              <p><b>Poster</b></p>

            </div>

            <div class="post">

              <p>It give me immense pleasure To announce the arrival of happening to your college, Embrace..!</p>

            </div>

          </div>

        </div>

      </div>

    </div>

  </div>

</body>



</html>

asked Nov 19 at 6:41

Mrak Vladar

132

It because height is auto to the content inside the body
– לבני מלכה
Nov 19 at 6:45

can you attach a screenshot of the original problem
– Viira
Nov 19 at 6:59

can't reproduce the issue.
– Zohir Salak
Nov 19 at 15:05

add a comment |

up vote
0
down vote

favorite

body {

  margin: 0px;

  border: 1px solid black;

}



#head {

  text-align: center;

  background: linear-gradient(to right, cyan, purple);

  margin: 0px;

  padding: 20px;

  border: 1px solid black;

}



#head h1 {

  margin: 0px;

  font-family: 'Great Vibes', cursive;

  color: white;

  font-size: 40px;

}



.contianer {

  display: flex;

  flex-direction: column;

  justify-content: center;

  height: 100%;

}



.ops {

  display: flex;

  justify-content: center;

  border-bottom: 1px solid black;

  border-top: 1px solid black;

}



#list ul {

  list-style-type: none;

  margin: 0px;

  padding: 0px;

}



#list li {

  float: left;

  padding: 0px;

  margin: 0px;

}



#list li:hover {

  background-color: lightgrey;

}



#list {

  display: flex;

  justify-content: center;

  margin: 10px;

}



form {

  padding: 0px;

  margin: 0px;

}



.dhund {

  display: flex;

  justify-content: center;

  padding: 10px;

}



input[name="name"] {

  max-height: 37px;

  max-width: 400px;

  min-width: 200px;

  border-radius: 10px;

  font-size: 17px;

  border: 1px solid black;

  padding: 5px;

  margin: 5px;

}



input[name="search"] {

  background-color: rgb(183, 242, 184);

  font-size: 15px;

  border: 1px solid black;

  border-radius: 5px;

  color: black;

}



input[name="logout"],

input[name="chat"],

input[name="update"],

input[name="homepage"],

input[name="event"] {

  background-color: white;

  border: none;

  padding: 10px 19px;

}



input[name="logout"]:hover,

input[name="chat"]:hover,

input[name="update"]:hover,

input[name="homepage"]:hover,

input[name="event"]:hover {

  background-color: lightgrey;

}



.content {

  display: flex;

  flex-direction: row;

}



.sidebar {

  display: flex;

  flex-direction: column;

  border-right: 1px solid black;

  height: 100%

}



#image {

  margin: 2px;

  padding: 5px;

  display: flex;

  justify-content: center;

}



#image img {

  border: 1px solid black;

}



#upload {

  border-top: 1px solid black;

  margin: 2px;

  min-width: 250px;

}



#upload p {

  text-align: center;

}



#stupid {

  display: flex;

  justify-content: center;

  margin: 5px;

}



.material {

  margin: 20px;

  min-width: 400px;

  border: 1px solid black;

  border-radius: 10px;

  background-color: lightgrey;

}



.posts {

  border: 1px solid black;

  margin: 17px;

  margin-top: 80px;

  border-radius: 7px;

}



.feed {

  padding: 20px;

}



.post p {

  padding: 5px;

}



.poster {

  padding-left: 10px;

  border-bottom: 1px solid black;

}



.poster p {}



#matter p {

  text-indent: 30px;

}



#matter {

  border: 1px solid black;

  margin: 8px;

  background-color: white;

  border-radius: 20px;

  padding: 20px;

}



.main {

  display: flex;

  flex-direction: column;

  margin: 5px;

  width: 100%;

}





/*#mind

{

	display: flex;

	flex-direction: row;

	justify-content: center;

	border: 1px solid black;

	border-radius: 8px;

	background-color: lightgrey;

}*/



textarea[name="mind"] {

  border-radius: 10px;

  border: 1px solid black;

  font-size: 15px;

  padding: 10px 5px 10px 5px;

}



input[name="post"] {

  width: 120px;

  height: 50px;

  background-color: powderblue;

  font-size: 17px;

}

<!DOCTYPE html>

<html>



<head>

  <title>The Joint.</title>

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

  <link href="https://fonts.googleapis.com/css?family=Great+Vibes|Slabo+27px" rel="stylesheet">

</head>



<body>

  <div id="head">

    <h1>The Joint.</h1>

  </div>



  <div class="contianer">

    <div class="ops">

      <div id="list">

        <ul>

          <li>

            <form action="homepage.php" method="GET"><input type="submit" name="homepage" value="Homepage"></form>

          </li>

          <li>

            <form action="homepage.php" method="GET"><input type="submit" name="update" value="Update"></form>

          </li>

          <li>

            <form action="homepage.php" method="GET"><input type="submit" name="chat" value="Chat"></form>

          </li>

          <li>

            <form action="homepage.php" method="GET"><input type="submit" name="event" value="Your Events"></form>

          </li>

          <li>

            <form action="homepage.php" method="GET"><input type="submit" name="logout" value="logout"></form>

          </li>

        </ul>

      </div>

    </div>

    <div class="dhund">

      <form method="POST" action="homepage.php">

        <input type="text" name="name" placeholder="Search for People or things">

        <input type="submit" name="search" value="search">

      </form>

    </div>

    <div class="content">



      <div class="sidebar">

        <div id="visual">

          <div id="image">

            <img src="<?php echo $avatar ?>" width="200" height="250">

          </div>

          <div id="upload">

            <form action="homepage.php" method="POST" enctype="multipart/form-data">

              <p>Upload Pic:</p><input type="file" name="img"><br>

              <div id="stupid">

                <input type="submit" name="upload" value="Upload">

              </div>

            </form>

          </div>

        </div>

      </div>



      <div class="main">

        <div id="mind">

          <form method="GET" action="homepage.php">

            <textarea name="mind" cols="40" rows="5"></textarea>

            <input type="submit" name="post" value="Post">

          </form>

        </div>

        <div class="feed">

          <div class="posts">

            <div class="poster">

              <p><b>Poster</b></p>

            </div>

            <div class="post">

              <p>It give me immense pleasure To announce the arrival of happening to your college, Embrace..!</p>

            </div>

          </div>

        </div>

      </div>

    </div>

  </div>

</body>



</html>

asked Nov 19 at 6:41

Mrak Vladar

132

body {

  margin: 0px;

  border: 1px solid black;

}



#head {

  text-align: center;

  background: linear-gradient(to right, cyan, purple);

  margin: 0px;

  padding: 20px;

  border: 1px solid black;

}



#head h1 {

  margin: 0px;

  font-family: 'Great Vibes', cursive;

  color: white;

  font-size: 40px;

}



.contianer {

  display: flex;

  flex-direction: column;

  justify-content: center;

  height: 100%;

}



.ops {

  display: flex;

  justify-content: center;

  border-bottom: 1px solid black;

  border-top: 1px solid black;

}



#list ul {

  list-style-type: none;

  margin: 0px;

  padding: 0px;

}



#list li {

  float: left;

  padding: 0px;

  margin: 0px;

}



#list li:hover {

  background-color: lightgrey;

}



#list {

  display: flex;

  justify-content: center;

  margin: 10px;

}



form {

  padding: 0px;

  margin: 0px;

}



.dhund {

  display: flex;

  justify-content: center;

  padding: 10px;

}



input[name="name"] {

  max-height: 37px;

  max-width: 400px;

  min-width: 200px;

  border-radius: 10px;

  font-size: 17px;

  border: 1px solid black;

  padding: 5px;

  margin: 5px;

}



input[name="search"] {

  background-color: rgb(183, 242, 184);

  font-size: 15px;

  border: 1px solid black;

  border-radius: 5px;

  color: black;

}



input[name="logout"],

input[name="chat"],

input[name="update"],

input[name="homepage"],

input[name="event"] {

  background-color: white;

  border: none;

  padding: 10px 19px;

}



input[name="logout"]:hover,

input[name="chat"]:hover,

input[name="update"]:hover,

input[name="homepage"]:hover,

input[name="event"]:hover {

  background-color: lightgrey;

}



.content {

  display: flex;

  flex-direction: row;

}



.sidebar {

  display: flex;

  flex-direction: column;

  border-right: 1px solid black;

  height: 100%

}



#image {

  margin: 2px;

  padding: 5px;

  display: flex;

  justify-content: center;

}



#image img {

  border: 1px solid black;

}



#upload {

  border-top: 1px solid black;

  margin: 2px;

  min-width: 250px;

}



#upload p {

  text-align: center;

}



#stupid {

  display: flex;

  justify-content: center;

  margin: 5px;

}



.material {

  margin: 20px;

  min-width: 400px;

  border: 1px solid black;

  border-radius: 10px;

  background-color: lightgrey;

}



.posts {

  border: 1px solid black;

  margin: 17px;

  margin-top: 80px;

  border-radius: 7px;

}



.feed {

  padding: 20px;

}



.post p {

  padding: 5px;

}



.poster {

  padding-left: 10px;

  border-bottom: 1px solid black;

}



.poster p {}



#matter p {

  text-indent: 30px;

}



#matter {

  border: 1px solid black;

  margin: 8px;

  background-color: white;

  border-radius: 20px;

  padding: 20px;

}



.main {

  display: flex;

  flex-direction: column;

  margin: 5px;

  width: 100%;

}





/*#mind

{

	display: flex;

	flex-direction: row;

	justify-content: center;

	border: 1px solid black;

	border-radius: 8px;

	background-color: lightgrey;

}*/



textarea[name="mind"] {

  border-radius: 10px;

  border: 1px solid black;

  font-size: 15px;

  padding: 10px 5px 10px 5px;

}



input[name="post"] {

  width: 120px;

  height: 50px;

  background-color: powderblue;

  font-size: 17px;

}

<!DOCTYPE html>

<html>



<head>

  <title>The Joint.</title>

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

  <link href="https://fonts.googleapis.com/css?family=Great+Vibes|Slabo+27px" rel="stylesheet">

</head>



<body>

  <div id="head">

    <h1>The Joint.</h1>

  </div>



  <div class="contianer">

    <div class="ops">

      <div id="list">

        <ul>

          <li>

            <form action="homepage.php" method="GET"><input type="submit" name="homepage" value="Homepage"></form>

          </li>

          <li>

            <form action="homepage.php" method="GET"><input type="submit" name="update" value="Update"></form>

          </li>

          <li>

            <form action="homepage.php" method="GET"><input type="submit" name="chat" value="Chat"></form>

          </li>

          <li>

            <form action="homepage.php" method="GET"><input type="submit" name="event" value="Your Events"></form>

          </li>

          <li>

            <form action="homepage.php" method="GET"><input type="submit" name="logout" value="logout"></form>

          </li>

        </ul>

      </div>

    </div>

    <div class="dhund">

      <form method="POST" action="homepage.php">

        <input type="text" name="name" placeholder="Search for People or things">

        <input type="submit" name="search" value="search">

      </form>

    </div>

    <div class="content">



      <div class="sidebar">

        <div id="visual">

          <div id="image">

            <img src="<?php echo $avatar ?>" width="200" height="250">

          </div>

          <div id="upload">

            <form action="homepage.php" method="POST" enctype="multipart/form-data">

              <p>Upload Pic:</p><input type="file" name="img"><br>

              <div id="stupid">

                <input type="submit" name="upload" value="Upload">

              </div>

            </form>

          </div>

        </div>

      </div>



      <div class="main">

        <div id="mind">

          <form method="GET" action="homepage.php">

            <textarea name="mind" cols="40" rows="5"></textarea>

            <input type="submit" name="post" value="Post">

          </form>

        </div>

        <div class="feed">

          <div class="posts">

            <div class="poster">

              <p><b>Poster</b></p>

            </div>

            <div class="post">

              <p>It give me immense pleasure To announce the arrival of happening to your college, Embrace..!</p>

            </div>

          </div>

        </div>

      </div>

    </div>

  </div>

</body>



</html>

body {

  margin: 0px;

  border: 1px solid black;

}



#head {

  text-align: center;

  background: linear-gradient(to right, cyan, purple);

  margin: 0px;

  padding: 20px;

  border: 1px solid black;

}



#head h1 {

  margin: 0px;

  font-family: 'Great Vibes', cursive;

  color: white;

  font-size: 40px;

}



.contianer {

  display: flex;

  flex-direction: column;

  justify-content: center;

  height: 100%;

}



.ops {

  display: flex;

  justify-content: center;

  border-bottom: 1px solid black;

  border-top: 1px solid black;

}



#list ul {

  list-style-type: none;

  margin: 0px;

  padding: 0px;

}



#list li {

  float: left;

  padding: 0px;

  margin: 0px;

}



#list li:hover {

  background-color: lightgrey;

}



#list {

  display: flex;

  justify-content: center;

  margin: 10px;

}



form {

  padding: 0px;

  margin: 0px;

}



.dhund {

  display: flex;

  justify-content: center;

  padding: 10px;

}



input[name="name"] {

  max-height: 37px;

  max-width: 400px;

  min-width: 200px;

  border-radius: 10px;

  font-size: 17px;

  border: 1px solid black;

  padding: 5px;

  margin: 5px;

}



input[name="search"] {

  background-color: rgb(183, 242, 184);

  font-size: 15px;

  border: 1px solid black;

  border-radius: 5px;

  color: black;

}



input[name="logout"],

input[name="chat"],

input[name="update"],

input[name="homepage"],

input[name="event"] {

  background-color: white;

  border: none;

  padding: 10px 19px;

}



input[name="logout"]:hover,

input[name="chat"]:hover,

input[name="update"]:hover,

input[name="homepage"]:hover,

input[name="event"]:hover {

  background-color: lightgrey;

}



.content {

  display: flex;

  flex-direction: row;

}



.sidebar {

  display: flex;

  flex-direction: column;

  border-right: 1px solid black;

  height: 100%

}



#image {

  margin: 2px;

  padding: 5px;

  display: flex;

  justify-content: center;

}



#image img {

  border: 1px solid black;

}



#upload {

  border-top: 1px solid black;

  margin: 2px;

  min-width: 250px;

}



#upload p {

  text-align: center;

}



#stupid {

  display: flex;

  justify-content: center;

  margin: 5px;

}



.material {

  margin: 20px;

  min-width: 400px;

  border: 1px solid black;

  border-radius: 10px;

  background-color: lightgrey;

}



.posts {

  border: 1px solid black;

  margin: 17px;

  margin-top: 80px;

  border-radius: 7px;

}



.feed {

  padding: 20px;

}



.post p {

  padding: 5px;

}



.poster {

  padding-left: 10px;

  border-bottom: 1px solid black;

}



.poster p {}



#matter p {

  text-indent: 30px;

}



#matter {

  border: 1px solid black;

  margin: 8px;

  background-color: white;

  border-radius: 20px;

  padding: 20px;

}



.main {

  display: flex;

  flex-direction: column;

  margin: 5px;

  width: 100%;

}





/*#mind

{

	display: flex;

	flex-direction: row;

	justify-content: center;

	border: 1px solid black;

	border-radius: 8px;

	background-color: lightgrey;

}*/



textarea[name="mind"] {

  border-radius: 10px;

  border: 1px solid black;

  font-size: 15px;

  padding: 10px 5px 10px 5px;

}



input[name="post"] {

  width: 120px;

  height: 50px;

  background-color: powderblue;

  font-size: 17px;

}

<!DOCTYPE html>

<html>



<head>

  <title>The Joint.</title>

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

  <link href="https://fonts.googleapis.com/css?family=Great+Vibes|Slabo+27px" rel="stylesheet">

</head>



<body>

  <div id="head">

    <h1>The Joint.</h1>

  </div>



  <div class="contianer">

    <div class="ops">

      <div id="list">

        <ul>

          <li>

            <form action="homepage.php" method="GET"><input type="submit" name="homepage" value="Homepage"></form>

          </li>

          <li>

            <form action="homepage.php" method="GET"><input type="submit" name="update" value="Update"></form>

          </li>

          <li>

            <form action="homepage.php" method="GET"><input type="submit" name="chat" value="Chat"></form>

          </li>

          <li>

            <form action="homepage.php" method="GET"><input type="submit" name="event" value="Your Events"></form>

          </li>

          <li>

            <form action="homepage.php" method="GET"><input type="submit" name="logout" value="logout"></form>

          </li>

        </ul>

      </div>

    </div>

    <div class="dhund">

      <form method="POST" action="homepage.php">

        <input type="text" name="name" placeholder="Search for People or things">

        <input type="submit" name="search" value="search">

      </form>

    </div>

    <div class="content">



      <div class="sidebar">

        <div id="visual">

          <div id="image">

            <img src="<?php echo $avatar ?>" width="200" height="250">

          </div>

          <div id="upload">

            <form action="homepage.php" method="POST" enctype="multipart/form-data">

              <p>Upload Pic:</p><input type="file" name="img"><br>

              <div id="stupid">

                <input type="submit" name="upload" value="Upload">

              </div>

            </form>

          </div>

        </div>

      </div>



      <div class="main">

        <div id="mind">

          <form method="GET" action="homepage.php">

            <textarea name="mind" cols="40" rows="5"></textarea>

            <input type="submit" name="post" value="Post">

          </form>

        </div>

        <div class="feed">

          <div class="posts">

            <div class="poster">

              <p><b>Poster</b></p>

            </div>

            <div class="post">

              <p>It give me immense pleasure To announce the arrival of happening to your college, Embrace..!</p>

            </div>

          </div>

        </div>

      </div>

    </div>

  </div>

</body>



</html>

body {

  margin: 0px;

  border: 1px solid black;

}



#head {

  text-align: center;

  background: linear-gradient(to right, cyan, purple);

  margin: 0px;

  padding: 20px;

  border: 1px solid black;

}



#head h1 {

  margin: 0px;

  font-family: 'Great Vibes', cursive;

  color: white;

  font-size: 40px;

}



.contianer {

  display: flex;

  flex-direction: column;

  justify-content: center;

  height: 100%;

}



.ops {

  display: flex;

  justify-content: center;

  border-bottom: 1px solid black;

  border-top: 1px solid black;

}



#list ul {

  list-style-type: none;

  margin: 0px;

  padding: 0px;

}



#list li {

  float: left;

  padding: 0px;

  margin: 0px;

}



#list li:hover {

  background-color: lightgrey;

}



#list {

  display: flex;

  justify-content: center;

  margin: 10px;

}



form {

  padding: 0px;

  margin: 0px;

}



.dhund {

  display: flex;

  justify-content: center;

  padding: 10px;

}



input[name="name"] {

  max-height: 37px;

  max-width: 400px;

  min-width: 200px;

  border-radius: 10px;

  font-size: 17px;

  border: 1px solid black;

  padding: 5px;

  margin: 5px;

}



input[name="search"] {

  background-color: rgb(183, 242, 184);

  font-size: 15px;

  border: 1px solid black;

  border-radius: 5px;

  color: black;

}



input[name="logout"],

input[name="chat"],

input[name="update"],

input[name="homepage"],

input[name="event"] {

  background-color: white;

  border: none;

  padding: 10px 19px;

}



input[name="logout"]:hover,

input[name="chat"]:hover,

input[name="update"]:hover,

input[name="homepage"]:hover,

input[name="event"]:hover {

  background-color: lightgrey;

}



.content {

  display: flex;

  flex-direction: row;

}



.sidebar {

  display: flex;

  flex-direction: column;

  border-right: 1px solid black;

  height: 100%

}



#image {

  margin: 2px;

  padding: 5px;

  display: flex;

  justify-content: center;

}



#image img {

  border: 1px solid black;

}



#upload {

  border-top: 1px solid black;

  margin: 2px;

  min-width: 250px;

}



#upload p {

  text-align: center;

}



#stupid {

  display: flex;

  justify-content: center;

  margin: 5px;

}



.material {

  margin: 20px;

  min-width: 400px;

  border: 1px solid black;

  border-radius: 10px;

  background-color: lightgrey;

}



.posts {

  border: 1px solid black;

  margin: 17px;

  margin-top: 80px;

  border-radius: 7px;

}



.feed {

  padding: 20px;

}



.post p {

  padding: 5px;

}



.poster {

  padding-left: 10px;

  border-bottom: 1px solid black;

}



.poster p {}



#matter p {

  text-indent: 30px;

}



#matter {

  border: 1px solid black;

  margin: 8px;

  background-color: white;

  border-radius: 20px;

  padding: 20px;

}



.main {

  display: flex;

  flex-direction: column;

  margin: 5px;

  width: 100%;

}





/*#mind

{

	display: flex;

	flex-direction: row;

	justify-content: center;

	border: 1px solid black;

	border-radius: 8px;

	background-color: lightgrey;

}*/



textarea[name="mind"] {

  border-radius: 10px;

  border: 1px solid black;

  font-size: 15px;

  padding: 10px 5px 10px 5px;

}



input[name="post"] {

  width: 120px;

  height: 50px;

  background-color: powderblue;

  font-size: 17px;

}

<!DOCTYPE html>

<html>



<head>

  <title>The Joint.</title>

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

  <link href="https://fonts.googleapis.com/css?family=Great+Vibes|Slabo+27px" rel="stylesheet">

</head>



<body>

  <div id="head">

    <h1>The Joint.</h1>

  </div>



  <div class="contianer">

    <div class="ops">

      <div id="list">

        <ul>

          <li>

            <form action="homepage.php" method="GET"><input type="submit" name="homepage" value="Homepage"></form>

          </li>

          <li>

            <form action="homepage.php" method="GET"><input type="submit" name="update" value="Update"></form>

          </li>

          <li>

            <form action="homepage.php" method="GET"><input type="submit" name="chat" value="Chat"></form>

          </li>

          <li>

            <form action="homepage.php" method="GET"><input type="submit" name="event" value="Your Events"></form>

          </li>

          <li>

            <form action="homepage.php" method="GET"><input type="submit" name="logout" value="logout"></form>

          </li>

        </ul>

      </div>

    </div>

    <div class="dhund">

      <form method="POST" action="homepage.php">

        <input type="text" name="name" placeholder="Search for People or things">

        <input type="submit" name="search" value="search">

      </form>

    </div>

    <div class="content">



      <div class="sidebar">

        <div id="visual">

          <div id="image">

            <img src="<?php echo $avatar ?>" width="200" height="250">

          </div>

          <div id="upload">

            <form action="homepage.php" method="POST" enctype="multipart/form-data">

              <p>Upload Pic:</p><input type="file" name="img"><br>

              <div id="stupid">

                <input type="submit" name="upload" value="Upload">

              </div>

            </form>

          </div>

        </div>

      </div>



      <div class="main">

        <div id="mind">

          <form method="GET" action="homepage.php">

            <textarea name="mind" cols="40" rows="5"></textarea>

            <input type="submit" name="post" value="Post">

          </form>

        </div>

        <div class="feed">

          <div class="posts">

            <div class="poster">

              <p><b>Poster</b></p>

            </div>

            <div class="post">

              <p>It give me immense pleasure To announce the arrival of happening to your college, Embrace..!</p>

            </div>

          </div>

        </div>

      </div>

    </div>

  </div>

</body>



</html>

html css

asked Nov 19 at 6:41

Mrak Vladar

132

asked Nov 19 at 6:41

Mrak Vladar

132

asked Nov 19 at 6:41

Mrak Vladar

132

asked Nov 19 at 6:41

Mrak Vladar

132

asked Nov 19 at 6:41

Mrak Vladar

132

It because height is auto to the content inside the body
– לבני מלכה
Nov 19 at 6:45

can you attach a screenshot of the original problem
– Viira
Nov 19 at 6:59

can't reproduce the issue.
– Zohir Salak
Nov 19 at 15:05

add a comment |

It because height is auto to the content inside the body
– לבני מלכה
Nov 19 at 6:45

can you attach a screenshot of the original problem
– Viira
Nov 19 at 6:59

can't reproduce the issue.
– Zohir Salak
Nov 19 at 15:05

It because height is auto to the content inside the body
– לבני מלכה
Nov 19 at 6:45

can you attach a screenshot of the original problem
– Viira
Nov 19 at 6:59

can't reproduce the issue.
– Zohir Salak
Nov 19 at 15:05

add a comment |

1 Answer
1

active

oldest

votes

up vote
0
down vote

One way is to turn the body into an inline-block.

Inline blocks have the same width as their contents by default and are not restricted to the width of the window.

body {

  margin: 0px;

  border: 1px solid black;

  display: inline-block;  /* new */

}



#head {

  text-align: center;

  background: linear-gradient(to right, cyan, purple);

  margin: 0px;

  padding: 20px;

  border: 1px solid black;

}



#head h1 {

  margin: 0px;

  font-family: 'Great Vibes', cursive;

  color: white;

  font-size: 40px;

}



.contianer {

  display: flex;

  flex-direction: column;

  justify-content: center;

  height: 100%;

}



.ops {

  display: flex;

  justify-content: center;

  border-bottom: 1px solid black;

  border-top: 1px solid black;

}



#list ul {

  list-style-type: none;

  margin: 0px;

  padding: 0px;

}



#list li {

  float: left;

  padding: 0px;

  margin: 0px;

}



#list li:hover {

  background-color: lightgrey;

}



#list {

  display: flex;

  justify-content: center;

  margin: 10px;

}



form {

  padding: 0px;

  margin: 0px;

}



.dhund {

  display: flex;

  justify-content: center;

  padding: 10px;

}



input[name="name"] {

  max-height: 37px;

  max-width: 400px;

  min-width: 200px;

  border-radius: 10px;

  font-size: 17px;

  border: 1px solid black;

  padding: 5px;

  margin: 5px;

}



input[name="search"] {

  background-color: rgb(183, 242, 184);

  font-size: 15px;

  border: 1px solid black;

  border-radius: 5px;

  color: black;

}



input[name="logout"],

input[name="chat"],

input[name="update"],

input[name="homepage"],

input[name="event"] {

  background-color: white;

  border: none;

  padding: 10px 19px;

}



input[name="logout"]:hover,

input[name="chat"]:hover,

input[name="update"]:hover,

input[name="homepage"]:hover,

input[name="event"]:hover {

  background-color: lightgrey;

}



.content {

  display: flex;

  flex-direction: row;

}



.sidebar {

  display: flex;

  flex-direction: column;

  border-right: 1px solid black;

  height: 100%

}



#image {

  margin: 2px;

  padding: 5px;

  display: flex;

  justify-content: center;

}



#image img {

  border: 1px solid black;

}



#upload {

  border-top: 1px solid black;

  margin: 2px;

  min-width: 250px;

}



#upload p {

  text-align: center;

}



#stupid {

  display: flex;

  justify-content: center;

  margin: 5px;

}



.material {

  margin: 20px;

  min-width: 400px;

  border: 1px solid black;

  border-radius: 10px;

  background-color: lightgrey;

}



.posts {

  border: 1px solid black;

  margin: 17px;

  margin-top: 80px;

  border-radius: 7px;

}



.feed {

  padding: 20px;

}



.post p {

  padding: 5px;

}



.poster {

  padding-left: 10px;

  border-bottom: 1px solid black;

}



.poster p {}



#matter p {

  text-indent: 30px;

}



#matter {

  border: 1px solid black;

  margin: 8px;

  background-color: white;

  border-radius: 20px;

  padding: 20px;

}



.main {

  display: flex;

  flex-direction: column;

  margin: 5px;

  width: 100%;

}





/*#mind

{

	display: flex;

	flex-direction: row;

	justify-content: center;

	border: 1px solid black;

	border-radius: 8px;

	background-color: lightgrey;

}*/



textarea[name="mind"] {

  border-radius: 10px;

  border: 1px solid black;

  font-size: 15px;

  padding: 10px 5px 10px 5px;

}



input[name="post"] {

  width: 120px;

  height: 50px;

  background-color: powderblue;

  font-size: 17px;

}

<!DOCTYPE html>

<html>



<head>

  <title>The Joint.</title>

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

  <link href="https://fonts.googleapis.com/css?family=Great+Vibes|Slabo+27px" rel="stylesheet">

</head>



<body>

  <div id="head">

    <h1>The Joint.</h1>

  </div>



  <div class="contianer">

    <div class="ops">

      <div id="list">

        <ul>

          <li>

            <form action="homepage.php" method="GET"><input type="submit" name="homepage" value="Homepage"></form>

          </li>

          <li>

            <form action="homepage.php" method="GET"><input type="submit" name="update" value="Update"></form>

          </li>

          <li>

            <form action="homepage.php" method="GET"><input type="submit" name="chat" value="Chat"></form>

          </li>

          <li>

            <form action="homepage.php" method="GET"><input type="submit" name="event" value="Your Events"></form>

          </li>

          <li>

            <form action="homepage.php" method="GET"><input type="submit" name="logout" value="logout"></form>

          </li>

        </ul>

      </div>

    </div>

    <div class="dhund">

      <form method="POST" action="homepage.php">

        <input type="text" name="name" placeholder="Search for People or things">

        <input type="submit" name="search" value="search">

      </form>

    </div>

    <div class="content">



      <div class="sidebar">

        <div id="visual">

          <div id="image">

            <img src="<?php echo $avatar ?>" width="200" height="250">

          </div>

          <div id="upload">

            <form action="homepage.php" method="POST" enctype="multipart/form-data">

              <p>Upload Pic:</p><input type="file" name="img"><br>

              <div id="stupid">

                <input type="submit" name="upload" value="Upload">

              </div>

            </form>

          </div>

        </div>

      </div>



      <div class="main">

        <div id="mind">

          <form method="GET" action="homepage.php">

            <textarea name="mind" cols="40" rows="5"></textarea>

            <input type="submit" name="post" value="Post">

          </form>

        </div>

        <div class="feed">

          <div class="posts">

            <div class="poster">

              <p><b>Poster</b></p>

            </div>

            <div class="post">

              <p>It give me immense pleasure To announce the arrival of happening to your college, Embrace..!</p>

            </div>

          </div>

        </div>

      </div>

    </div>

  </div>

</body>



</html>

This solution does make the body narrower than the window on wide screens, but you can solve that by adding a min-width.

answered Nov 19 at 12:47

Mr Lister

34.2k1072113

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53369521%2fbody-elements-going-outside-of-the-body%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

up vote
0
down vote

One way is to turn the body into an inline-block.

Inline blocks have the same width as their contents by default and are not restricted to the width of the window.

body {

  margin: 0px;

  border: 1px solid black;

  display: inline-block;  /* new */

}



#head {

  text-align: center;

  background: linear-gradient(to right, cyan, purple);

  margin: 0px;

  padding: 20px;

  border: 1px solid black;

}



#head h1 {

  margin: 0px;

  font-family: 'Great Vibes', cursive;

  color: white;

  font-size: 40px;

}



.contianer {

  display: flex;

  flex-direction: column;

  justify-content: center;

  height: 100%;

}



.ops {

  display: flex;

  justify-content: center;

  border-bottom: 1px solid black;

  border-top: 1px solid black;

}



#list ul {

  list-style-type: none;

  margin: 0px;

  padding: 0px;

}



#list li {

  float: left;

  padding: 0px;

  margin: 0px;

}



#list li:hover {

  background-color: lightgrey;

}



#list {

  display: flex;

  justify-content: center;

  margin: 10px;

}



form {

  padding: 0px;

  margin: 0px;

}



.dhund {

  display: flex;

  justify-content: center;

  padding: 10px;

}



input[name="name"] {

  max-height: 37px;

  max-width: 400px;

  min-width: 200px;

  border-radius: 10px;

  font-size: 17px;

  border: 1px solid black;

  padding: 5px;

  margin: 5px;

}



input[name="search"] {

  background-color: rgb(183, 242, 184);

  font-size: 15px;

  border: 1px solid black;

  border-radius: 5px;

  color: black;

}



input[name="logout"],

input[name="chat"],

input[name="update"],

input[name="homepage"],

input[name="event"] {

  background-color: white;

  border: none;

  padding: 10px 19px;

}



input[name="logout"]:hover,

input[name="chat"]:hover,

input[name="update"]:hover,

input[name="homepage"]:hover,

input[name="event"]:hover {

  background-color: lightgrey;

}



.content {

  display: flex;

  flex-direction: row;

}



.sidebar {

  display: flex;

  flex-direction: column;

  border-right: 1px solid black;

  height: 100%

}



#image {

  margin: 2px;

  padding: 5px;

  display: flex;

  justify-content: center;

}



#image img {

  border: 1px solid black;

}



#upload {

  border-top: 1px solid black;

  margin: 2px;

  min-width: 250px;

}



#upload p {

  text-align: center;

}



#stupid {

  display: flex;

  justify-content: center;

  margin: 5px;

}



.material {

  margin: 20px;

  min-width: 400px;

  border: 1px solid black;

  border-radius: 10px;

  background-color: lightgrey;

}



.posts {

  border: 1px solid black;

  margin: 17px;

  margin-top: 80px;

  border-radius: 7px;

}



.feed {

  padding: 20px;

}



.post p {

  padding: 5px;

}



.poster {

  padding-left: 10px;

  border-bottom: 1px solid black;

}



.poster p {}



#matter p {

  text-indent: 30px;

}



#matter {

  border: 1px solid black;

  margin: 8px;

  background-color: white;

  border-radius: 20px;

  padding: 20px;

}



.main {

  display: flex;

  flex-direction: column;

  margin: 5px;

  width: 100%;

}





/*#mind

{

	display: flex;

	flex-direction: row;

	justify-content: center;

	border: 1px solid black;

	border-radius: 8px;

	background-color: lightgrey;

}*/



textarea[name="mind"] {

  border-radius: 10px;

  border: 1px solid black;

  font-size: 15px;

  padding: 10px 5px 10px 5px;

}



input[name="post"] {

  width: 120px;

  height: 50px;

  background-color: powderblue;

  font-size: 17px;

}

<!DOCTYPE html>

<html>



<head>

  <title>The Joint.</title>

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

  <link href="https://fonts.googleapis.com/css?family=Great+Vibes|Slabo+27px" rel="stylesheet">

</head>



<body>

  <div id="head">

    <h1>The Joint.</h1>

  </div>



  <div class="contianer">

    <div class="ops">

      <div id="list">

        <ul>

          <li>

            <form action="homepage.php" method="GET"><input type="submit" name="homepage" value="Homepage"></form>

          </li>

          <li>

            <form action="homepage.php" method="GET"><input type="submit" name="update" value="Update"></form>

          </li>

          <li>

            <form action="homepage.php" method="GET"><input type="submit" name="chat" value="Chat"></form>

          </li>

          <li>

            <form action="homepage.php" method="GET"><input type="submit" name="event" value="Your Events"></form>

          </li>

          <li>

            <form action="homepage.php" method="GET"><input type="submit" name="logout" value="logout"></form>

          </li>

        </ul>

      </div>

    </div>

    <div class="dhund">

      <form method="POST" action="homepage.php">

        <input type="text" name="name" placeholder="Search for People or things">

        <input type="submit" name="search" value="search">

      </form>

    </div>

    <div class="content">



      <div class="sidebar">

        <div id="visual">

          <div id="image">

            <img src="<?php echo $avatar ?>" width="200" height="250">

          </div>

          <div id="upload">

            <form action="homepage.php" method="POST" enctype="multipart/form-data">

              <p>Upload Pic:</p><input type="file" name="img"><br>

              <div id="stupid">

                <input type="submit" name="upload" value="Upload">

              </div>

            </form>

          </div>

        </div>

      </div>



      <div class="main">

        <div id="mind">

          <form method="GET" action="homepage.php">

            <textarea name="mind" cols="40" rows="5"></textarea>

            <input type="submit" name="post" value="Post">

          </form>

        </div>

        <div class="feed">

          <div class="posts">

            <div class="poster">

              <p><b>Poster</b></p>

            </div>

            <div class="post">

              <p>It give me immense pleasure To announce the arrival of happening to your college, Embrace..!</p>

            </div>

          </div>

        </div>

      </div>

    </div>

  </div>

</body>



</html>

This solution does make the body narrower than the window on wide screens, but you can solve that by adding a min-width.

answered Nov 19 at 12:47

Mr Lister

34.2k1072113

add a comment |

up vote
0
down vote

One way is to turn the body into an inline-block.

Inline blocks have the same width as their contents by default and are not restricted to the width of the window.

body {

  margin: 0px;

  border: 1px solid black;

  display: inline-block;  /* new */

}



#head {

  text-align: center;

  background: linear-gradient(to right, cyan, purple);

  margin: 0px;

  padding: 20px;

  border: 1px solid black;

}



#head h1 {

  margin: 0px;

  font-family: 'Great Vibes', cursive;

  color: white;

  font-size: 40px;

}



.contianer {

  display: flex;

  flex-direction: column;

  justify-content: center;

  height: 100%;

}



.ops {

  display: flex;

  justify-content: center;

  border-bottom: 1px solid black;

  border-top: 1px solid black;

}



#list ul {

  list-style-type: none;

  margin: 0px;

  padding: 0px;

}



#list li {

  float: left;

  padding: 0px;

  margin: 0px;

}



#list li:hover {

  background-color: lightgrey;

}



#list {

  display: flex;

  justify-content: center;

  margin: 10px;

}



form {

  padding: 0px;

  margin: 0px;

}



.dhund {

  display: flex;

  justify-content: center;

  padding: 10px;

}



input[name="name"] {

  max-height: 37px;

  max-width: 400px;

  min-width: 200px;

  border-radius: 10px;

  font-size: 17px;

  border: 1px solid black;

  padding: 5px;

  margin: 5px;

}



input[name="search"] {

  background-color: rgb(183, 242, 184);

  font-size: 15px;

  border: 1px solid black;

  border-radius: 5px;

  color: black;

}



input[name="logout"],

input[name="chat"],

input[name="update"],

input[name="homepage"],

input[name="event"] {

  background-color: white;

  border: none;

  padding: 10px 19px;

}



input[name="logout"]:hover,

input[name="chat"]:hover,

input[name="update"]:hover,

input[name="homepage"]:hover,

input[name="event"]:hover {

  background-color: lightgrey;

}



.content {

  display: flex;

  flex-direction: row;

}



.sidebar {

  display: flex;

  flex-direction: column;

  border-right: 1px solid black;

  height: 100%

}



#image {

  margin: 2px;

  padding: 5px;

  display: flex;

  justify-content: center;

}



#image img {

  border: 1px solid black;

}



#upload {

  border-top: 1px solid black;

  margin: 2px;

  min-width: 250px;

}



#upload p {

  text-align: center;

}



#stupid {

  display: flex;

  justify-content: center;

  margin: 5px;

}



.material {

  margin: 20px;

  min-width: 400px;

  border: 1px solid black;

  border-radius: 10px;

  background-color: lightgrey;

}



.posts {

  border: 1px solid black;

  margin: 17px;

  margin-top: 80px;

  border-radius: 7px;

}



.feed {

  padding: 20px;

}



.post p {

  padding: 5px;

}



.poster {

  padding-left: 10px;

  border-bottom: 1px solid black;

}



.poster p {}



#matter p {

  text-indent: 30px;

}



#matter {

  border: 1px solid black;

  margin: 8px;

  background-color: white;

  border-radius: 20px;

  padding: 20px;

}



.main {

  display: flex;

  flex-direction: column;

  margin: 5px;

  width: 100%;

}





/*#mind

{

	display: flex;

	flex-direction: row;

	justify-content: center;

	border: 1px solid black;

	border-radius: 8px;

	background-color: lightgrey;

}*/



textarea[name="mind"] {

  border-radius: 10px;

  border: 1px solid black;

  font-size: 15px;

  padding: 10px 5px 10px 5px;

}



input[name="post"] {

  width: 120px;

  height: 50px;

  background-color: powderblue;

  font-size: 17px;

}

<!DOCTYPE html>

<html>



<head>

  <title>The Joint.</title>

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

  <link href="https://fonts.googleapis.com/css?family=Great+Vibes|Slabo+27px" rel="stylesheet">

</head>



<body>

  <div id="head">

    <h1>The Joint.</h1>

  </div>



  <div class="contianer">

    <div class="ops">

      <div id="list">

        <ul>

          <li>

            <form action="homepage.php" method="GET"><input type="submit" name="homepage" value="Homepage"></form>

          </li>

          <li>

            <form action="homepage.php" method="GET"><input type="submit" name="update" value="Update"></form>

          </li>

          <li>

            <form action="homepage.php" method="GET"><input type="submit" name="chat" value="Chat"></form>

          </li>

          <li>

            <form action="homepage.php" method="GET"><input type="submit" name="event" value="Your Events"></form>

          </li>

          <li>

            <form action="homepage.php" method="GET"><input type="submit" name="logout" value="logout"></form>

          </li>

        </ul>

      </div>

    </div>

    <div class="dhund">

      <form method="POST" action="homepage.php">

        <input type="text" name="name" placeholder="Search for People or things">

        <input type="submit" name="search" value="search">

      </form>

    </div>

    <div class="content">



      <div class="sidebar">

        <div id="visual">

          <div id="image">

            <img src="<?php echo $avatar ?>" width="200" height="250">

          </div>

          <div id="upload">

            <form action="homepage.php" method="POST" enctype="multipart/form-data">

              <p>Upload Pic:</p><input type="file" name="img"><br>

              <div id="stupid">

                <input type="submit" name="upload" value="Upload">

              </div>

            </form>

          </div>

        </div>

      </div>



      <div class="main">

        <div id="mind">

          <form method="GET" action="homepage.php">

            <textarea name="mind" cols="40" rows="5"></textarea>

            <input type="submit" name="post" value="Post">

          </form>

        </div>

        <div class="feed">

          <div class="posts">

            <div class="poster">

              <p><b>Poster</b></p>

            </div>

            <div class="post">

              <p>It give me immense pleasure To announce the arrival of happening to your college, Embrace..!</p>

            </div>

          </div>

        </div>

      </div>

    </div>

  </div>

</body>



</html>

This solution does make the body narrower than the window on wide screens, but you can solve that by adding a min-width.

answered Nov 19 at 12:47

Mr Lister

34.2k1072113

add a comment |

up vote
0
down vote

One way is to turn the body into an inline-block.

Inline blocks have the same width as their contents by default and are not restricted to the width of the window.

body {

  margin: 0px;

  border: 1px solid black;

  display: inline-block;  /* new */

}



#head {

  text-align: center;

  background: linear-gradient(to right, cyan, purple);

  margin: 0px;

  padding: 20px;

  border: 1px solid black;

}



#head h1 {

  margin: 0px;

  font-family: 'Great Vibes', cursive;

  color: white;

  font-size: 40px;

}



.contianer {

  display: flex;

  flex-direction: column;

  justify-content: center;

  height: 100%;

}



.ops {

  display: flex;

  justify-content: center;

  border-bottom: 1px solid black;

  border-top: 1px solid black;

}



#list ul {

  list-style-type: none;

  margin: 0px;

  padding: 0px;

}



#list li {

  float: left;

  padding: 0px;

  margin: 0px;

}



#list li:hover {

  background-color: lightgrey;

}



#list {

  display: flex;

  justify-content: center;

  margin: 10px;

}



form {

  padding: 0px;

  margin: 0px;

}



.dhund {

  display: flex;

  justify-content: center;

  padding: 10px;

}



input[name="name"] {

  max-height: 37px;

  max-width: 400px;

  min-width: 200px;

  border-radius: 10px;

  font-size: 17px;

  border: 1px solid black;

  padding: 5px;

  margin: 5px;

}



input[name="search"] {

  background-color: rgb(183, 242, 184);

  font-size: 15px;

  border: 1px solid black;

  border-radius: 5px;

  color: black;

}



input[name="logout"],

input[name="chat"],

input[name="update"],

input[name="homepage"],

input[name="event"] {

  background-color: white;

  border: none;

  padding: 10px 19px;

}



input[name="logout"]:hover,

input[name="chat"]:hover,

input[name="update"]:hover,

input[name="homepage"]:hover,

input[name="event"]:hover {

  background-color: lightgrey;

}



.content {

  display: flex;

  flex-direction: row;

}



.sidebar {

  display: flex;

  flex-direction: column;

  border-right: 1px solid black;

  height: 100%

}



#image {

  margin: 2px;

  padding: 5px;

  display: flex;

  justify-content: center;

}



#image img {

  border: 1px solid black;

}



#upload {

  border-top: 1px solid black;

  margin: 2px;

  min-width: 250px;

}



#upload p {

  text-align: center;

}



#stupid {

  display: flex;

  justify-content: center;

  margin: 5px;

}



.material {

  margin: 20px;

  min-width: 400px;

  border: 1px solid black;

  border-radius: 10px;

  background-color: lightgrey;

}



.posts {

  border: 1px solid black;

  margin: 17px;

  margin-top: 80px;

  border-radius: 7px;

}



.feed {

  padding: 20px;

}



.post p {

  padding: 5px;

}



.poster {

  padding-left: 10px;

  border-bottom: 1px solid black;

}



.poster p {}



#matter p {

  text-indent: 30px;

}



#matter {

  border: 1px solid black;

  margin: 8px;

  background-color: white;

  border-radius: 20px;

  padding: 20px;

}



.main {

  display: flex;

  flex-direction: column;

  margin: 5px;

  width: 100%;

}





/*#mind

{

	display: flex;

	flex-direction: row;

	justify-content: center;

	border: 1px solid black;

	border-radius: 8px;

	background-color: lightgrey;

}*/



textarea[name="mind"] {

  border-radius: 10px;

  border: 1px solid black;

  font-size: 15px;

  padding: 10px 5px 10px 5px;

}



input[name="post"] {

  width: 120px;

  height: 50px;

  background-color: powderblue;

  font-size: 17px;

}

<!DOCTYPE html>

<html>



<head>

  <title>The Joint.</title>

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

  <link href="https://fonts.googleapis.com/css?family=Great+Vibes|Slabo+27px" rel="stylesheet">

</head>



<body>

  <div id="head">

    <h1>The Joint.</h1>

  </div>



  <div class="contianer">

    <div class="ops">

      <div id="list">

        <ul>

          <li>

            <form action="homepage.php" method="GET"><input type="submit" name="homepage" value="Homepage"></form>

          </li>

          <li>

            <form action="homepage.php" method="GET"><input type="submit" name="update" value="Update"></form>

          </li>

          <li>

            <form action="homepage.php" method="GET"><input type="submit" name="chat" value="Chat"></form>

          </li>

          <li>

            <form action="homepage.php" method="GET"><input type="submit" name="event" value="Your Events"></form>

          </li>

          <li>

            <form action="homepage.php" method="GET"><input type="submit" name="logout" value="logout"></form>

          </li>

        </ul>

      </div>

    </div>

    <div class="dhund">

      <form method="POST" action="homepage.php">

        <input type="text" name="name" placeholder="Search for People or things">

        <input type="submit" name="search" value="search">

      </form>

    </div>

    <div class="content">



      <div class="sidebar">

        <div id="visual">

          <div id="image">

            <img src="<?php echo $avatar ?>" width="200" height="250">

          </div>

          <div id="upload">

            <form action="homepage.php" method="POST" enctype="multipart/form-data">

              <p>Upload Pic:</p><input type="file" name="img"><br>

              <div id="stupid">

                <input type="submit" name="upload" value="Upload">

              </div>

            </form>

          </div>

        </div>

      </div>



      <div class="main">

        <div id="mind">

          <form method="GET" action="homepage.php">

            <textarea name="mind" cols="40" rows="5"></textarea>

            <input type="submit" name="post" value="Post">

          </form>

        </div>

        <div class="feed">

          <div class="posts">

            <div class="poster">

              <p><b>Poster</b></p>

            </div>

            <div class="post">

              <p>It give me immense pleasure To announce the arrival of happening to your college, Embrace..!</p>

            </div>

          </div>

        </div>

      </div>

    </div>

  </div>

</body>



</html>

This solution does make the body narrower than the window on wide screens, but you can solve that by adding a min-width.

answered Nov 19 at 12:47

Mr Lister

34.2k1072113

One way is to turn the body into an inline-block.

Inline blocks have the same width as their contents by default and are not restricted to the width of the window.

body {

  margin: 0px;

  border: 1px solid black;

  display: inline-block;  /* new */

}



#head {

  text-align: center;

  background: linear-gradient(to right, cyan, purple);

  margin: 0px;

  padding: 20px;

  border: 1px solid black;

}



#head h1 {

  margin: 0px;

  font-family: 'Great Vibes', cursive;

  color: white;

  font-size: 40px;

}



.contianer {

  display: flex;

  flex-direction: column;

  justify-content: center;

  height: 100%;

}



.ops {

  display: flex;

  justify-content: center;

  border-bottom: 1px solid black;

  border-top: 1px solid black;

}



#list ul {

  list-style-type: none;

  margin: 0px;

  padding: 0px;

}



#list li {

  float: left;

  padding: 0px;

  margin: 0px;

}



#list li:hover {

  background-color: lightgrey;

}



#list {

  display: flex;

  justify-content: center;

  margin: 10px;

}



form {

  padding: 0px;

  margin: 0px;

}



.dhund {

  display: flex;

  justify-content: center;

  padding: 10px;

}



input[name="name"] {

  max-height: 37px;

  max-width: 400px;

  min-width: 200px;

  border-radius: 10px;

  font-size: 17px;

  border: 1px solid black;

  padding: 5px;

  margin: 5px;

}



input[name="search"] {

  background-color: rgb(183, 242, 184);

  font-size: 15px;

  border: 1px solid black;

  border-radius: 5px;

  color: black;

}



input[name="logout"],

input[name="chat"],

input[name="update"],

input[name="homepage"],

input[name="event"] {

  background-color: white;

  border: none;

  padding: 10px 19px;

}



input[name="logout"]:hover,

input[name="chat"]:hover,

input[name="update"]:hover,

input[name="homepage"]:hover,

input[name="event"]:hover {

  background-color: lightgrey;

}



.content {

  display: flex;

  flex-direction: row;

}



.sidebar {

  display: flex;

  flex-direction: column;

  border-right: 1px solid black;

  height: 100%

}



#image {

  margin: 2px;

  padding: 5px;

  display: flex;

  justify-content: center;

}



#image img {

  border: 1px solid black;

}



#upload {

  border-top: 1px solid black;

  margin: 2px;

  min-width: 250px;

}



#upload p {

  text-align: center;

}



#stupid {

  display: flex;

  justify-content: center;

  margin: 5px;

}



.material {

  margin: 20px;

  min-width: 400px;

  border: 1px solid black;

  border-radius: 10px;

  background-color: lightgrey;

}



.posts {

  border: 1px solid black;

  margin: 17px;

  margin-top: 80px;

  border-radius: 7px;

}



.feed {

  padding: 20px;

}



.post p {

  padding: 5px;

}



.poster {

  padding-left: 10px;

  border-bottom: 1px solid black;

}



.poster p {}



#matter p {

  text-indent: 30px;

}



#matter {

  border: 1px solid black;

  margin: 8px;

  background-color: white;

  border-radius: 20px;

  padding: 20px;

}



.main {

  display: flex;

  flex-direction: column;

  margin: 5px;

  width: 100%;

}





/*#mind

{

	display: flex;

	flex-direction: row;

	justify-content: center;

	border: 1px solid black;

	border-radius: 8px;

	background-color: lightgrey;

}*/



textarea[name="mind"] {

  border-radius: 10px;

  border: 1px solid black;

  font-size: 15px;

  padding: 10px 5px 10px 5px;

}



input[name="post"] {

  width: 120px;

  height: 50px;

  background-color: powderblue;

  font-size: 17px;

}

<!DOCTYPE html>

<html>



<head>

  <title>The Joint.</title>

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

  <link href="https://fonts.googleapis.com/css?family=Great+Vibes|Slabo+27px" rel="stylesheet">

</head>



<body>

  <div id="head">

    <h1>The Joint.</h1>

  </div>



  <div class="contianer">

    <div class="ops">

      <div id="list">

        <ul>

          <li>

            <form action="homepage.php" method="GET"><input type="submit" name="homepage" value="Homepage"></form>

          </li>

          <li>

            <form action="homepage.php" method="GET"><input type="submit" name="update" value="Update"></form>

          </li>

          <li>

            <form action="homepage.php" method="GET"><input type="submit" name="chat" value="Chat"></form>

          </li>

          <li>

            <form action="homepage.php" method="GET"><input type="submit" name="event" value="Your Events"></form>

          </li>

          <li>

            <form action="homepage.php" method="GET"><input type="submit" name="logout" value="logout"></form>

          </li>

        </ul>

      </div>

    </div>

    <div class="dhund">

      <form method="POST" action="homepage.php">

        <input type="text" name="name" placeholder="Search for People or things">

        <input type="submit" name="search" value="search">

      </form>

    </div>

    <div class="content">



      <div class="sidebar">

        <div id="visual">

          <div id="image">

            <img src="<?php echo $avatar ?>" width="200" height="250">

          </div>

          <div id="upload">

            <form action="homepage.php" method="POST" enctype="multipart/form-data">

              <p>Upload Pic:</p><input type="file" name="img"><br>

              <div id="stupid">

                <input type="submit" name="upload" value="Upload">

              </div>

            </form>

          </div>

        </div>

      </div>



      <div class="main">

        <div id="mind">

          <form method="GET" action="homepage.php">

            <textarea name="mind" cols="40" rows="5"></textarea>

            <input type="submit" name="post" value="Post">

          </form>

        </div>

        <div class="feed">

          <div class="posts">

            <div class="poster">

              <p><b>Poster</b></p>

            </div>

            <div class="post">

              <p>It give me immense pleasure To announce the arrival of happening to your college, Embrace..!</p>

            </div>

          </div>

        </div>

      </div>

    </div>

  </div>

</body>



</html>

This solution does make the body narrower than the window on wide screens, but you can solve that by adding a min-width.

body {

  margin: 0px;

  border: 1px solid black;

  display: inline-block;  /* new */

}



#head {

  text-align: center;

  background: linear-gradient(to right, cyan, purple);

  margin: 0px;

  padding: 20px;

  border: 1px solid black;

}



#head h1 {

  margin: 0px;

  font-family: 'Great Vibes', cursive;

  color: white;

  font-size: 40px;

}



.contianer {

  display: flex;

  flex-direction: column;

  justify-content: center;

  height: 100%;

}



.ops {

  display: flex;

  justify-content: center;

  border-bottom: 1px solid black;

  border-top: 1px solid black;

}



#list ul {

  list-style-type: none;

  margin: 0px;

  padding: 0px;

}



#list li {

  float: left;

  padding: 0px;

  margin: 0px;

}



#list li:hover {

  background-color: lightgrey;

}



#list {

  display: flex;

  justify-content: center;

  margin: 10px;

}



form {

  padding: 0px;

  margin: 0px;

}



.dhund {

  display: flex;

  justify-content: center;

  padding: 10px;

}



input[name="name"] {

  max-height: 37px;

  max-width: 400px;

  min-width: 200px;

  border-radius: 10px;

  font-size: 17px;

  border: 1px solid black;

  padding: 5px;

  margin: 5px;

}



input[name="search"] {

  background-color: rgb(183, 242, 184);

  font-size: 15px;

  border: 1px solid black;

  border-radius: 5px;

  color: black;

}



input[name="logout"],

input[name="chat"],

input[name="update"],

input[name="homepage"],

input[name="event"] {

  background-color: white;

  border: none;

  padding: 10px 19px;

}



input[name="logout"]:hover,

input[name="chat"]:hover,

input[name="update"]:hover,

input[name="homepage"]:hover,

input[name="event"]:hover {

  background-color: lightgrey;

}



.content {

  display: flex;

  flex-direction: row;

}



.sidebar {

  display: flex;

  flex-direction: column;

  border-right: 1px solid black;

  height: 100%

}



#image {

  margin: 2px;

  padding: 5px;

  display: flex;

  justify-content: center;

}



#image img {

  border: 1px solid black;

}



#upload {

  border-top: 1px solid black;

  margin: 2px;

  min-width: 250px;

}



#upload p {

  text-align: center;

}



#stupid {

  display: flex;

  justify-content: center;

  margin: 5px;

}



.material {

  margin: 20px;

  min-width: 400px;

  border: 1px solid black;

  border-radius: 10px;

  background-color: lightgrey;

}



.posts {

  border: 1px solid black;

  margin: 17px;

  margin-top: 80px;

  border-radius: 7px;

}



.feed {

  padding: 20px;

}



.post p {

  padding: 5px;

}



.poster {

  padding-left: 10px;

  border-bottom: 1px solid black;

}



.poster p {}



#matter p {

  text-indent: 30px;

}



#matter {

  border: 1px solid black;

  margin: 8px;

  background-color: white;

  border-radius: 20px;

  padding: 20px;

}



.main {

  display: flex;

  flex-direction: column;

  margin: 5px;

  width: 100%;

}





/*#mind

{

	display: flex;

	flex-direction: row;

	justify-content: center;

	border: 1px solid black;

	border-radius: 8px;

	background-color: lightgrey;

}*/



textarea[name="mind"] {

  border-radius: 10px;

  border: 1px solid black;

  font-size: 15px;

  padding: 10px 5px 10px 5px;

}



input[name="post"] {

  width: 120px;

  height: 50px;

  background-color: powderblue;

  font-size: 17px;

}

<!DOCTYPE html>

<html>



<head>

  <title>The Joint.</title>

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

  <link href="https://fonts.googleapis.com/css?family=Great+Vibes|Slabo+27px" rel="stylesheet">

</head>



<body>

  <div id="head">

    <h1>The Joint.</h1>

  </div>



  <div class="contianer">

    <div class="ops">

      <div id="list">

        <ul>

          <li>

            <form action="homepage.php" method="GET"><input type="submit" name="homepage" value="Homepage"></form>

          </li>

          <li>

            <form action="homepage.php" method="GET"><input type="submit" name="update" value="Update"></form>

          </li>

          <li>

            <form action="homepage.php" method="GET"><input type="submit" name="chat" value="Chat"></form>

          </li>

          <li>

            <form action="homepage.php" method="GET"><input type="submit" name="event" value="Your Events"></form>

          </li>

          <li>

            <form action="homepage.php" method="GET"><input type="submit" name="logout" value="logout"></form>

          </li>

        </ul>

      </div>

    </div>

    <div class="dhund">

      <form method="POST" action="homepage.php">

        <input type="text" name="name" placeholder="Search for People or things">

        <input type="submit" name="search" value="search">

      </form>

    </div>

    <div class="content">



      <div class="sidebar">

        <div id="visual">

          <div id="image">

            <img src="<?php echo $avatar ?>" width="200" height="250">

          </div>

          <div id="upload">

            <form action="homepage.php" method="POST" enctype="multipart/form-data">

              <p>Upload Pic:</p><input type="file" name="img"><br>

              <div id="stupid">

                <input type="submit" name="upload" value="Upload">

              </div>

            </form>

          </div>

        </div>

      </div>



      <div class="main">

        <div id="mind">

          <form method="GET" action="homepage.php">

            <textarea name="mind" cols="40" rows="5"></textarea>

            <input type="submit" name="post" value="Post">

          </form>

        </div>

        <div class="feed">

          <div class="posts">

            <div class="poster">

              <p><b>Poster</b></p>

            </div>

            <div class="post">

              <p>It give me immense pleasure To announce the arrival of happening to your college, Embrace..!</p>

            </div>

          </div>

        </div>

      </div>

    </div>

  </div>

</body>



</html>

body {

  margin: 0px;

  border: 1px solid black;

  display: inline-block;  /* new */

}



#head {

  text-align: center;

  background: linear-gradient(to right, cyan, purple);

  margin: 0px;

  padding: 20px;

  border: 1px solid black;

}



#head h1 {

  margin: 0px;

  font-family: 'Great Vibes', cursive;

  color: white;

  font-size: 40px;

}



.contianer {

  display: flex;

  flex-direction: column;

  justify-content: center;

  height: 100%;

}



.ops {

  display: flex;

  justify-content: center;

  border-bottom: 1px solid black;

  border-top: 1px solid black;

}



#list ul {

  list-style-type: none;

  margin: 0px;

  padding: 0px;

}



#list li {

  float: left;

  padding: 0px;

  margin: 0px;

}



#list li:hover {

  background-color: lightgrey;

}



#list {

  display: flex;

  justify-content: center;

  margin: 10px;

}



form {

  padding: 0px;

  margin: 0px;

}



.dhund {

  display: flex;

  justify-content: center;

  padding: 10px;

}



input[name="name"] {

  max-height: 37px;

  max-width: 400px;

  min-width: 200px;

  border-radius: 10px;

  font-size: 17px;

  border: 1px solid black;

  padding: 5px;

  margin: 5px;

}



input[name="search"] {

  background-color: rgb(183, 242, 184);

  font-size: 15px;

  border: 1px solid black;

  border-radius: 5px;

  color: black;

}



input[name="logout"],

input[name="chat"],

input[name="update"],

input[name="homepage"],

input[name="event"] {

  background-color: white;

  border: none;

  padding: 10px 19px;

}



input[name="logout"]:hover,

input[name="chat"]:hover,

input[name="update"]:hover,

input[name="homepage"]:hover,

input[name="event"]:hover {

  background-color: lightgrey;

}



.content {

  display: flex;

  flex-direction: row;

}



.sidebar {

  display: flex;

  flex-direction: column;

  border-right: 1px solid black;

  height: 100%

}



#image {

  margin: 2px;

  padding: 5px;

  display: flex;

  justify-content: center;

}



#image img {

  border: 1px solid black;

}



#upload {

  border-top: 1px solid black;

  margin: 2px;

  min-width: 250px;

}



#upload p {

  text-align: center;

}



#stupid {

  display: flex;

  justify-content: center;

  margin: 5px;

}



.material {

  margin: 20px;

  min-width: 400px;

  border: 1px solid black;

  border-radius: 10px;

  background-color: lightgrey;

}



.posts {

  border: 1px solid black;

  margin: 17px;

  margin-top: 80px;

  border-radius: 7px;

}



.feed {

  padding: 20px;

}



.post p {

  padding: 5px;

}



.poster {

  padding-left: 10px;

  border-bottom: 1px solid black;

}



.poster p {}



#matter p {

  text-indent: 30px;

}



#matter {

  border: 1px solid black;

  margin: 8px;

  background-color: white;

  border-radius: 20px;

  padding: 20px;

}



.main {

  display: flex;

  flex-direction: column;

  margin: 5px;

  width: 100%;

}





/*#mind

{

	display: flex;

	flex-direction: row;

	justify-content: center;

	border: 1px solid black;

	border-radius: 8px;

	background-color: lightgrey;

}*/



textarea[name="mind"] {

  border-radius: 10px;

  border: 1px solid black;

  font-size: 15px;

  padding: 10px 5px 10px 5px;

}



input[name="post"] {

  width: 120px;

  height: 50px;

  background-color: powderblue;

  font-size: 17px;

}

<!DOCTYPE html>

<html>



<head>

  <title>The Joint.</title>

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

  <link href="https://fonts.googleapis.com/css?family=Great+Vibes|Slabo+27px" rel="stylesheet">

</head>



<body>

  <div id="head">

    <h1>The Joint.</h1>

  </div>



  <div class="contianer">

    <div class="ops">

      <div id="list">

        <ul>

          <li>

            <form action="homepage.php" method="GET"><input type="submit" name="homepage" value="Homepage"></form>

          </li>

          <li>

            <form action="homepage.php" method="GET"><input type="submit" name="update" value="Update"></form>

          </li>

          <li>

            <form action="homepage.php" method="GET"><input type="submit" name="chat" value="Chat"></form>

          </li>

          <li>

            <form action="homepage.php" method="GET"><input type="submit" name="event" value="Your Events"></form>

          </li>

          <li>

            <form action="homepage.php" method="GET"><input type="submit" name="logout" value="logout"></form>

          </li>

        </ul>

      </div>

    </div>

    <div class="dhund">

      <form method="POST" action="homepage.php">

        <input type="text" name="name" placeholder="Search for People or things">

        <input type="submit" name="search" value="search">

      </form>

    </div>

    <div class="content">



      <div class="sidebar">

        <div id="visual">

          <div id="image">

            <img src="<?php echo $avatar ?>" width="200" height="250">

          </div>

          <div id="upload">

            <form action="homepage.php" method="POST" enctype="multipart/form-data">

              <p>Upload Pic:</p><input type="file" name="img"><br>

              <div id="stupid">

                <input type="submit" name="upload" value="Upload">

              </div>

            </form>

          </div>

        </div>

      </div>



      <div class="main">

        <div id="mind">

          <form method="GET" action="homepage.php">

            <textarea name="mind" cols="40" rows="5"></textarea>

            <input type="submit" name="post" value="Post">

          </form>

        </div>

        <div class="feed">

          <div class="posts">

            <div class="poster">

              <p><b>Poster</b></p>

            </div>

            <div class="post">

              <p>It give me immense pleasure To announce the arrival of happening to your college, Embrace..!</p>

            </div>

          </div>

        </div>

      </div>

    </div>

  </div>

</body>



</html>

answered Nov 19 at 12:47

Mr Lister

34.2k1072113

answered Nov 19 at 12:47

Mr Lister

34.2k1072113

answered Nov 19 at 12:47

Mr Lister

34.2k1072113

answered Nov 19 at 12:47

Mr Lister

34.2k1072113

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Argthtjtr