CODEWITHSUNDEEP
htmlcss
Brad Williams
Brad Williams

Reputation: 35

Divs not aligning (CSS)

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.

Upvotes: 1

Views: 57

Answers (4)

Evgeny Lukiyanov
Evgeny Lukiyanov

Reputation: 488

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/

Upvotes: 0

nelek
nelek

Reputation: 4312

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.

Upvotes: 1

Qazazaz
Qazazaz

Reputation: 120

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

Upvotes: 0

Sinstein
Sinstein

Reputation: 909

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

Upvotes: 2

Related Questions