CODEWITHSUNDEEP
htmlcss
SihwanLee
SihwanLee

Reputation: 169

How do you align two divs up and down with a <aside> on the right?

Hi guys I would like to ask something,

I'm trying to find a solution to a div and aside template structure. So what I want to make the template look like is this: enter image description here

and the code that I have looks like this:

<main id ="main" role="main">
    <div id="main-inner" class="clearfix">
        <div id="content">...</div>
        <div id="bottom-content" class="clearfix">...</div>
        <aside id="sidebar" class="sidebar lts-narrow">...</aside>
    </div>
</main>

but how to do this? I want the up and bottom's divs to have a ratio of height as something like 8:2

Upvotes: 1

Views: 2874

Answers (3)

tacoshy
tacoshy

Reputation: 13002

a CSS-Grid is what you actually looking for. For that your <aside> needs to be turned into a div. Then the div #main-inner needs to eb set to a grid with display: grid; the rest is simple configuration.

body {
  background-color: blue;
  padding: 3px;
  margin: 0;
}

#main-inner {
  display: grid;
  grid-template-columns: 8fr 2fr;
  grid-auto-rows: auto;
  grid-gap: 3px;
  min-height: calc(100vh - 6px);
}

#main-inner div {
  background-color: white;
  padding: 5px;
}

#sidebar {
  grid-row: 1 / span 2;
  grid-column: 2 / 3;
<main id ="main" role="main">
  <div id="main-inner" class="clearfix">
    <div id="content">Content</div>
    <div id="bottom-content" class="clearfix">Bottom-Content</div>
    <div id="sidebar" class="sidebar lts-narrow">Sidebar</div>
  </div>
</main>

Upvotes: 1

MatHatrik
MatHatrik

Reputation: 764

You can find your answer to your solutions here : Stackoverflow Solution 1

    <html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
</head>
<body>
    <div class="container" role="main">
      <div class="row">
          <div class="col-sm-8">
              <div class="row">
                  <div class="col-sm-4">1</div>
                  <div class="col-sm-4">2</div>
                  <div class="col-sm-4">3</div>
                  <div class="col-sm-4">4</div>
                  <div class="col-sm-4">5</div>
                  <div class="col-sm-4">6</div>
              </div>
          </div>
        <div class="col-sm-4">
          <div class="row">Nav</div>
          <div class="row">Nav</div>
          <div class="row">Nav</div>
          <div class="row">Nav</div>
          <div class="row">Nav</div>
        </div>
      </div>
    </div>
</body>
</html>

Upvotes: 1

Kiran Mistry
Kiran Mistry

Reputation: 2725

Here is your Solution With HTML and CSS only no Bootstrap

You can use grid for your UI

Live Preview

html, body, .grid-container { height: 100%; margin: 0; }

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 0px 0px;
  grid-template-areas:
    "Div Div Div aside"
    "Div Div Div aside"
    "Div- Div- Div- aside";
}

.Div { grid-area: Div; }

.Div- { grid-area: Div-; }

.aside { grid-area: aside; }


/* For presentation only, no need to copy the code below */
.grid-container * {
  border: 1px solid red;
  position: relative;
}

.grid-container *:after {
  content:attr(class);
  position: absolute;
  top: 0;
  left: 0;
}
<div class="grid-container">
  <div class="Div"></div>
  <div class="Div-"></div>
  <div class="aside"></div>
</div>

Upvotes: 2

Related Questions