If you look at my Jsfiddle Example, the float seems to disregard the title text that is to the left of the floated element. My goal is to make the floated element not overlap the title text and to stop once it reaches the end of the div which is the title text
My questions, is this possible?
I just do not want it to overlap the element which is to the left of the floated element.
Thanks in advance for the advice, suggestions, etc.
Jsfiddle.net
Remove Position: Relative from your #advertisement_1 div, and in the HTML put it above the title div.
Below is an updated JSFiddle with it working, you may need to adjust the "top" value in your CSS for the advert box if it needs to be different to what is in the fiddle.
http://jsfiddle.net/f5j2z/
Related
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'll let this jsfiddle describe most of the problem for me.
http://jsfiddle.net/zAPVQ/4/
I've got a layout similar to this. There's an image to the left and block links to the right. The way I've set the positioning, the text inside the <a> is pushed down underneath the blocks.
I've created a makeshift solution, using <span> tags and more positioning, but I'd rather that not be my end result. If I have to create/change/remove buttons, I'd have to mess with the positioning of the text.
Does anyone know a better way of keeping the text inside the link block?
Updated your Fiddle.
I've added
overflow: hidden;
to your big link CSS.
Saw this today from another answer to this question Element with Overflow:auto affected by Floating Element
Theres also a couple of good links to a description of why it works in there too.
Try using a negative margin. Like margin-top: -75px;
I'm pretty well versed with HTML and CSS, but I'd like your opinion on this one!
I need to center the text in the arrow, but place a check box next to the centered text. Because of this, I can't user text-align on all of the contents of the arrow, like I normally would. If I include the check in the centering, the anchor point shifts off of the text to include the check, and the text isn't truly centered.
Thanks!
Make the check an absolutely positioned span, set as display:block, positioned relative to the text. Check out this jsFiddle for a basic idea. Your HTML may be set up differently:
http://jsfiddle.net/cGG3W/1/
Without seeing the code, you could
use text-align:center; on the text in the div.
place the checkmark in another div and position it where necessary. You may need to adjust the stack.
The background color of <ol> list is not displayed properly. This problem started after I floated label left and input right. How to fix this. The expected result is:
Here is my result: http://fiddle.jshell.net/WZ3nM/1/
Similarly I've problem with the div .wrapper. The shadow should be way below the content and there should be a white color background beneath <div class=.col-2>.
You need to clear the float, before you close your <ol>
Check it out here.
http://fiddle.jshell.net/WZ3nM/5/
Whenever you float things you must clear them at the end so that it can calculate the height properly
I modified your code and added a third <li> with the following style:
clear:both;
Your float was taking elements out of the document flow and this the background color didn't know where to end.
Hope that helps.
As others have suggested you can clear the floated content - although this will add another element. You can also add
li{overflow:auto;}
which will prevent the list from collapsing. In IE6 you will also need the rule
li{height:1px;}
http://fiddle.jshell.net/WZ3nM/9/. This method does not require a clearing element.
I have a slight problem with a background image on a block element that is preceded by a floating element.
I float an image to the left, followed by a H1. As expected, the H1 (which is a blocl-level element) flows behind the image, but it's contents (the actual title) appear to the right of the image.
Unfortunately, the background-image I'm using on the H1 has to be aligned to the left, and thus appears behind the actual img, because unlike the contents this is not pushed by the floating behaviour.
Example:
http://jsfiddle.net/WwuqG/
(I set the second title to clear: left to show what it should look like).
One solution is to set the left-margin of the title to a little more than the floating image's width, but that would require me to know it's width beforehand.
Another option is adding the title's icon in an element inside the h1, but that's not semantically correct.
Is there a better css-only solution that doesn't require additional elements?
add overflow:hidden to the h1
new fiddle
I'm slightly confused.
If I do what you suggested:
set the left-margin of the title to a
little more than the floating image's
width
It looks like this: http://jsfiddle.net/WwuqG/1/
My confusion comes from the fact that your problem seems to be.. really simple to fix.
Also add float: left to the <h1>: http://jsfiddle.net/WwuqG/2/
This works with whatever width image: http://jsfiddle.net/WwuqG/3/
Is that it, or have I misunderstood?