Clever Geek Handbook

Side panel position

I'm trying to put a sidebar on the right side of my content, but I still want it to be in the same "box". See: enter image description here

As you can see in the picture on the right side, but this is not in the "content" field, and I would like it to be almost right below my menu. Please help. My code looks like this (just ignore the Danish comment that just notes):

  body {
    background: #98c8d7;
    width: 1000px;
    margin: auto;
    font-family: "Trebuchet ms", Verdana, sans-serif;
  }
  #header {
    background: #fff url(banner.jpg) no-repeat;
    margin: 10px 0 10px 0;
    padding: 8em 2em 1em 2em;
    text-align: center;
    border-radius: 15px;
    opacity: 0.8;
    border: 1px dotted #000
  }
  /*Dette formaterer menuen */
  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
  li {
    float: left;
  }
  a:link,
  a:visited {
    display: block;
    width: 312.5px;
    font-weight: bold;
    color: #000;
    background-color: #51a7c2;
    text-align: center;
    padding: 4px;
    text-decoration: none;
    text-transform: uppercase;
    border: 1px solid #91cfca;
    opacity: 0.8;
  }
  a:hover,
  a:active {
    background-color: #98c8d7;
  }
  #content {
    background: #b4cdd9;
    color: #000;
    padding: 1em 1em 1em 1em;
    top right bottom left
  }
  #tekst {
    background: #98c8d7;
    color: #000;
    opacity: 0.8;
    margin: 5px 0 5px 0;
    padding: 0.5em 1em 1em 1em;
    text-align: left;
  }
  #sidebar {
    background: #b4cdd9;
    color: #000;
    width: 320px;
    position: relative;
    float: right;
    margin: 5px 0 5px 0;
    padding: 0.5em 1em 1em 1em;
    text-align: left;
    border-style: outset;
    border-width: 3px;
    border-color: black;
  }
  a {
    color: #0060B6;
    text-decoration: none;
  }
  a:hover {
    color: #00A0C6;
    text-decoration: none;
    cursor: pointer;
  }
      

        
        
        
      

    
<!doctype html>

<head>
  <!-- Titel -->
  <title>IT-hjælp til ældre</title>
  <meta charset="utf-8">

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

</head>

<body>

  <!-- Denne div indeholder dit content, altså din brødtekst -->
  <div id="content">

    <!--Header. Indeholder banner -->
    <div id="header">
    </div>

    <!-- Menu -->
    <ul>
      <li><a href="forside.html">Forside</a>
      </li>
      <li><a href="priser.html">Priser</a>
      </li>
      <li><a href="kontakt.html">Kontakt</a>
      </li>
    </ul>


    <!-- Her kommer din brødtekst så -->
    <div id="tekst">
      <h1>Overskrift 1</h1>

      <p>Her kan du skrive, hvad du tilbuder, hvorfor, hvorledes, til hvem og anden info</p>

      <!-- Overskrift to. Der er flere former for overskrifter. H1 betegner en bestemt slags, H2 en mindre slags osv. Du kan godt bruge H1 flere gange -->
      <h2>Underoverskrift 1</h2>
      <p>Her kan du måske skrive lidt om dig selv og dine kvalifikationer?</p>
      <div id="sidebar">
        <h3>Leon Laksø</h3>
        <p>Så-og-så-mange år i tjeneste, certificeret bla bla, alt muligt andet shit her. Måske et billede hvor du ser venlig ud?</p>
        <p>Mail link kunne være her?</p>
      </div>
    </div>


  </div>


</body>

</html>
Run codeHide result


+3


source to share


3 answers


One quick solution is to change the html structure and move the sidebar as the first child of the div with id #tekst

:



body {
  background: #98c8d7;
  width: 1000px;
  margin: auto;
  font-family: "Trebuchet ms", Verdana, sans-serif;
}
#header {
  background: #fff url(banner.jpg) no-repeat;
  margin: 10px 0 10px 0;
  padding: 8em 2em 1em 2em;
  text-align: center;
  border-radius: 15px;
  opacity: 0.8;
  border: 1px dotted #000
}
/*Dette formaterer menuen */

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
li {
  float: left;
}
a:link,
a:visited {
  display: block;
  width: 312.5px;
  font-weight: bold;
  color: #000;
  background-color: #51a7c2;
  text-align: center;
  padding: 4px;
  text-decoration: none;
  text-transform: uppercase;
  border: 1px solid #91cfca;
  opacity: 0.8;
}
a:hover,
a:active {
  background-color: #98c8d7;
}
#content {
  background: #b4cdd9;
  color: #000;
  padding: 1em 1em 1em 1em;
  top right bottom left
}
#tekst {
  background: #98c8d7;
  color: #000;
  opacity: 0.8;
  margin: 5px 0 5px 0;
  padding: 0.5em 1em 1em 1em;
  text-align: left;
}
#sidebar {
  background: #b4cdd9;
  color: #000;
  width: 320px;
  position: relative;
  float: right;
  margin: 5px 0 5px 0;
  padding: 0.5em 1em 1em 1em;
  text-align: left;
  border-style: outset;
  border-width: 3px;
  border-color: black;
}
a {
  color: #0060B6;
  text-decoration: none;
}
a:hover {
  color: #00A0C6;
  text-decoration: none;
  cursor: pointer;
}
      

        
        
        
      

    
<body>
  <!-- Denne div indeholder dit content, altså din brødtekst -->
  <div id="content">
    <!--Header. Indeholder banner -->
    <div id="header"></div>
    <!-- Menu -->
    <ul>
      <li><a href="forside.html">Forside</a>
      </li>
      <li><a href="priser.html">Priser</a>
      </li>
      <li><a href="kontakt.html">Kontakt</a>
      </li>
    </ul>
    <!-- Her kommer din brødtekst så -->
    <div id="tekst">
      <div id="sidebar">
        <!-- move it here -->

        <h3>Leon Laksø</h3>

        <p>Så-og-så-mange år i tjeneste, certificeret bla bla, alt muligt andet shit her. Måske et billede hvor du ser venlig ud?</p>
        <p>Mail link kunne være her?</p>
      </div>
      <h1>Overskrift 1</h1>

      <p>Her kan du skrive, hvad du tilbuder, hvorfor, hvorledes, til hvem og anden info</p>
      <!-- Overskrift to. Der er flere former for overskrifter. H1 betegner en bestemt slags, H2 en mindre slags osv. Du kan godt bruge H1 flere gange -->

      <h2>Underoverskrift 1</h2>

      <p>Her kan du måske skrive lidt om dig selv og dine kvalifikationer?</p>

    </div>
  </div>
</body>
Run codeHide result


+1


source


Swapping in #tekskt

and #sidebar

around should be a major major change . I also add some aesthetic benefits.

Here's a Live Demo in action. :)

It will look like this:



body {
  background: #98c8d7;
  width: 1000px;
  margin: auto;
  font-family: "Trebuchet ms", Verdana, sans-serif;
}
#header {
  background: #fff url(banner.jpg) no-repeat;
  margin: 10px 0 10px 0;
  padding: 8em 2em 1em 2em;
  text-align: center;
  border-radius: 15px;
  opacity: 0.8;
  border: 1px dotted #000
}
/*Dette formaterer menuen */

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
li {
  float: left;
}
a:link,
a:visited {
  display: block;
  width: 312.5px;
  font-weight: bold;
  color: #000;
  background-color: #51a7c2;
  text-align: center;
  padding: 4px;
  text-decoration: none;
  text-transform: uppercase;
  border: 1px solid #91cfca;
  opacity: 0.8;
}
a:hover,
a:active {
  background-color: #98c8d7;
}
#content {
  background: #b4cdd9;
  color: #000;
  padding: 1em 1em 1em 1em;
  position: absolute;
}
#tekst {
  background: #98c8d7;
  color: #000;
  opacity: 0.8;
  margin: 5px 0 5px 0;
  padding: 0.5em 1em 1em 1em;
  text-align: left;
  position: relative;
}
#sidebar {
  background: #b4cdd9;
  color: #000;
  width: 320px;
  position: relative;
  float: right;
  z-index: 5;
  margin: 5px 0 5px 0;
  padding: 0.5em 1em 1em 1em;
  text-align: left;
  border-style: outset;
  border-width: 3px;
  border-color: black;
  margin: 1em;
}
a {
  color: #0060B6;
  text-decoration: none;
}
a:hover {
  color: #00A0C6;
  text-decoration: none;
  cursor: pointer;
}
      

        
        
        
      

    
<!-- Denne div indeholder dit content, altså din brødtekst -->
<div id="content">
  <!--Header. Indeholder banner -->
  <div id="header"></div>
  <!-- Menu -->
  <ul>
    <li><a href="forside.html">Forside</a>

    </li>
    <li><a href="priser.html">Priser</a>

    </li>
    <li><a href="kontakt.html">Kontakt</a>

    </li>
  </ul>
  <!-- Her kommer din brødtekst så -->
  <div id="sidebar">

    <h3>Leon Laksø</h3>

    <p>Så-og-så-mange år i tjeneste, certificeret bla bla, alt muligt andet shit her. Måske et billede hvor du ser venlig ud?</p>
    <p>Mail link kunne være her?</p>
  </div>
  <div id="tekst">

    <h1>Overskrift 1</h1>

    <p>Her kan du skrive, hvad du tilbuder, hvorfor, hvorledes, til hvem og anden info</p>
    <!-- Overskrift to. Der er flere former for overskrifter. H1 betegner en bestemt slags, H2 en mindre slags osv. Du kan godt bruge H1 flere gange -->

    <h2>Underoverskrift 1</h2>

    <p>Her kan du måske skrive lidt om dig selv og dine kvalifikationer?</p>
  </div>
</div>
Run codeHide result


0


source


What browser are you using? Working fine for me on firefox 33 and chrome 38.

JSFiddle

Try cleaning your float.

#tekst {
    background:#98c8d7;
    color:#000;
    opacity: 0.8;
    margin:5px 0 5px 0;
    padding:0.5em 1em 1em 1em;
    text-align:left;
    overflow: hidden; //*clears float*//
}
0


source






More articles:


All Articles