CODEWITHSUNDEEP
htmlcssuser-interfacelayout
Kiran Cyrus Ken
Kiran Cyrus Ken

Reputation: 389

How do I align a div inside aside in relation to aside?

I have the layout which has a aside and div as below:

https://i.sstatic.net/pKjJ2.jpg

Inside the aside there is div, I want it to be aligned in relation to the aside's border. But if I set any margin or padding, the entire aside gets aligned in relation to the nav bar used above it.

Here is the code:

html,
body {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background-color: #dbe8ae;
}

.header {
  border-radius: 25px;
  height: 14%;
  width: 100%;
  background-color: #37412a;
}

.navigation-bar {
  width: 100%;
  margin-top: 5px;
  border-radius: 7px;
  background-color: #556e3c;
  font-family: "Arial Black", Gadget, sans-serif;
  font-size: 14px;
}

img.nav-action-image {
  width: 14px;
}

nav a {
  display: inline;
  text-decoration: none;
  float: left;
  color: #d1e231;
  padding: 14px 16px;
  border-right: 1px solid #bbb;
}

nav a:hover {
  background-color: #37412a;
  color: #bff000;
}

nav a.active {
  display: inline;
  background-color: #bab86c;
  color: #37412a;
}

nav:after {
  content: '';
  display: block;
  clear: both
}

.action-block {
  height: 80%;
  width: 20%;
  background-color: #37412a;
  margin-top: 5px;
}

.action-block>div.action-block-element-main {
  height: 40px;
  width: auto;
  background-color: #bab86c;
  color: #37412a;
  font-family: "Arial Black", Gadget, sans-serif;
  font-size: 14px;
  vertical-align: center;
  margin: 10px;
  border-bottom: 1px solid #bbb;
}
<body>
  <header class=header>
  </header>
  <nav class=navigation-bar>
    <a href="#menu"><img class="nav-action-image" src="menu_icon.png" /></a>
    <a class="active" href="#Summary">Summary</a>
    <a href="#Summary2">Preferences</a>
  </nav>
  <aside class="action-block">
    <div class="action-block-element-main">Some text</div>
  </aside>
</body>

As in the above code, margin does not help. I cannot get any gap between aside and the div content inside it. also, it is aligning in relation the nav bar. is there a way to fix this? what am I doing wrong? Who created these things this way?

Upvotes: 0

Views: 915

Answers (1)

strek
strek

Reputation: 1230

Does aligning the div inside aside in relation to aside mean this ? Add padding:desired amount to the .action-block

html,
body {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background-color: #dbe8ae;
}

.header {
  border-radius: 25px;
  height: 14%;
  width: 100%;
  background-color: #37412a;
}

.navigation-bar {
  width: 100%;
  margin-top: 5px;
  border-radius: 7px;
  background-color: #556e3c;
  font-family: "Arial Black", Gadget, sans-serif;
  font-size: 14px;
}

img.nav-action-image {
  width: 14px;
}

nav a {
  display: inline;
  text-decoration: none;
  float: left;
  color: #d1e231;
  padding: 14px 16px;
  border-right: 1px solid #bbb;
}

nav a:hover {
  background-color: #37412a;
  color: #bff000;
}

nav a.active {
  display: inline;
  background-color: #bab86c;
  color: #37412a;
}

nav:after {
  content: '';
  display: block;
  clear: both
}

.action-block {
  height: 80%;
  width: 20%;
  padding:10px;
  background-color: #37412a;
  margin-top: 5px;
}

.action-block>div.action-block-element-main {
  height: 40px;
  width: auto;
  color: #37412a;
  background-color: #bab86c;
  font-family: "Arial Black", Gadget, sans-serif;
  font-size: 14px;
  vertical-align: center;
  border-bottom: 1px solid #bbb;
}
.action-block-element-main
{
background-color:white;
}
<body>
  <header class=header>
  </header>
  <nav class=navigation-bar>
    <a href="#menu"><img class="nav-action-image" src="menu_icon.png" /></a>
    <a class="active" href="#Summary">Summary</a>
    <a href="#Summary2">Preferences</a>
  </nav>
  <aside class="action-block">
    <div class="action-block-element-main">Some text</div>
  </aside>
</body>

Upvotes: 1

Related Questions