Breaking News: Grepper is joining You.com. Read the official announcement!

Flexible Grid Example

Add Answer

Jared Schwarz answered on October 26, 2022 Popularity 8/10 Helpfulness 1/10

answer Flexible Grid Example

related Flexible Grid CSS

related Flexible Grid HTML

Flexible Grid Example

Comment

HTML PORTION
<div class="container">
  <section>...</section>
  <aside>...</aside>
</div>

CSS PORTION
.container {
  width: 538px;
}
section,
aside {
  margin: 10px;
}
section {
  float: left;
  width: 340px;
}
aside {
  float: right;
  width: 158px;
}

Popularity 8/10 Helpfulness 1/10 Language whatever

Source: learn.shayhowe.com

Tags: grid whatever

Link to this answer
Share Copy Link

Contributed on Oct 26 2022

Jared Schwarz

0 Answers Avg Quality 2/10

Closely Related Answers

Flexible Grid CSS

Comment

1body {
  font: 600 14px/24px "Open Sans", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", Sans-Serif;
}
h1 {
  color: #9799a7;
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 6px;
}
.container:before,
.container:after {
  content: "";
  display: table;
}
.container:after {
  clear: both;
}
.container {
  background: #eaeaed;
  margin-bottom: 24px;
  *zoom: 1;
}
.container-75 {
  width: 75%;
}
.container-50 {
  margin-bottom: 0;
  width: 50%;
}
.container,
section,
aside {
  border-radius: 6px;
}
section,
aside {
  background: #2db34a;
  color: #fff;
  margin: 1.858736059%;
  padding: 20px 0;
  text-align: center;
}
section {
  float: left;
  width: 63.197026%;
}
aside {
  float: right;
  width: 29.3680297%;
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

Popularity 10/10 Helpfulness 1/10 Language css

Source: learn.shayhowe.com

Tags: css

Link to this answer
Share Copy Link

Contributed on Oct 26 2022

Jared Schwarz

0 Answers Avg Quality 2/10

Flexible Grid HTML

Comment

1<h1>100% Wide Container</h1>

<div class="container">
  <section>Section</section>
  <aside>Aside</aside>
</div>

<h1>75% Wide Container</h1>

<div class="container container-75">
  <section>Section</section>
  <aside>Aside</aside>
</div>

<h1>50% Wide Container</h1>

<div class="container container-50">
  <section>Section</section>
  <aside>Aside</aside>
</div>
2
3
4
5
6
7
8
9
10
11
12
13

Popularity 7/10 Helpfulness 1/10 Language html

Source: learn.shayhowe.com

Tags: grid html

Link to this answer
Share Copy Link

Contributed on Oct 26 2022

Jared Schwarz

0 Answers Avg Quality 2/10

Flexible Grid Example

Contents

More Related Answers

Flexible Grid Example

Closely Related Answers

Flexible Grid CSS

Flexible Grid HTML

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.