CODEWITHSUNDEEP
htmlcss
Markeee
Markeee

Reputation: 573

Using floats to create two columns - not working

I have a lot of content inside my <main> element:

<main>
  <h2>Sub heading</h2>
  <p>Paragraph of text</p>
  <h2>Sub heading</h2>
  <p>Paragraph of text</p>
  <h2>Sub heading</h2>
  <p>Paragraph of text</p>
</main>

I want to create the look of a two column layout inside the <main> element, using the following CSS:

main {
  overflow:auto;
  }

h2 { 
    float:left;
    width:50%;
    }

p { 
    float:right;
    width:50%;
    }

I was expecting the h2's to align with the top of the paragraphs. But they don't. The second heading doesn't align with the second paragraph and so they all go out of order. See image.enter image description here

How do I resolve this? Or do I have to put each H2 and corresponding text into row of divs, and inside each row a left div and a right div?

Upvotes: 1

Views: 249

Answers (2)

dave008
dave008

Reputation: 442

You have differents options there:

1- add clear: both or clear: right to h2 element.

2- add a div wrapper for each row

.clearfix{
  clear: both;
}
<div class="clearfix">
<h2>Sub heading</h2>
  <p>Paragraph of text</p>
</div>

3- Add clear after the wrapper div (this is how to do it twitter-bootstrap)

.clearAfter:after{
  clear : both;
  display: block;
  content: '';
}
<div class="clearAfter">
<h2>Sub heading</h2>
  <p>Paragraph of text</p>
</div>
<div class="clearAfter">
<h2>Sub heading</h2>
  <p>Paragraph of text</p>
</div>
<div class="clearAfter">
<h2>Sub heading</h2>
  <p>Paragraph of text</p>
</div>

I prefer the third option beacuse you can change the inner content without destroy the layout.

Upvotes: 3

Joseph Marikle
Joseph Marikle

Reputation: 78520

You need to clear the float with every new heading. You can do that by adding clear:right; (or clear:both;) to your h2 rule.

main {
    overflow:auto;
}

h2 { 
    float:left;
    width:50%;
    clear:right;
}

p { 
    float:right;
    width:50%;
}
<main>
  <h2>Sub heading</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <h2>Sub heading</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <h2>Sub heading</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</main>

Upvotes: 1

Related Questions