CODEWITHSUNDEEP
htmlcss
Lonely
Lonely

Reputation: 613

How to have a two headings in same line with css?

See this fiddle JSFiddle

CSS:

.containers {
width:100%;
height:auto;
padding:10px;
margin-bottom:0px;
}

#id4 {
float:right;
margin-right:0;
display:inline;
    border:5px solid red;
}

#id5 {
text-align:center;
    border:5px solid red;
}

HTML:

<div class='containers'>
<div id='id4'>
margin-right:10px;
</div>
<div id='id5'>
    center-text;
</div>

In this fiddle I want center-text to be center of the page, not at the center between left-border and float element.

Upvotes: 1

Views: 1971

Answers (2)

Harry
Harry

Reputation: 89780

The below is one possible option by adding position: absolute; right: 10px; to the id4 div. This will make the div always stay at 10px from the right margin. But it has to be noted that the element is no longer a float element.

Note: The texts would overlap if the result window is shrunk beyond a certain level. I will update the answer if and when I manage to find a fix for that.

.containers {
    width: 100%;
    height: auto;
    padding: 10px;
    margin-bottom: 0px;
    text-align: center;
    box-sizing: border-box;
}
#id4 {
    display: inline-block;
    position: absolute;
    right: 10px;
    border: 5px solid red;
}
#id5 {
    display: inline-block;
    border: 5px solid red;
}

Upvotes: 1

Leo T Abraham
Leo T Abraham

Reputation: 2437

.containers {
    width:100%;
    height:auto;
    padding:10px;
    margin-bottom:0px;
    text-align:center;
}

#id4 {
    float:right;
    margin-right:0;
    display:inline;
    border:5px solid red;
}
#id5 {
    margin: 0 auto;
    display:inline-block;
    border:5px solid red;
}

DEMO

Upvotes: 0

Related Questions