Need help fixing placement of content

Question

I need help with my contentbox. It was placed right below my header before but then I replaced the font of the title for my webpage in the header and for some reason this caused the content to fall down far below my header although this new font actually takes up even less space than the previous one and I have used the inspect-element on the webpage and nothing is in the way of content other than the box-<div>.

That content is inside of in my HTML so it wouldn’t make sense for the box-<div> to push content down, I think.

#content {
  font-size: 16px;
  display: inline-block;
  margin-left: 30px;
  font-family: "Times New Roman", Times;
  text-align: center;
  background-color: #1A1A1A;
  margin: 30px;
  width: 730px;
  color: #F1F1F1;
  float: right;
}

header {
  margin: 0 auto;
  color: #F1F1F1;
}

#titel {
  float: right;
  font-size: 70px;
  font-family: 'Stalemate', cursive;
  padding: 48px;
}

.box {
  width: 1000px;
  margin: auto;
}

<!DOCTYPE html>
<html>

<head>
  <title> Page </title>
  <link rel="stylesheet" type="text/css" href="css/style.css" />
  <link href="https://fonts.googleapis.com/css?family=Stalemate" rel="stylesheet">
  <meta charset="utf-8">
</head>

<body>
  <div class="box">
    <header>
      <img src="#/#.png" alt="#">
      <div id="titel">Page</div>
    </header>
    <aside>
      <nav>
        <ul>
          <li>
            <a href="#.html" class="button">#</a></li>
          <li>
            <a href="#.html" class="button">#</a></li>
          <li>
            <a href="#.html" class="button">#</a></li>
          <li>
            <a href="#.html" class="button">#</a></li>
          <li>
            <a href="#.html" class="button">#</a></li>
          <li>
            <a href="#.html" class="button">#</a></li>
        </ul>
      </nav>
    </aside>
    <div id="content">
      <h1>Title</h1>
      <p>Text.</p>
      <h2>Title</h2>
      <div id="img-wrapper">
        <div class="img-box">
          <a href="#.html"><img src="#/#.jpg" alt="#"></a>
          <p> <b>Text</b> </p>
        </div>
        <div class="img-box">
          <a href="#.html"><img src="#/#.jpg" alt="#"></a>
          <p> <b>Text</b> </p>
        </div>
        <div class="img-box">
          <a href="#.html"><img src="#/#.jpg" alt="#"></a>
          <p> <b>Text</b> </p>
          <div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <footer>&#169;Text</footer>
</body>

</html>

Yes I am aware of that, I made it that way for the purpose of posting it online instead of posting it with all my real links and stuff......... — mandylandy, Jan 03 '18 at 21:16
Well this isn't relevant anyway because all my links work as they should on my page and my question was about the placement of content and not about my links but thanks anyway. — mandylandy, Jan 03 '18 at 21:24
well am pretty sure it's floating issue as you are not clearing any float :) so am gonna mark as duplicated ... — Temani Afif, Jan 03 '18 at 21:26
This is kind of relevant, since you need to eliminate every issue that isn’t related to your actual problem when posting a [mcve]. — Sebastian Simon, Jan 03 '18 at 21:27
Possible duplicate of [Floated elements of variable height push siblings down](https://stackoverflow.com/questions/15098223/floated-elements-of-variable-height-push-siblings-down) — Temani Afif, Jan 03 '18 at 21:27
and as @Xufox said, you need to re-create a code where we can see the issue not simply create a code — Temani Afif, Jan 03 '18 at 21:29
I have no idea what any of this means this is my code I don't know how its so hard to see what the problem could be just because the links aren't working in this code and also eliminate every issue that isn't related what is that I have to show the whole code because otherwise nobody can tell what the issue could be and I don't know what float problems is about my floats work well I need to move content UP not to the side and padding or margin don't work either it refuses to push up content. — mandylandy, Jan 03 '18 at 21:40
first in your code there is image missing, and you cannot tell us that this is not important as image take space and can have impact. Second you need to show us the issue which means how it looks good and when you change something how it looks after so we can see the difference and understand. — Temani Afif, Jan 03 '18 at 22:28
Well the images are all the size of 160x106 and then the links are to bigger versions of the images which are 670x456 and I haven't specified this in my code anyway. I really just need to know how to get the content to lie closer to the header instead of at the bottom of the page. Like there is code for that? — mandylandy, Jan 04 '18 at 00:31

Need help fixing placement of content

0 Answers0