0

I'm creating a site and I want to use fluid grids. I'm not having to bad of a time, but when I try to create a div row that has a main image that takes up a certain percent of the page and then three divs that take up the same height as the one div beside it I'm having issues. I'm also having issues when I do the reverse and have a div that has two sections to the left and then a large section that makes up both of these to the right. I know how to do the divs that have two rows or three rows, but getting the row beside it is causing me trouble. Any suggestions are appreciated and thanks!!!

user2815584
  • 19
  • 1
  • 5

1 Answers1

0

Not sure if I understand your question correctly. Do you want to arrange four divs with different widths horizontally? If so, then try wrapping the divs in a container with a fixed height and set the float-tag of the child divs to left and their heightto 100%.

EDIT: If you want to let the height of the container be determined by the image size of the large row, then omit the height-tag in the css of the parent div.

This should help arranging the divs horizontally.

Something like that:

http://jsfiddle.net/jyy24/1/

Does this answer your question?

Anthronaut
  • 83
  • 1
  • 11
  • No I'm sorry I wasn't clear. I understand how to make the divs appear beside each other. My problem is I want to have a div that is has a width of 64% and a height of 100%. Beside that div I want three divs that have a width of 12% each and varing % heights based on my needs. That way you have the single div on the left had side and then on the right hand side you have three divs beside that that have the same height as the div to the left. Does this make more sense? – user2815584 Nov 23 '13 at 00:58
  • Ok, I get part of your idea, but what's puzzling me a little is that you wish to have the first div on the left with height set to 100%, then three divs with varying heights, but at the same time write: "then on the right hand side you have three divs beside that that have the same height as the div to the left." So the divs should be different in height - or the same? – Anthronaut Nov 23 '13 at 01:04
  • The divs to the right will have three different heights, but when added together they will equal the height of the div to the left. Sorry. So the main div on the left will have a height of 100%, but then the three divs to the right will have a height of 23%, 44% and 33% for example to meet the height of the div to the left. – user2815584 Nov 23 '13 at 01:11
  • Are you thinking of something like that? --> http://jsfiddle.net/jyy24/33/ Note that a child element with a height set to a percentage absolutely needs a parent element with a fixed height. See also this answer here: http://stackoverflow.com/a/1622097/3021964 – Anthronaut Nov 23 '13 at 01:32
  • That is what I'm thinking of, but now I have a new problem. The elements inside the divs are running beyond these divs. Any suggestions on how to resolve this issue? – user2815584 Nov 23 '13 at 02:01