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.
Related
I have an issue with my CSS layout
I have a form that is contained in a 500 pixel fixed width. It is set to be centered in the page with margin auto;
Inside that div I made a table using div's. Since each div's that act as a table row have different height, I have used the overflow:hidden property. I did that to minimize the size of the form.
Inside that div I have 3 other divs that act like table data "td". They are floating inside the row.
What I am trying to achieve is to display another div on top of them all when there is an error in the form. Just like the one you see on Stackoverflow reminding you that you have code in your text that need to be set as code. The red div on the right. Now I am a bit stuck because I can't overflow that div to the sides.
So what other option do i have to set the height of the "row" div without using overflow:hidden. I dont want to use tables and the content is always changing.
Any solution is welcome.
Here is simple code so you get the picture;
<div class="row">
<div class="overflowing"></div>
<div class="float_left"></div><div class="float_left"></div> <div class="float_right"></div>
</div>
The overflowing div should not push the floating divs around and is not visible until I change it's property and fill it with content.
Use clearfix class with row if you are using bootstrap
<div class="row clearfix">
OR
<div class="clearfix"></div>
before end of row tag
If it is not using bootstrap
<div style="clear:both;"></div>
before end of row tag
`
<div class="float_left"></div><div class="float_left"></div> <div class="float_right"></div>
</div>`
I think it will work, and about the alternative to overflow use fixed height width thenoverflow:auto wolud be useful
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 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>
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.