CODEWITHSUNDEEP
htmlcss
Makhlo
Makhlo

Reputation: 45

How to get the content section to top?

I try to layout my html page and get the content section to the right at top.

With:

float: right; >> the content section moves to the right, but not at top of the page.

float: top; >> the content section moves back to the left.

See screenshot for illustration!

enter image description here

    form.contact{
      margin: 1% 1.5%;
      padding: 5px;
      border-style: solid;
      width: 37.5%;
      hight: auto;
    }
    #content{
      float: right;
      padding: 10px;
      border:1px solid red;
      width: 50%;
      hight: auto;
    }
    form {
      float: left;
      margin: 1% 1.5%;
      width: 63%;
    }
    nav{
      float: left;
      margin: 0 1.5%;
      width: 63%;
    }
    footer{
      float: left;
      margin: 1% 1.5%;
      width: 37.5%;
      border-style: solid;
    }
        <form class="contact">
          <label>Contact</label></br></br>
          First name:
          <input type="text" name="firstname" value="Your name please?">
          <br><br>
          Email:
          <input type="text" name="lastname" value="Your email please?">
          <br><br>
          <input type="submit" value="Press the button">
        </form>
        <nav>
           <a href = #>Just Me</a><br>
           <a href = #>Portfolio</a>
        </nav>
        <section id = "content"><h2><strong>Content section</strong></h2></section>
        <footer>
          <label>Socializing</label>
        </footer>

Upvotes: 0

Views: 959

Answers (6)

G-Cyrillus
G-Cyrillus

Reputation: 105863

you may also use flex (while grid starts to show up) and order to .. reorder your grid :)

example:

/* FLEX UPDATE*/
body {
  display:flex;
  flex-wrap:wrap;
  }
#content{
  order:-1;
  }
form {
  order:-2
    }
/*END  FLEX UPDATE*/
form.contact {
  margin: 1% 1.5%;
  padding: 5px;
  border-style: solid;
  width: 37.5%;
  hight: auto;
}
#content {
  float: right;
  padding: 10px;
  border: 1px solid red;
  width: 50%;
  hight: auto;
}
form {
  float: left;
  margin: 1% 1.5%;
  width: 63%;
}
nav {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
footer {
  float: left;
  margin: 1% 1.5%;
  width: 37.5%;
  border-style: solid;
}
  
<form class="contact">
  <label>Contact</label>
  </br>
  </br>
  First name:
  <input type="text" name="firstname" value="Your name please?">
  <br>
  <br>Email:
  <input type="text" name="lastname" value="Your email please?">
  <br>
  <br>
  <input type="submit" value="Press the button">
</form>
<nav>
  <a href=#>Just Me</a>
  <br>
  <a href=#>Portfolio</a>
</nav>
<section id="content">
  <h2><strong>Content section</strong></h2>
</section>
<footer>
  <label>Socializing</label>
</footer>

Upvotes: 1

ADH - THE TECHIE GUY
ADH - THE TECHIE GUY

Reputation: 4373

it is very important to position the elements inside html code.here your problem can be simply solved by change the position of your section#content to just below of form#contact on top of the nav.

form.contact{
  margin: 1% 1.5%;
  padding: 5px;
  border-style: solid;
  width: 37.5%;
  height: auto;
  float:left;
}
#content{
  float: right;
  padding: 10px;
  border:1px solid red;
  width: 50%;
  height: auto;
}
form {
  float: left;
  margin: 1% 1.5%;
  width: 63%;
}
nav{
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
footer{
  float: left;
  margin: 1% 1.5%;
  width: 37.5%;
  border-style: solid;
}
<html>
<head>
<title>title</title>
</head>

<body>
    <form class="contact">
      <label>Contact</label><br/><br/>
      First name:
      <input type="text" name="firstname" value="Your name please?">
      <br><br>
      Email:
      <input type="text" name="lastname" value="Your email please?">
      <br><br>
      <input type="submit" value="Press the button">
    </form>
   <section id = "content"><h2><strong>Content section</strong></h2></section>
    <nav>
       <a href = #>Just Me</a><br>
       <a href = #>Portfolio</a>
    </nav>
   
    <footer>
      <label>Socializing</label>
    </footer>
  </body>
 </body>
</html>

Upvotes: 0

Mohit Yadav
Mohit Yadav

Reputation: 471

Please put your content section above your form and set css for content float:right;
and this will put your content to right and the form below this will be shifted above.

Upvotes: 1

Jay
Jay

Reputation: 165

<section id = "content"><h2><strong>Content section</strong></h2></section>
    <nav>
       <a href = #>Just Me</a><br>
       <a href = #>Portfolio</a>
    </nav>

Interchanging section and nav will also solve your problem.

Upvotes: 2

Sumesh S
Sumesh S

Reputation: 758

Adding position to the div#content can also make the content go right....

body {
  position: relative;
}
form.contact {
  margin: 1% 1.5%;
  padding: 5px;
  border-style: solid;
  width: 37.5%;
  hight: auto;
}
#content {
  border: 1px solid red;
  display: block;
  float: right;
  padding: 10px;
  position: absolute;
  right: 10px;
  top: 10px;
  width: 50%;
}
form {
  float: left;
  margin: 1% 1.5%;
  width: 63%;
}
nav {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
footer {
  float: left;
  margin: 1% 1.5%;
  width: 37.5%;
  border-style: solid;
}
<html>

<head>
  <title>title</title>
</head>

<body>
  <form class="contact">
    <label>Contact</label>
    </br>
    </br>
    First name:
    <input type="text" name="firstname" value="Your name please?">
    <br>
    <br>Email:
    <input type="text" name="lastname" value="Your email please?">
    <br>
    <br>
    <input type="submit" value="Press the button">
  </form>
  <nav>
    <a href=#>Just Me</a>
    <br>
    <a href=#>Portfolio</a>
  </nav>
  <section id="content">
    <h2><strong>Content section</strong></h2>
  </section>
  <footer>
    <label>Socializing</label>
  </footer>
</body>

</html>

Upvotes: 2

Krash
Krash

Reputation: 2287

<html>
<head>
<title>title</title>
</head>

<body>
    <section id="content" style="float:right;"><h2><strong>Content section</strong></h2></section>
    <form class="contact">
      <label>Contact</label></br></br>
      First name:
      <input type="text" name="firstname" value="Your name please?">
      <br><br>
      Email:
      <input type="text" name="lastname" value="Your email please?">
      <br><br>
      <input type="submit" value="Press the button">
    </form>
    <nav>
       <a href = #>Just Me</a><br>
       <a href = #>Portfolio</a>
    </nav>
    <footer>
      <label>Socializing</label>
    </footer>
  </body>
 </body>
</html>

Shift the content section above the form and add float right for the type of visual effect you want.

This would effectively align the content section to the right and since it would be above other content, it will be automatically be on the top right.

Upvotes: 2

Related Questions