problem with stacking paragraphs using float in CSS_问答_开发者

problem with stacking paragraphs using float in CSS

开发者 https://www.devze.com 2023-03-20 13:17 出处：网络

I am building a webpage for a class I\'m taking on HTML and CSS. I have a div container that contains two paragraphs which I am trying to move into two columns.

I am building a webpage for a class I'm taking on HTML and CSS.

I have a div container that contains two paragraphs which I am trying to move into two columns.

I set up the columns using float. They did float correctly in creating two columns, however the text is all in the wrong order. There are blue headings that should be at the top and 4 paragraphs that should be set up as 2 in each column. Also, each identical paragraph is placed in the column with it's twin when it should REALLY be in the column with the other paragraph.

I'm new at this, and I'm so lost. I've played around with width and float and nothing seems to work. I just need to know what I can do that will create the two columns where the text will be correctly rendered.

here's my code. The id maincontent is the main gray box, then the p is for the paragraphs and h2 is for the headings:

#maincontent        {float: left; margin: 0px; padding: 0px; 
        width: 950px; border-left: 1pt solid #999999; 
        border-bottom: 1pt solid #999999; border-right: 1pt solid #999999;                      background-color: #E0E0E0}

#maincontent.cols   {width: 450px; float: left; margin: 5px; padding: 5px}

#maincontent p  {width: 450px; margin: 5px; float: left; padding: 5px; 
        text-align: left}

#maincontent h2 {width: 450px; float: left; color: #3280EE; font-size: 16px;                     m开发者_如何学编程argin: 5px; padding: 5px;     
        background: url(checkmark.jpg) no-repeat; text-align: right}

Here is the HTML:

<div class="cols"><!-- starts column container -->
<h2>Why Millions Turn to Us for Help</h2>
<p>Nulla eleifend consequat pharetra. Suspendisse potenti. Donec rutrum sagittis commodo. Proin <a href="#">nec massa</a> velit. Quisque volutpat, velit in sollicitudin varius, orci leo aliquet leo, ut posuere massa turpis sed erat. Duis vestibulum ipsum eu risus pretium et ullamcorper libero mattis.        </p>
<p>Maecenas sagittis ultricies congue. Nam non dui eu erat aliquam condimentum eget commodo mi. Donec vestibulum sem bibendum lectus tincidunt id rutrum quam egestas. <a href="#">Aenean ut nisi</a> dolor. In sit amet tortor sit amet leo ultrices cursus sed vel lacus. Suspendisse ultrices, sapien id condimentum condimentum.</p>

<div class="cols"><!-- starts column container -->
<h2>Why Millions Turn to Us for Help</h2>
<p>Nulla eleifend consequat pharetra. Suspendisse potenti. Donec rutrum sagittis commodo. Proin nec massa velit. Quisque volutpat, velit in sollicitudin varius, orci leo aliquet leo, ut posuere massa turpis sed erat. Duis vestibulum ipsum eu risus pretium et <a href="#">ullamcorper</a> libero mattis.        </p>
<p>Maecenas sagittis ultricies congue. Nam non dui eu erat aliquam condimentum eget commodo mi. Donec vestibulum sem bibendum lectus tincidunt id rutrum quam egestas. Aenean ut nisi dolor. In sit amet tortor sit amet leo ultrices cursus sed vel lacus. Suspendisse ultrices, sapien id condimentum condimentum.</p>
</div><!-- ends column container -->

As I said there are 4 paragraphs. As they are arranged in the HTML you can see how they are supposed to appear in the two columns. I am not familiar with jsfiddle, so I'm not sure about how to use it....

http://jsfiddle.net/DawK5/

<html>
<head>
    <style>
        body,html{ margin:0; padding:0; }
        #maincontent{ width:950px; margin:0 auto; border:1px solid #999; }
        .cols{ float:left; width:453px; padding:5px; margin:5px; }
    </style>
</head>
<body>
<div id="maincontent">
<div class="cols">
            <h2>Heading 1</h2>
    <p>content 1</p>
</div>
<div class="cols">
            <h2>Heading 2</h2>
    <p>content 2</p>
</div>      
</div>
</body>
</html>

Does this work?