I have a div that looks like this:
<div>
That's <div id="output"></div>
</div>
The "output" that is going into the innerHTML of that 2nd div is a single word, such that the contents of the main div looks like one of these, depending on what choices the user has selected elsewhere:
That's right!
That's good.
That's close.
The problem is, my output div is not outputting on the same line. So it looks like this
That's
right!
How can I make the contents of "output" always be on the same line as the other contents of the main div?
div is a block element rather than inline. You want to use a span instead so use
<span id="output"></span>
A Div is a block element, use a span instead. Or style your divs with float: left
<div>
That's <div id="output" style="display:inline"></div>
</div>
Related
I have the following html code
<div id='main'>
Question Title
<div id='tooltip'>?</div>
</div>
Question Title is centered inside of the main container. I want my tooltip div to appear right next to the centered text inside my main container, while the main container can be arbitrarily large. How can I achieve this? I found similar issues on SO but none of the solutions actually worked for my case
Change the display property of the #tooltip div to "inline-block". This will make it appear directly after the text on the same line
Use SPAN instead of DIV.
<div id='main'>
Question Title
<span id='tooltip'>?</span>
</div>
Here is the fiddle
Or keep the DIV but change its Display property to "inline-block"
Like this fiddle.
I have following code:
<div>
<div id="dynamic" style="float:left;height:50px;background-color:#aaa;">
floated block which will be dynamically increase
</div>
<div id="static" style="height:50px;background-color:#FC3;">
Hello guys
</div>
</div>
I want to move static div as dynamic div width changes. Above code works as I want but I don't know whether the above way is the right to do that?
Is floated div inside inline text the right way? Is that cross-browser?
Will this code affect anything else, like the content below it or moving below static div?
And why does floated div not move below inline content, rather aligns it with inline text?
You can use float:left for the <div id="static"> too. I don't see any issues until your dynamic div width + static div width reach the window width.
This >> http://jsfiddle.net/gxpBL/ is what I'm telling.
I want to to get the following result:
________________Title of page
So let's say the html markup is <h1>Title of page</h1> and h1 is set to width:100%and text-align:right, I want it only be underlined on the left side of the title.
Any clue how to accomplish that? I have tried to wrap the title in a <div>, give that a background of white and shift it a bit down, so it overlaps the bottom of the h1-box, however, I'm not sue whether this works 100% cross-browser.
alternative solution:
<div style="width:100%;float:left;border-bottom:1px solid">
<h1 style="float:right;background-color:white;padding:1px;position:relative;top:1px">Hola</h1>
</div>
http://jsfiddle.net/VMCax/1/
You can try this as long as the line is not crucial to display content as it has support on IE8+.
h1:before{content:"________________"}
jsfiddle here
Looks like what you are trying to do would be better achieved with a wrapper container and a float inside. Make the inner div (or floated h1) have a white background. Make the outer div have a repeated (repeat-y) background that is the same spacing as the line-height of the text div.
Make sure the wrapper div respects the floated div (either overflow:hidden or with a clear div at the end of the float.
This will give you the effect you are looking for and should work with multi-line titles as well.
I'd go with CSS generated content, with non-breaking spaces and underline : http://jsfiddle.net/JMVUa/1/
h1:before{
content:"\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0";
text-decoration: underline;
}
I have a div element that is defined on the top of the page and I have this another div element that is defined at the bottom of the page.... is there any way that I can define the first div element (at the top) as a child of the div element that is at the bottom.
The problem is I need a div in header in the header file (header.php) this div acts as a container for an JS, but once the data is loaded I want it to be displayed inside another div.
Would postponing the loading of JS till the middle section of page is advisable...
Yes: make the top div a child of the bottom div by placing the child within the markup of the parent, and use absolute positioning to move the child to the top.
No, because it's not a child of that DIV. If you want it to be a child, make it a child, and then alter it's position with CSS to be on the top of the page.
No, though you can move it with JavaScript after the second element loads.
By "child" do you mean simply appears inside, yet the HTML is defined at the top? If so, you could also possibly simply change the positioning via CSS.
Are you constrained to output the HTML for the first div at the top of the page for any reason? The real solution here is to simply output elements where you actually want them.
No idea why you would want to do that but this markup should suffice:
<div id="wrap">
<div id="main">
<!-- Insert content, push off the top with "margin-top:150px", etc. -->
</div>
<div id="foot">
<div id="head">
<!-- Insert header stuff, position with "positon:absolute", etc. -->
</div>
</div>
</div>
Tweak width, height, margin and padding of elements to taste.
I created the following wrapper div with a div inside it half the width to contain an image.
What I want is the text placed in the wrapper div to flow around the image div but it's either appearing on top of it or only to the side of it.
<div id="wrapper" class='span-8 last'>
<div id="image" class='span-4'>
</div>
</div>
Is there a change I could make to my Blueprint classes to get this to work?
Did you place the text correctly after the image?
<div id="wrapper" class='span-8 last'>
<div id="image" class='span-4'>
</div>
TEXT GOES HERE....
</div>
Well you haven't posted any css so we don't know for sure what attributes are already set. Leaving things as they are in your example, if you add a float:left; to the image div, the text will flow around it.
Check the style changes that the .span-4 makes. You might have to remove one of the declarations in there.
Couldn't you just create a separate CSS class for floating images or use an inline style that says "float:right" and whatever text-wrapping you want?
You might also have better luck getting your question answered on the Pro Webmasters Q&A site.