float right without text coming up in line or overlapping - html

I have used float: right; to float a whole paragraph to the right - I am highlighting bits of text with a background & border. My problem is that the text below then moves up and wraps to the left of the object (paragraph) that I've floated right. position: absoloute; right:0px; doesn't work as it overlaps.
So my question is, how do I float it right, but ensure the text below stays below?
CSS:
.fcsi {
background: #1E73BE;
padding:20px;
color: white;
border: 2px solid #1E73BE;
border-radius: 25px;
float: right;
}
I've just used a simple div class in HTML around the text.
<div class="fcsi">
TEXT
</div>
Any help much appreciated on this.
After this, I am looking at including an image inside the background & border, aligned top-right or bottom-right. I think I cannot do this with CSS though and need to re-enter the image with HTML each time?

Below the floated paragraph you could add:
<div style="clear:both;height:1px"></div>

Related

How to make text in one element appear inline with text in another element?

I'm having an issue with css trying to get the text of one div to be floated left on another div with the text displayed as in the screen shot. I cannot simply move the text because of a complex wordpress theme issue.
I've tried making the top div display:inline; and flex. Then floating the bottom div left and combinations of this for several hours, this leads to my question below.
Is it even possible to display a div like this?
Note that the "content here" text needs to be floated left on the "more text".
Here is a screenshot of how I want the layout:
Settings both divs to display: inline; should be all it takes. You don't need floats or flex-layouts. (See the snippet below).
I highly recommend studying the CSS Box Model in greater depth:
https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model
.wrapper {
width: 150px;
}
.more-text,
.content-text {
display: inline;
}
.more-text {
background: green;
}
.content-text {
background: red;
color: #fff;
}
<div class="wrapper">
<div class="more-text">
Random text here More text
</div>
<div class="content-text">
content text Random text here
</div>
</div>

About css float left for div1, the appearance of div2?

This is the html code.
<div id="sidebar1">
sidebar1
</div>
<div id="sidebar2">
sidebar2
</div>
This is the css code for the html.
div {
width: 100px;
height:100px;
border-style: solid; border-width: 1px 1px 1px 1px;
}
div#sidebar1 {
float: left;
}
The presentation of it looks like below in my latest firefox.
Why was the text 'sidebar2' not hidden by the div1?
The original html looked like below.
In my opinion, due to the float left, the entire div2 will be overlapped by div1 including the text in div2 like below.
the below picture is the moment when I hover to the div2 in firebug. Obviously, the text 'siderbar2' seems depart from the div2. why?
To get the problem, you need to understand that the box is not the content.
From W3C wiki:
Each rendered line is enclosed in a separate line box.
You make #sidebar1 floating, so you put it out of the flow
Now, #sidebar2 box can take its place
But, #sidebar2's content (aka. first line box) is different from #sidebar2 box, and was pushed down by #sidebar1
To avoid this kind of behavior, you can add overflow: hidden on #sidebar2, or better: float: left.
Many people doesn't understand float and don't think it put the element out of the flow. The way we use it usually makes us to think it simply "puts elements next to each other". And when we face an "issue", we solve it without understanding it.
This property's name is float, not arrange.
If you want the two elements to display over each other. Change the positioning of the first one to absolute.
This will take it out of the ordinary flow rendering and allow any elements to overlap with it.
div {
width: 100px;
height:100px;
border-style: solid; border-width: 1px 1px 1px 1px;
position:absolute;
}
div#sidebar1 {
float: left;
}

CSS: Align text to an element with display inline-block

I have a short text next to which I have to put a link. The link should not be visible as a text but as an image. So far no problems, however to use the image I have to set display:inline-block to be able to set the width/height of the tag. As soon as I do it, the next which was next to from the right jumps downwards in the containing div. I am absolutely unable to move it upwards. The code is:
<div>
<p id="pid">Some prefixing text that shouldn't be at the bottom of the div but rather in the middle This is some link</p>
</div>
#pid {
border: 1px solid blue;
float: right;
}
#pid a {
display: inline-block;
width: 50px;
height: 53px;
}
http://jsfiddle.net/DxVQr/1/
So how could I move the prefix text upwards? Thanks a lot!
Does vertical-align: middle on the <a> tag does the job?

css: Image is on the border of parent's div. How to make text above that image in a div?

I have a div with a thick border of 10 px. Inside the div there is a pic and some text.
The pic is slightly moved on the border (is a must, should be above the border).
<style>
#main
{
border:10px solid red;
width:400px;
}
.img-to-border
{
margin-left:-10px;
margin-top:-10px;
position:relative;
float:left;
}
.text{
border:1px solid blue;
text-align:right;
padding-right:30px;
}
</style>
<div id="main">
<img src="https://www.google.by/logos/2012/slalom_canoe-2012-sr.png" alt="" class="img-to-border">
<p class="text">DCBA padding-right of text is always 30px </p>
</div>
Here is a working code:
jsFiddle
The problem is if text is one to four symbols longer, it falls down. But, I want it go above the image (above I mean z-indexed, not from uppper side of the screen to the lower side of the screen).
P.S. The padding-right is always 30px.
So, it goes absolutely the same way like you type numbers on the calculator - from right to the left and above the image, in one line. How to do that for my example?
Again, sorry I repeat that, The pic is slightly moved on the border (is a must, should be above the border).
you can make #main position:relative and the image position:absolute so the text goes over it. Check the updated jsfiddle here http://jsfiddle.net/85Zk5/2/ (actually you don't need the float in .img-to-border this way, you can remove it from the jsfiddle should be the same)
I can't get your problem properly. I tried with 1 to lots of letters and the text is always placed on the sameline, so it is the image. If you are having any trouble with the image by itself, you could work on
#main {position: relative;} /* Keep it just the same */
img {
position: absolute;
top: -10px; left: -10px;
}
The image would take no place at the page, but would still be visible and with no bumps with the textbox.
Here is a working fiddle: http://jsfiddle.net/BDFJM/
sorry if I get your question the wrong way.

CSS bug in text input field - MSIE7

I have an input text in a form that has a problem in MSIE7.
When the text field is filled and I continue typing, the background starts scrolling left along with the text.
This is the form when the text field is filled
The background image, a white rectangle with rounded corners, scrolls left with the text, leaving the black background.
This is the CSS for this text field:
border: none;
background: url('/wp-content/themes/pokerbuddy/images/field.png') top left no-repeat;
width: 100px;
height: 20px;
padding: 0px;
font-size: 80%;
color: #399;
display:inline;
Is there any way to solve this in MSIE7?
input{overflow:hidden;}
Don't know if this will work.
I think you have a problem with this line.
background: url('/wp-content/themes/pokerbuddy/images/field.png') top left no-repeat;
Don't you mean
`background: url('/wp-content/themes/pokerbuddy/images/field.png') top left repeat-x;`
Yes, there is a way to solve this, but it's a bit of a pain. You shouldn't put the textfield in the same div with the background image. It should be more like this (example of HTML structure):
<div style="background-image: url('/wp-content/themes/pokerbuddy/images/field.png');>
<div class="textboxStylesHere" style="(specify width, maybe overflow hidden)">
</div>
</div>
Pain, but it works.