[Solved] Layout Breaking Up

[brian]

Hi everyone. I’ve inherited another designers code and I can’t seem to add additional images to the page without the entire page breaking up.

Looks like she has every image floating left and set to a relative position.

i need to add about 10 more images to the pages but each time i add anything, the entire layout breaks up. Any help would be appreciated!

link to original page…
http://www.brianlichty.com/dev/buildersdesign.com/model-homes

Here is the test page with new images added…
http://www.brianlichty.com/dev/buildersdesign.com/model-homes-TEST.php

thanks!!

[Paulie_D]

Well the first thing that jumps out at me is that you are re-using the ID “load”…that’s a big no-no right there.

I think what you are supposed to be doing is adding the divs (big/small etc) into the the section with a class of “projects” and an ID of “load”…not creating new sections.

[brian]

thanks! that’s what I WAS doing. but the layout continued to break up. I understand reusing ID is bad and was actually working on it when you posted (sorry!). But adding the section tags has helped and the layout is starting to cooperate a bit more.

Why would this designer float everything left???

[Paulie_D]

Why would this designer float everything left???

Why not?

I agree you might not want to use float nowadays but it looks like a perfectly valid means of layout for what is a standard fixed proportion gallery layout.

It reacts very nicely and is pretty responsive.

[brian]

thanks again. I guess once you move the top left element (or any element), everything else moves left to fill the gap (and sometimes the flow will push an element down as well?). It’s silly to work like this. There arent any divs holding the groups of pictures in place, and if I put a div in to hold them, it ALSO affects the layout. Driving me crazy.

[brian]

by the way thanks for the help! Much appreciated.

So, do you think I could simply copy the entire picture layout (from div to /div) and paste below the exiting ones and essentially have the entire layout repeated below?

Well, it doesnt work??? Why not?

I have noooo clue.

[Paulie_D]

So, do you think I could simply copy the entire picture layout (from div to /div) and paste below the exiting ones and essentially have the entire layout repeated below?

Not sure what you mean by that.

If you wanted to you could copy the entire <section> with a class of projects and copy that and paste a copy right below the first as long as it’s inside the div with a class of main-content.

Now as long as you change the ID (perhaps to “load2”) it should be fine…then all you would have to do it swap out a ‘wide’ image etc for the new content.

One thing though…I’m guessing that ID of ‘load’ is there as a JS hook, so you might want to find out what it’s for. You may have to edit the JS as well.

[brian]

thanks. I hacked it up inline and made a few images float right and removed their right margin. works fine! not the cleanest solution, though. :)

Thanks for all of your help!

[Author]

Posts