CODEWITHSUNDEEP
htmlcss
Susan Robinson
Susan Robinson

Reputation: 91

HTML & CSS Layout

I have tried coding the HTML layout in the image below, but as a result does not seem to be working correctly. Any help with the error would be appreciated.

HTML:

    <header>
       <h1>Header</h1>
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pharetra rutrum tem <br> por. Curabitur at rhoncus orci. Donec ante velit, scelerisque vitae tincidunt sit amet.</p>
    </header>
    <section>
       <h2>Heading</h2>
       <p>Lorem ipsum dolor sit amet, consectetur. <br> Curabitur at rhoncus orci. Lorem ipsumm.</p>
       <h2>Heading</h2>
       <p>Lorem ipsum dolor sit amet, consectetur. <br> Curabitur at rhoncus orci. Lorem ipsumm.</p>
    </section>

CSS:

body {
font-family: 'open sans';
text-align: center;
color: #333;
}

section {
display: block;
}

h1, h2 {
font-weight: 300;
}

Desired Layout:

enter image description here

Upvotes: 2

Views: 142

Answers (4)

Sirat Binte Siddique
Sirat Binte Siddique

Reputation: 453

this will work :

html : 

        <header>
           <h1>Header</h1>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pharetra rutrum tem <br> por. Curabitur at rhoncus orci. Donec ante velit, scelerisque vitae tincidunt sit amet.</p>
        </header>
        <section>
          <div class="left">
           <h2>Heading</h2>
           <p>Lorem ipsum dolor sit amet, consectetur. <br> Curabitur at rhoncus orci. Lorem ipsumm.</p>
          </div>
          <div class="right">
           <h2>Heading</h2>
           <p>Lorem ipsum dolor sit amet, consectetur. <br> Curabitur at rhoncus orci. Lorem ipsumm.</p>
          </div>
        </section>

css :

body {
font-family: 'open sans';
text-align: center;
color: #333;
}

section {
display: block;
}

h1, h2 {
font-weight: 300;
}
.left, .right{
  width: 50%;

}
.left{
 float: left; 
}
.right {
  float: right;
}

Upvotes: 0

Samuel Liew
Samuel Liew

Reputation: 79123

You will need to wrap your section into two div blocks:

<section>
    <div>
         <h2>Heading</h2>

        <p>Lorem ipsum dolor sit amet, consectetur.
            <br>Curabitur at rhoncus orci. Lorem ipsumm.</p>
    </div>
    <div>
         <h2>Heading</h2>

        <p>Lorem ipsum dolor sit amet, consectetur.
            <br>Curabitur at rhoncus orci. Lorem ipsumm.</p>
    </div>
</section>

So you can apply the following style:

section > div {
    display: inline-block;
    width: 45%;
}

http://jsfiddle.net/samliew/8XJ7F/3/

Upvotes: 0

Matyas
Matyas

Reputation: 13712

Wrap your content in left & right containers as:

   <header>
       <h1>Header</h1>
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pharetra rutrum tem <br> por. Curabitur at rhoncus orci. Donec ante velit, scelerisque vitae tincidunt sit amet.</p>
    </header>
    <section>
      <div class="left">
       <h2>Heading</h2>
       <p>Lorem ipsum dolor sit amet, consectetur. <br> Curabitur at rhoncus orci. Lorem ipsumm.</p>
      </div>
      <div class="right">
       <h2>Heading</h2>
       <p>Lorem ipsum dolor sit amet, consectetur. <br> Curabitur at rhoncus orci. Lorem ipsumm.</p>
      </div>
    </section>

And apply the following style

body {
font-family: 'open sans';
text-align: center;
color: #333;
}

section {
display: block;
}

h1, h2 {
font-weight: 300;
}
.left, .right{
  width: 50%;

}
.left{
 float: left; 
}
.right {
  float: right;
}

Working example: http://jsbin.com/aragem/1/

Upvotes: 0

Terry
Terry

Reputation: 66228

You should split your section into two, by headings, so that you can float them separately:

<header>
   <h1>Header</h1>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pharetra rutrum tem <br> por. Curabitur at rhoncus orci. Donec ante velit, scelerisque vitae tincidunt sit amet.</p>
</header>
<section>
   <article>
      <h2>Heading</h2>
      <p>Lorem ipsum dolor sit amet, consectetur. <br> Curabitur at rhoncus orci. Lorem ipsumm.</p>
   </article>
   <article>
      <h2>Heading</h2>
      <p>Lorem ipsum dolor sit amet, consectetur. <br> Curabitur at rhoncus orci. Lorem ipsumm.</p>
   </article>
</section>

And for your CSS:

body {
    font-family: 'open sans';
    text-align: center;
    color: #333;
}

section {
    display: block;
    overflow: hidden;
}

section > article {
    box-sizing: border-box;
    float: left;
    width: 50%;
}

h1, h2 {
    font-weight: 300;
}

I recommend using box-sizing: border-box because it will not break the layout when you add padding to the <article> element.

See fiddle here - http://jsfiddle.net/teddyrised/XPGb7/

Upvotes: 2

Related Questions