Grow your CSS skills. Land your dream job.

overflowing content

  • # April 1, 2009 at 5:52 pm

    Please look at the site I am working on: http://www.marksouthworth.co.uk.

    The problem is with the right column. I have had to specify a height for the last div element – .testimonials2 {
    If i dont do this and i add content it overflows longer than my column on the left. How do i make it so that both the left and right grow equally? Thanks.

    Also it renders badly in ie 6 and i am stuck on hoe to fix this.

    # April 1, 2009 at 6:58 pm

    Either use a background image 1px high ,that is white and gray, and repeat it vertically.

    Or you can use a Jquery plugin (http://www.filamentgroup.com/lab/setting_equal_heights_with_jquery/)

    # April 2, 2009 at 3:07 am

    Could you please be specific to my code as my #content_wrap seems to serve no purpose as it doesnt even get picked up in firebug but if i do away with it it messes up my content.

    I dont know why this is happening, normally, it is as easy as a container div with 2 columns, both floated with widths declared?

    # April 2, 2009 at 4:34 am

    As chazzwick said, create an image that is 1px high and 900px wide, 660px white and the rest grey and include it in your CSS

    Code:
    #content_wrap {
    background:#FFFFFF url(your-image) repeat-y scroll 0 0;
    width:900px;
    }
    # April 2, 2009 at 5:14 am

    I appreciate the help, and that to me would seem the logical way around this problem but if you try it yourself it doesnt work, the content_wrap doesnt seem to hold any colour or bg image at all, though without it the content floats mess up. Please help.

    # April 2, 2009 at 5:37 am

    Looks like the problem is in your html.
    I can’t find an opening tag for this closing tag:

    Code:

    See what happens if you delete it.

    # April 2, 2009 at 5:49 am

    Thanks again, desnt work, think i will just have to accept its not going to work.

    # April 2, 2009 at 5:57 am

    Of course it will work if you do it properly.
    Validate your html http://validator.w3.org/#validate_by_input. You have mismatched tags all over the place, 56 errors! Fix those and your CSS might have a chance of working.

    # April 2, 2009 at 6:41 am

    Seems like I can only get the bg image to appear if i declare a height on the content_wrapper? But then, if I do this it pushes all the right column content down?

    # April 2, 2009 at 7:14 am

    Ok, I’ve got your html down to 20 errors and they are all connected to your form – which is your problem. :D

    This now works as it should.

    Code:
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">






    Mark Southworth :: Profile

    Born and bred in Lancashire Award winning magician Mark Southworth is one of the most up and coming unique professional magicians around. Keen on the magic arts form an early age, Mark has dedicated his life to magic.

    It is not just a profession to Mark but an addiction to be the best performer around! Not only is mark a high class performing professional magician & sleight of hand artist, but also the inventor of magic effects. On the magic scene mark is very well known worldwide for the distribution of his unique magic effects & are used by well known magicians all over the world .

    Mark worked at Europes largest magic shop for years earning his apprentaship in magic, Mark is now a very sought after magician throughout the world and regularly performs for T.V & current Celebrities.

    Marks magic can be booked for weddings,birthdays,christenings,partys,resturants,golf cubs,barmitzvas & Various other engagements.
    Mark will perform his Award Winning Magic close up at tables or a most relaxed setting entertaing your guests with Unique walk around magic.

    In his performance mark is very versitile with his unique blend of magic performance & will accomodate your needs, nothings a problem, let Mark make the Impossible……..Possible at your next Event !!

    “I have been performing now for a long time and I can honestly say the reactions that I get from those for whom I perform is extremely gratifying. I have found that not a lot of people have seen a magician before and when I perform they really enjoy themselves. There is nothing more satisying than seeing the reaction on peoples faces when I perform.”


    Close-up and Corporate Magic

    Mark creates close-up miracles: the magic happens right before your very own eyes. He has an incredible sleight-of-hand ability and he integrates this with a very unique style of comedy. Mark is an accomplished performer and always gets repeat bookings by his clients from high class engagements and celebrities to the more intimate parties & balls.


    Wedding Magic

    Mark has performed his unique style of close-up magic at wedding receptions up an down the country.

    Mark can mix and mingle during your drinks reception, as dinner commences Mark will perform his award winning close-up table magic to all of your guests. This will carry on up until the speeches or whenever required.

    Alternatively, after the speeches have finished Mark will provide his close-up Magic on a walkabout basis whilst your guests are enjoying their drinks/cocktails.

    Performance times are normally between 90mins and 3hours depening on the amount of guests.

    Back to top


    Contact Mark


    Alternatively you can contact me in the following ways

    Links


    # April 2, 2009 at 7:42 am

    Locally on my machine I have it down to 4 warnings, but it validates, but it still doesnt work right without declaring a height for the #content_wrap. So bottom line is, how do I bypass having to put a height for the div. Currently if I add more content on the columns I then have to change the height of the content_wrap div which is not practical.
    Furthermore even if i do this and I want to add more conent to the right column it still overflows over the content_wrap if i dont change the height.

    # April 2, 2009 at 8:01 am

    With the code I just posted you can add as much content as you like without declaring a height and the #content_wrap will stretch to accomodate it.

    # April 2, 2009 at 8:13 am
    "apostrophe" wrote:
    With the code I just posted you can add as much content as you like without declaring a height and the #content_wrap will stretch to accomodate it.

    NOo sorry doesnt work, if i add conent to the testimonials2 div it overflows the content wrapper.
    If i add content to the left column the div grows with it but not with the right column as it overlaps.

    # April 2, 2009 at 8:30 am

    It works on my machine. Just take the height off #testimonials2.

    # April 2, 2009 at 8:42 am

    nah,

Viewing 15 posts - 1 through 15 (of 20 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".