CODEWITHSUNDEEP
htmlcssflexbox
Kleber Mota
Kleber Mota

Reputation: 9095

displaying block-level elements inline

Right now, I am trying to design a web page with the following structure:

<nav>
    <ul> ... </ul>
</nav>
<section class="main">
    <nav class="menu"> ... </nav>
    <div class="row">
        <div class="column"> ... </div>
        <div class="column"> ... </div>
    </div>
</section>

where the elements nav.menu and div.row should be displayed horizontally aligned, the first one occupying 25% of screen and the other one 75%.

I am using this css style right now:

.main {
    display: inline;
    align-items: flex-start;
}

.menu {
    background-color: silver;
    font-family: 'Ultra', serif;
    font-size: 24px;
    width: auto;
}

.menu ul {
    list-style-type: none;
}

.menu ul li {
    text-align: center;
    width: 120px;
}

.menu ul li a {
    text-decoration: none;
    color: white;
}

.menu ul li a:hover {
    background-color: lightsteelblue;
}

.row {
    display: inline;
}

but when i open the page in the browser, the elements are not being displayed like they supposed to be.

jsfiddle: https://jsfiddle.net/klebermo/y7nka4ez/

what i am missing here?

Upvotes: 1

Views: 299

Answers (2)

Nathaniel Flick
Nathaniel Flick

Reputation: 2963

Of course you can do this in flexbox but I still don't feel like we can leave floats behind just yet (blame this on companies that refuse to give their staff new browsers!), so my answer uses floats.

When you code, you should consider using a boilerplate that comes with a normalize reset like html5boilerplate, Foundation, Bootstrap or similar, something that gives you a container, rows and columns that you can use rather than making them yourself.

The drawback is code bloat, but then only use the parts of a framework you need and hide the rest.

* {
  box-sizing: border-box;
  }

.main {
    float: left;
  width 100%;
  clear: both;
  background: aqua;
}

.menu {
    background-color: blue;
    font-family: 'Ultra', serif;
    font-size: 24px;
  width: 25%;
  float: left;
}

.menu ul {
    list-style-type: none;
  margin: 0;
  padding: 0;
}

.menu ul li a,
.menu ul li {
    text-decoration: none;
    color: white;
}

.menu ul li a:hover {
    background-color: lightsteelblue;
}

.row {
    display: inline;
}

.content {
  width: 75%;
  float: left;
  background: red;
  }

.half {
  width: 50%;
  float: left;
  background: green;
  }
<section class="main">
    <nav class="menu">
    <ul>
      <li>Link</li>
      <li>Link</li>
      <li>Link</li>
      <li>Link</li>
      <li>Link</li>
      </ul>
  </nav>
    <div class="content">
        <div class="half">Content text with text so we can see it flowing downwards.</div>
        <div class="half">Content text with text so we can see it flowing downwards.</div>
    </div>
</section>

Upvotes: 1

Michael Benjamin
Michael Benjamin

Reputation: 372079

section.main {
  display: flex;
  height: 100px;
}
nav.menu {
  flex: 0 0 25%;
  background-color: lightgreen;
}
div.row {
  flex: 0 0 75%;
  background-color: orangered;
}
<section class="main">
  <nav class="menu"><code>nav.menu 25%</code></nav>
  <div class="row"><code>div.row 75%</code>
    <div class="column"></div>
    <div class="column"></div>
  </div>
</section>

Upvotes: 1

Related Questions