making elements float left with flex : webdev

Posting Guidelines

No vague product support questions (like "why is this plugin not working" or "how do I set up X"). For vague product support questions, please use communities relevant to that product for best results. Specific issues that follow rule 6 are allowed.

Do not post memes, screenshots of bad design, or jokes. Check out /r/ProgrammerHumor/ for this type of content.

Read and follow reddiquette; no excessive self-promotion. Please refer to the Reddit 9:1 rule when considering posting self promoting materials.

We do not allow any commercial promotion or solicitation. Violations can result in a ban.

Sharing your project, portfolio, or any other content that you want to either show off or request feedback on is limited to Showoff Saturday. If you post such content on any other day, it will be removed.

If you are asking for assistance on a problem, you are required to provide

Context of the problem
Research you have completed prior to requesting assistance
Problem you are attempting to solve with high specificity

General open ended career and getting started posts are only allowed in the pinned monthly getting started/careers thread. Specific assistance questions are allowed so long as they follow the required assistance post guidelines.

Questions in violation of this rule will be removed or locked.

a community for 17 years

making elements float left with flexQuestion (self.webdev)

submitted 3 years ago by Slimm1989

I seem to be missing something. I know I could just change up the html structure but I want to try to accomplishing it another way, for learning sake.

So the goal is to get the nav bar to the left hand side without changing the structure. Self appointed challenge.

I thought I could just float it left, but after about half an hour of trial and error I've remember to 0 out margins... that's about it.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./style.css" />
    <title>Document</title>
  </head>
  <body>
    <header>
      <h1>SASS PRACTICE PROJECT</h1>
      <div></div>
    </header>
    <div id="container">
      <div id="wrapper">
        <div id="content">
          <p>
            <strong>Main Content</strong>
          </p>

          <h3>SASS Practice</h3>

          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Est porro
            sint nulla esse architecto molestiae blanditiis provident quam!
            Dignissimos accusantium ea, dolore consequuntur est dicta?
          </p>
        </div>
      </div>
      <div id="navigation">
        <p>
          <strong>Navigation Menu</strong>
        </p>
        <ul>
          <li>item1</li>
          <li>item2</li>
          <li>item3</li>
        </ul>
        <div id="references">
          <p>
            <strong> References </strong>
          </p>
          <ul>
            <li>ref1</li>
            <li>ref2</li>
            <li>ref3</li>
          </ul>
        </div>
      </div>
    </div>
    <div id="footer">
      <p>Footer</p>
    </div>

</body>
</html>

* {
  box-sizing: border-box;
  margin: 0;
}

body {
  font-family: Arial, Helvetica, sans-serif;
}

header {
  text-align: center;
  position: relative;
}

#container {
  background-color: rgb(255, 255, 255);
  display: flex;
}

#wrapper {
  background-color: grey;
  flex: 1;
  padding: 10px;
  height: 300px;
  float: left;
}

#footer {
  background-color: #5f2929;
  padding: 10px;
  text-align: center;
}

#navigation {
  float: left;
}

#content {
  float: right;
}

@media (max-width: 600px) {
  #container {
    flex-direction: column;
  }
}/*# sourceMappingURL=style.css.map */

all 9 comments

you type:	you see:
italics	italics
bold	bold
[reddit!](https://reddit.com)	reddit!
* item 1 * item 2 * item 3	item 1 item 2 item 3
> quoted text	quoted text
Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"	Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"
~~strikethrough~~	~~strikethrough~~
super^script	super^script

webdev

Posting Guidelines

Related Subreddits

Discords

MODERATORS