CODEWITHSUNDEEP
htmlcsssidebar
Sophie G.
Sophie G.

Reputation: 31

Sidebar position

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

As you can see in the picture it's on the right side, but it is not in the 'content' box, and I would like it to be almost directly under my menu. Please help. My code looks like this (just ignore the danish commentary, that's 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>

Upvotes: 3

Views: 183

Answers (3)

EternalHour
EternalHour

Reputation: 8661

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

JSFiddle

Try clearing 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*//
}

Upvotes: 0

jbutler483
jbutler483

Reputation: 24559

Swapping your #tekskt and #sidebar around should be your main change. I've also adding a bit of margin for aesthetics.

Here is a Live Demo of it in action. :)

It will then look like:

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>

Upvotes: 0

Alex Char
Alex Char

Reputation: 33228

One quick solution is to change your html structure and move sidebar as first child of div wih 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>

Upvotes: 1

Related Questions