Divs not aligning (CSS)

Question

I am having extreme difficulty organizing two divs.

I have a footer, which includes two paragraphs. I want paragraph 1 hugging the left border of the footer div, and I want paragraph 2 hugging the right border of the footer div, AND these paragraphs must be on the same line.

My problem is that my divs are behaving oddly.

I have tried floating and giving widths but nothing seems to work, the paragraphs seem to keep piling on top of eachother.

Does anybody know how to resolve this? I just want to know how to write 2 paragraphs out on the same line hugging opposite borders.

HTML:

<div id='container'>
   <div id='footer'>
        <div id="errors">
          <p>paragraph 1</p>
        </div>
        <div id="other">
          <p>paragraph 2</p>
        </div>
    </div>
</div>

CSS:

#container
{
   width:90%;
   margin:auto;
   background-color:#F6F4F1;
   border: 5px solid #00b4b4;
   padding:0;
   border-radius: 25px;
}

#footer
{
   width:100%;
   bottom:0;
   color:#838B8B;
   font-family:verdana;
}

#errors
{
   margin-left:4.5%;
   text-align:left;
   color:red;
}

#other
{
   text-align:right;
   margin-right:3%;
   display:inline-block;
}

JS FIDDLE which shows how my code is behaving oddly.

score 2 · Accepted Answer · edited May 23 '17 at 12:32

2

I have made changes to your fiddle https://jsfiddle.net/4vuywmn2/1/

You must float the errors div to the left and the other div to right and you must clear after the container around them closes.

To understand why you need to clear I suggest you read this answer

edited May 23 '17 at 12:32

Community

1
1

answered Aug 20 '15 at 19:28

Sinstein

887
11
42

score 1 · Answer 2 · answered Aug 20 '15 at 19:29

Is this what You want :

#container
{
width:90%;
margin:auto;
background-color:#F6F4F1;
border: 5px solid #00b4b4;
padding:0;
border-radius: 25px;
}

#footer
{
width:100%;
bottom:0;
color:#838B8B;
font-family:verdana;
}

#errors
{
margin-left:4.5%;
text-align:left;
color:red;
display:inline-block;
    float:left;
}

#other
{
text-align:right;
margin-right:3%;
display:inline-block;
    float:right;
}

<div id="container">

<div id='footer'>
 
   <div id="errors">
       <p>Paragraph 1</p>
   </div>
   <div id="other">
       <p>Paragraph 2</p>
   </div>
    <div style="clear:both;"></div>
   </div>
    
</div>

You have to add display:inline-block; for error class, and using float : left for error, and right for other. And, on end, after other, You have to add one more div with clear:both;, how above div float will be cleared.

score 0 · Answer 3 · answered Aug 20 '15 at 19:29

Try float and position attributes like this...

 #container
    {
    width:90%;
    margin:auto;
    background-color:#F6F4F1;
    border: 5px solid #00b4b4;
    padding:0;
    border-radius: 25px;
    }

    #footer
    {
    width:100%;
    bottom:0;
    color:#838B8B;
    font-family:verdana;
    }

    #errors
    {
    margin-left:4.5%;
    text-align:left;
    color:red;
    float:left;
    position:absolute;
    left:0px;
    }

    #other
    {
    text-align:right;
    margin-right:3%;
    display:inline-block;
    float:right;
    position:absolute;
    right:0px;
    }

you may change the value of left and right pixel value according to your needs... — Qazazaz, Aug 20 '15 at 19:30

score 0 · Answer 4 · answered Aug 20 '15 at 19:31

try this mate, is this what you want:

#footer
{
height: 100px;
width:100%;
bottom:0;
color:#838B8B;
font-family:verdana;
}

#errors
{
float: left;
margin-left:4.5%;
text-align:left;
color:red;
}

#other
{
    float: right;
text-align:right;
margin-right:3%;
display:inline-block;
}

https://jsfiddle.net/4vuywmn2/5/

Divs not aligning (CSS)

4 Answers4