CODEWITHSUNDEEP
htmlcss
Andy Guo
Andy Guo

Reputation: 3

How can I make a horizontal bar that fills 100% of my main content?

This is what I am trying to make my webapp look like(adobe xd): Horizontal bar goes across main

This is my code so far:

@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');
body, html {
  height: calc(100% - 2em);
  margin: 0;
  font-family: 'Montserrat'
}
body {
    background: #1e5799; /* Old browsers */
    background: -moz-linear-gradient(45deg, #1e5799 0%, #0800e5 0%, #f700ff 99%, #f700ff 100%, #f700ff 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(45deg, #1e5799 0%,#0800e5 0%,#f700ff 99%,#f700ff 100%,#f700ff 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(45deg, #1e5799 0%,#0800e5 0%,#f700ff 99%,#f700ff 100%,#f700ff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#f700ff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    background-repeat: no-repeat;
    background-attachment: fixed;

}

main {
  background:#fff;
  padding: 1em 1.4em;
  box-shadow: .2em .2em .2em #6E6464;
  border: 5em solid transparent;

}

@media only screen and (min-width: 768px) {

body{
  display: grid;
  grid-template-columns: auto;
  padding: 2em;
  border: 1px solid transparent;

}

main {
  padding: 0em;
    background: white url('images/bg3.png') fixed no-repeat bottom right;
    background-size: 50%;
}
}

  #bar {
    box-sizing: border-box; width:100%;
   height: 35%; padding: 1em 4em; background: #FF11C0
  }
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="stylesheet2.css">
    <link rel="icon" href="images/favicon.png">
    <title>trackr app</title>
  </head>
<body>
  <main>
    <div id="bar"></div>

    <div id= "quoteDisplay">

    </div>
    <button onclick="newQuote()">Random Weather Tip</button>
    <script src="app.js"></script>


  </main>
</body>
</html>

This is producing this result: bar does not align nor stick to the top nor fill the entire width of main

I know how to fill the width of the whole page but how do I fill my main and stick it to the top? Any help would be appreciated, I am a freshman in high school and some times my brain cannot function. Thanks!

Upvotes: 0

Views: 209

Answers (2)

showdev
showdev

Reputation: 29168

The large transparent border on #main limits the width of #bar and moves it down from the top.
I removed it and made few other minor changes.
I also removed the media query for demonstration purposes.

body,
html {
  margin: 0;
  font-family: 'Montserrat';
  min-height: 100%;
}

body {
  background: #1e5799;
  background: -moz-linear-gradient(45deg, #1e5799 0%, #0800e5 0%, #f700ff 99%, #f700ff 100%, #f700ff 100%);
  background: -webkit-linear-gradient(45deg, #1e5799 0%, #0800e5 0%, #f700ff 99%, #f700ff 100%, #f700ff 100%);
  background: linear-gradient(45deg, #1e5799 0%, #0800e5 0%, #f700ff 99%, #f700ff 100%, #f700ff 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#f700ff', GradientType=1);
  background-repeat: no-repeat;
  background-attachment: fixed;
  padding: 2em;
}

main {
  box-shadow: .2em .2em .2em #6E6464;
  background: white url('https://picsum.photos/id/114/400/250') fixed no-repeat bottom right;
  min-height: 300px; /* Just for demo purposes */
}

#bar {
  padding: 1em 4em;
  background: #FF11C0
}
<main>
  <div id="bar"></div>
  <div id="quoteDisplay"></div>
  <button>Random Weather Tip</button>
</main>

Upvotes: 0

Alex Ding
Alex Ding

Reputation: 158

Your html layout is a little weird. Check this pen out. This is how I restructured your HTML (this is also much more standard). 

<head>
  <script src="app.js"></script>
</head>
<body>
  <div id="main">
    <div id="bar"></div>
  </div>
</body>

This allows your main block to take the correct proportion of space.

html, body {
  height: 100%;
  margin: 0;
}

And the rest is pretty straightforward. The #bar div is already on top by default. 

#main {
  width: 100%;
  height: 100%;
  background: black; 
}

#bar {
  width: 100%;
  height: 35%;
  background: white;
}

Upvotes: 1

Related Questions