Kleber Mota Kleber Mota - 1 year ago 55
CSS Question

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?

Answer Source

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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download