March 2nd, 2013, 04:00 PM
H2/h3 to float like text?
I'm new here and new to HTML and CSS. We had to learn basic HTML and CSS for a project at University and my site can be found here:
the css is here:
I'm wanting to have my h3/h2 headings float to the side of my images in the same way that text in a <p> paragraph does. The text itself does do this, but I want the same thing to happen with the orange background. I'm looking specifically at the "Sound Walk" and "General Cycling Sounds" headers you see on my home page (and all headers of this sort on all pages ). At the moment the orange background color actually hides behind the image but I want it move out of the way like the text does - i.e. there should be a small gap between the orange bar and the image.
I've looked around but nothing I have tried seems to address this exact issue. Any help would be greatly appreciated.
Thanks for reading,
March 3rd, 2013, 02:25 AM
If you put the img elements before your h2 / h3 elements than that should resolve things for you.
March 3rd, 2013, 04:21 AM
Thanks for your reply. I tried switching them round (which I've now uploaded) but it hasn't made any difference, the same thing happens.
March 3rd, 2013, 04:53 AM
OK, the better way to do this is to put your collection of elements that you want floated to the left in their own containing div floated to the left (unless you need the paragraph text to wrap around the bottom of the image.
Otherwise you need to set a specific or maximum width on your header elements.
March 3rd, 2013, 11:38 AM
Sorry, there might be a slight confusion in terms that I'm not conveying properly. The image at the top needs to float to the right, and the <p> and <h3> elements need to wrap around them. The text in the h3 element does wrap nicely, put I'm wanting the entire container (including background colour) to also wrap around the image.
Originally Posted by simplypixie
I'll try putting the headers inside their own div and seeing if that helps. Another semi-fix is to set display: inline for h3, but this isn't really ideal.
Making it a fixed or maximum width is something I would prefer not to do. My lecturer is keen that we have websites that are adaptable to all screen/window sizes and look pretty much the same no matter what.
March 4th, 2013, 05:37 AM
You can't wrap background colours around images I am afraid so your only option is to have it as is (with regard to the background colour) and instead of using a max-width, change your margin on images to padding and set the bacground colour of images to match your main background.
I have set up a Fiddle here for you - http://jsfiddle.net/mht8p/
March 4th, 2013, 05:04 PM
That's a good idea for how to do this. However, there is another way.
Originally Posted by simplypixie
Besides certain values of the "display" property, two other properties allow an element to interact with a floated element, those are the "clear" and "overflow" properties. The interesting thing about the overflow property is that it can make an element expand in height to contain floated descendants and it can also cause it to reduce in width if an element is floated beside it. (I should mention that some browsers, e.g. Safari 5.x, have a bug where when a floated element is beside an element with the "overflow" property set to a value other than "visible", the margin on the side of the element adjacent to the floated element will be doubled.)
width: auto; /* feel free to remove this, I left it in to show the change in value */
Comments on this post
March 4th, 2013, 08:26 PM
Brilliant! That seems to have fixed it. Thank you very much!