CODEWITHSUNDEEP
htmlcss
codescribble
codescribble

Reputation: 67

Auto margin pushing p tag away

Created a wrapper div called top div, got a p tag called Title aligned to the left and another div called buttonCP containing 4 p tags, aligned to the center with margin 0 auto. Now I want a final p tag called Button5 aligned to the right within top div, just cant seem to do it. Inspecting element shows that buttonCP margin auto could be pushing the final p tag out of the wrapper div. Any idea how I can have Button5 on the same line as Title and buttonCP? Thanks in advance!

Here is jsfiddle link: https://jsfiddle.net/6r6jzypy/

<style> #topdiv {
background-color: #F0F0F0;
height: 40px;
width: 100%;
border: 2px solid #D8D8D8;
float:left;
}
p[name=heading] {
    margin: 0;
    font-weight: bold;
    padding: 10px 8px 6px 8px;
    float:left;
    font-size: 1.0em;
}
#Result {
    margin: 0;
    float: right;
}
.button1 {
    background-color: #D8D8D8;
    margin-top: 3px;
    float: left;
    padding: 6px 8px 6px 8px;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    border: 2px solid #D8D8D8;
    border-right: 1px;
}
.button2 {
    background-color: #D8D8D8;
    margin-top: 3px;
    float: left;
    padding: 6px 8px 6px 8px;
    border: 2px solid #D8D8D8;
    border-right: 1px;
}
.button3 {
    background-color: #D8D8D8;
    margin-top: 3px;
    float: left;
    padding: 6px 8px 6px 8px;
    border: 2px solid #D8D8D8;
    border-right: 1px;
}
.button4 {
    background-color: #D8D8D8;
    margin-top: 3px;
    float: left;
    padding: 6px 8px 6px 8px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    border: 2px solid #D8D8D8;
}
#buttonCP {
    height: 34px;
    width: 290px;
    margin: 0 auto;
}
</style>

<body>
    <div id="topdiv">
        <p name="heading">Title</p>
        <div id="buttonCP">
            <p class="button1">Button1</p>
            <p class="button2">Button2</p>
            <p class="button3">Button3</p>
            <p class="button4">Button4</p>
        </div>
        <p id="Result">Button5</p>
    </div>
</body>

Upvotes: 0

Views: 106

Answers (1)

ZEE
ZEE

Reputation: 5869

try this : 

<div id="topdiv">
<p name="heading">Title</p>
<p id="Result">Button5</p>  
<div id="buttonCP">
    <p class="button1">Button1</p>
    <p class="button2">Button2</p>
    <p class="button3">Button3</p>
    <p class="button4">Button4</p>
</div>


</div>

Live demo

Upvotes: 1

Related Questions