HTML & CSS Layout

Question

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

What problem are you having? what desired effect do you want? — Kevin Lynch
– Kevin Lynch, Commented Apr 13, 2013 at 16:44

Terry · Accepted Answer · 2013-04-13 16:45:05Z

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/

Matyas · Accepted Answer · 2013-04-13 16:46:26Z

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/

Samuel Liew · Accepted Answer · 2013-04-13 16:54:31Z

0

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/

edited Apr 13, 2013 at 16:54

answered Apr 13, 2013 at 16:47

Samuel Liew

79.5k112 gold badges173 silver badges318 bronze badges

1 Comment

Terry Over a year ago

The disadvantage of not using float is that you will have a whitespace between the two <div> elements that are inline-block elements. If you use a width of 50%, the layout breaks. It can, of course, be circumvented with setting font-size: 0 on the <section> element and then redeclaring the desired font size in the children <div>.

Sirat Binte Siddique · Accepted Answer · 2015-10-18 06:37:13Z

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;
}

Collectives™ on Stack Overflow

HTML & CSS Layout

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related