HTML & CSS Layout - html

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:

Answer 1

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/

Answer 2

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/

Answer 3

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/

Answer 4

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