CODEWITHSUNDEEP
htmlcss
user1394925
user1394925

Reputation: 752

How to move a button to the right?

I have an application here wheree when user clicks on the plus button, it displays a modal window.

Problem is that I want the close button to appear on the right hand side of the window, on the same line as the "PREVIOUS QUESTIONS" heading. But it doesn't seem to be moving to the right at all. What am I doing wrong?

Below is the code:

HTML:

<div class="previouslink">
<h1>PREVIOUS QUESTIONS</h1>

<button type="button" id="close" onclick="return closewindow();">Close</button>
</div>

CSS:

#close{
    float:right;
    display:block;
    margin-right:0px;
    clear:left;
}

Upvotes: 1

Views: 53674

Answers (3)

drublic
drublic

Reputation: 993

As H1 is a block-element it takes all the width of the line on which it stands. This means that the elements that follow the H1-element cannot be on the same line, even if a float-property is applied to it.

You could either add

position: absolute;
top: 0;
right: 0;

to the #close element. Or add a negative margin for this element. Apart from that it's also possible to add a float: left; to the H1-element. Please be aware that this might cause certain problems with floating and line-breaks.

It is also possible to add the #close-element before the H1. This will prevent the H1 from taking up all space in it's line, but will recognize the close-element with its space.

Upvotes: 5

WojtekT
WojtekT

Reputation: 4775

There is an error in your QandATableStyle2.css file. Remove ; after:

.previouslink{
display:none;   
};

And it should work fine. ; character prevents #close definition from loading.

Upvotes: 5

cdhowie
cdhowie

Reputation: 168978

You could apply display: inline; to the <h1> element, which would allow the <button> (also inline) to be rendered on the same line.

Note that you will likely need to style the following element to clear: both; if you don't want the following content bleeding into the space between the header and the button.

See this example.

Upvotes: 0

Related Questions