Display a new div in-line directly after content of parent div? - html

Question

I have a banner that's width is set to 100%.
I then have another div set at 30px nested within the main div placed at the end of the first div. This close-ban div has the background image of a close icon and the javascript is set so when a user hits the div the entire banner hides.
I want to position this close-bar div immediately after the text inside of the div labeled banner.
This is what it should look like
[this is a banner it has text inside of it [X]]
<div id="banner">this is a banner it has text inside of it<div id="close-ban"></div></div>

Answer 1

You can set float left for banner and float right for close-ban. Like this:
#banner {
width: 100%;
float: left;
}
#close-ban {
float: right;
}
<div id="banner">this is a banner it has text inside of it<div id="close-ban">close</div></div>
or create a container with 100% width and put inside it banner and close-ban divs, like this:
#container {
width: 100%;
}
#banner {
float: left;
}
#close-ban {
float: right;
}
<div id="container">
<div id="banner">this is a banner it has text inside of it <div id="close-ban">close</div></div>
</div>

Answer 2

You could consider making the close-ban a span element rather than a div element. That way it will be placed inline with your other HTML:
http://www.w3schools.com/css/css_inline-block.asp
(The span tag is formatted the same as an inline-block. You could alternatively add display:inline-block in the CSS for your close-ban)
Keep in mind that if your text takes up the width of your top ban, it will push the close-ban to the next line with the method above. To avoid this, you could alternatively look into positioning the close-ban relative to the screen or the banner: http://www.w3schools.com/cssref/pr_class_position.asp