View Full Version : positioning puzzle (divs, floats, and display:table oh my!)

05-31-2007, 10:54 AM
I have a positioning puzzle for you here. It's as part of a web design assignment, so broad accessibility is not required. even working on IE is not required. YES!
here is the problem, explained by means of an image. because a picture speaks a thousand words. so they say.
Any assistance or suggestions are welcome.

Thanks in advance.

05-31-2007, 11:00 AM
Okay so what are you wanting us to do? We aren't going to do your assignment for you. Post your code, maybe we can help you by telling you what you may have done wrong.

05-31-2007, 11:02 AM
What's the question? Our Rules (http://www.codingforums.com/rules.htm) specifically say not to post homework assignments if you're just looking for a quick answer.

Aero beat me to it. :D

05-31-2007, 11:37 AM
It's only a small part of the assignment. and i'm considering this as research.
I don't expect a complete solution.
I've spent quite alot of time playing with it, and my lecturer was unsure of how to do it as well (he's not very onto it).

There's also probably a very good chance what im trying to do is impossible.
Im not even sure how i could hack together some javascript to make it work.
(but i'm not very familiar with javascript)

a simplified down code.
#main {
position:relative; /* so things inside can be absolutely positioned in this container*/

<div id="world">
<div id="main">
<div class="cell">
Stuff goes here
</div><!--/cell--> <!-- times lots of these cells -->
<div id="sidebar>
<div class="cell">
Stuff goes here
</div><!--/cell--> <!-- times lots of these cells -->

05-31-2007, 07:06 PM
is the table-cell a requirement? My hint to you is that careful floating or container elements will do everything you want.

05-31-2007, 07:44 PM
Exactly, float was the first thing that came to my mind.

Red box is a div, blue and green outline are divs within the red one, and the squares are divs within the respective outline divs. Now you would float the blue outline div to the left and assign a width in order to get the green one next to it, and you would float the violet and blue squares to the left too. Itís pretty simple.