Container problem with position relative

HTML & CSS
1

Afternoon guys!

I have a problem trying to float <h3> within a div.
Here: http://www.bluecrushdesign.co.za/sitepoint/home.html

  • have a look at the “restaurants” and “accommodation” divs under discover.
    Client wants heading floated right within these containers.

It works fine untill you resize the browser window smaller (to 1024px)
(it has to work on different sizes im coding for this as well)

The “restaurants” and “accommodation” headings juts out of the block to the right.
I want to keep these contained in the block

Anyone know what I am doing wrong?

Also, at this width the layout of “products” and “travel” gets messed up and i cannot figure out why!
The code is exactly the same for all the blocks.

2

What i recommend you do is give you .discovercont selectors a relative position and your h3 elements an absolute position as currently you will have a hard time aligning things due the static widths and positions you have set.

3

Hi there,
I have tried that,
but then the h3 elements dont float to the right, they float to the left

The text inside the h3 needs to expand from the right as well,
(starting from right inside border of discover cont element)

ie the headings may have different character counts… some are 10 characters some are 7

4

The problem is that you have fixed-width images in the discovercont divs, but the divs expand and contract because they have a % width.

One thing you could do is float the images right, so that the text is always over the image.

To stop the snagging problem, it’s a good idea to get rid of float: left and use display:inline-block instead:

.discovercont {
  display:inline-block;
  [COLOR="#FF0000"][s]float: left;[/s][/COLOR]
}

.discovercont img {
  float: right;
}
5

hi there,
that worked and it fixed the products/travel alignment issue…

how does the text fall over the image if its the image that is floated right?

Thankyou so much!!

6

If you stretch the browser wider, the container gets wider, and the text sticks to the right of the container … but the image has a fixed width, and naturally sits to the left of the container … so eventually the text moves off the image. If you float the image to the right of the container, it always stays together with the text. Try it and see. :wink:

7

ok …check this out…
http://www.bluecrushdesign.co.za/sitepoint/home.html

i tried it for the business blocks on the page
(where it says business showcase - blue blocks)

if you make the browser window smaller - gradually -
you will see that the headings pop out and do not stay contained
ie “jays shop” ends up being above the blue block

I added this to the css:
.business{
display: inline-block;
}

.business img{
float: right;
}

what did i miss?

8

I would place them absolutely as already mentioned.

e.g.



.business{position:relative;}
.business h3{
position:absolute;
right:0;
bottom:0;
}

They will then always stick together and expand from the right and bottom up as required