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?
Related
I want to create a button/link that is centered in the content area of a webpage. Because it's a button, and not just a link, I'm adding some padding and background colour to it.
The link is centered horizontally, but the padding seems to expand outside the line-height of the parent element, causing it to overlap with previous/next elements. See: http://fths.convoke.info/what-can-i-do/
I tried creating a fiddle, but wasn't seeing the same issue: http://jsfiddle.net/convoke/g9wu6ws9/
So what am I missing? Conversely, is there a better way to center a link like this? I don't like using margin: auto because it requires you specify the width. Ideally the width would be dynamic, so if the text on the button was longer or shorter, it would remain centered.
In this case, the answer I needed came from user #CBroe in the comments of my original question. He suggested using display:inline-block and that worked like a charm.
Still unsure as to why I was getting different results on the fiddle vs the actual website...
I know this is a common question and I've already tried the searched methods. Here is the jsfiddle: http://jsfiddle.net/ZfZK9/ and here's my problem
Basically, I've got a main div container. It has an image and some text. I need the image on one side, then the text on the other. I tried putting the img in a div, setting it's height to 100%, and floating it right, but as you can see in the jsfiddle once the text goes below the image it doesn't keep the column formation.
I'm not sure why the display: block and height: 100% aren't doing any good on the left column.
Thanks
Edit: I'm assuming height: 100% doesn't work because that gets rendered and then text gets added later. I'm still trying to find an elegant solution though, and general-purpose.
Another problem, is when I set both divs (of the image and of the text) to float: left, it just displays the image then the text under it
It can be done like this: http://jsfiddle.net/ZfZK9/34/
Just create two div's as columns around both sides, then set both those sides to a specific width, then play around with the padding and margin til you get what you want.
To keep your border around your content, I added a clearfix which will help contain the two floated columns....
http://jsfiddle.net/ZfZK9/34/
Had to edit a few things, took a bit to get it right, but now all should be working. Contains two floated divs, with a browser proof clearfix added to the mix. If you wanted the image, or the sidebar to appear as if it continues to the bottom, read about Faux Columns
You have some css in the html and some in the css so this is hard to follow. What I believe I see is a common mistake where you must consider when you set something to 100% you have to think, 100% of what? It's always the parent of that element. So what is the parent set to? If nothing, there's your problem.
Just remember that if the parent is also set to 100%, the same question will apply.
EDIT: I see the problem now. I misunderstood. What you want to do then is set the width of the right div, the one with the text. Float that right and it should solve the problem.
I have some HTML that looks like the following: http://jsfiddle.net/KbqHa/
I would like this div to be on the same line as the image. However, it moves to the line below due to the div being a block element. In this case I'd usually use a <span>, but this completely messes up the border (and the div wraps under the image too). Adding display:inline-block to the div doesn't seem to work either. I've tried using float: left but I can't get that to work either. Any thoughts?
The classic solution is to use float: left on the img, and then add a margin-left to the div equal to the width of the image.
See: http://jsfiddle.net/thirtydot/KbqHa/2/
However, that's no good if the width of the image is unknown.
So, a better solution is to use overflow: hidden on the div.
See: http://jsfiddle.net/thirtydot/KbqHa/3/
The reason this seemingly nonsensical solution works is explained here.
I want to achieve something like this:
A) Is an square image, say 65x65.
B) This icon is another image which
need to be floated inside A.
C) The minimum length of the row is
the height of A. The maximum depends
of the length of the text
description.
Usually when I have floating images like A and B, I would put my container position as relative, and obsolute for the floating image, and that will do it, but I'm a little lost with the text here.
This is just going to be used on webkit browsers, if that is of any use.
If the image size is fixed and unlikely to change in the future, then I'd recommend applying position absolute to the image (what you're saying). I'm guessing your problem is that if the text is too short, the height of the image would exceed the height of the container. This is easily fixable with min-height:
.module {
min-height: 65px; /*your image height*/
}
You can view a demo here:
http://jsfiddle.net/RkeJJ/
This should work all the way down to IE7.
If your image size is variable, then I'd recommend display: table/table-row/table-cell, but this will work only on IE8+ and the rest of the modern browsers.
Me debes una caña! ;)
You know the width of image A (the large image). The title goes in a h1 for example, and the text in a p (or div), so set these two elements to have a left margin greater than the width of image A.
You can then float image A to the left and position the icon B over the image using absolute positioning.
Finally, I would have a wrapper div with overflow: auto to have a border (if needed) and to allow for a bottom margin to provide white space between the following element.
Partial answer: see my code snippet at http://jsfiddle.net/audetwebdesign/Nam52/
You just need to add the date element after the title.
I have a div that is float: right and it is inside a parent div. There are p elements inside that same parent div also, and the text wraps around the float: right div properly.
However, if I set the p elements to have a border, or do a <hr />, the border does not stop where the text stops, but extends behind the float: right div.
Here is a beautiful mspaint depiction of the situation:
Note that the green part of the black horizontal line is behind the floating div.
How do I get the border or <hr /> or whatever to be only as wide as the text, and not go behind the div?
I know this problem was posted some time ago, but I had the same problem today and found another solution:
http://jsfiddle.net/MvX62/
I use border-bottom instead of the <hr /> tag and had to add an overflow: hidden;. Look at the fiddle, i think this is more useful then the accepted solution, because you can also add a margin to the horizontal line and there is the same gap, as the text has.
Also you don't need to define z values and don't need any hacks or workarounds.
I've had this problem before, and I wasn't sure if it was solvable.
In your case, however, you could wrap the green box with another element and swap margin with padding and set its background to #fff to cover the offending line.
Check out the fiddle...
http://jsfiddle.net/UnsungHero97/8BwGB/3/
What I did here was give the floated element a z-index CSS property, which will put it "above" the non floated element (which has a smaller valued z-index) and the <hr /> will not go above the floated element.
In regards to getting it as wide as the text, in my example it is as wide as the text, but I'm not sure if that holds across browsers (I'm on Chrome). Let me know if it doesn't.
I hope this helps.
Hristo
p.s. excellent mspaint skillz :)
You would have to set the width of the paragraphs to the width of the container minus the width of the floating element, or you could give them a margin on the same side of the float equal to the float's width.
Div cannot wrap around another div. Wrapping is text-only property. You can simulate wrapping by setting the margin-right for the master div to the width of the div you want it to wrap, but text wil not flow under the inset div.
Some values of the overflow property can cause this behavior. Specifically, overflow: visible which is often set by popular CSS resets/normalization.