473,322 Members | 1,494 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,322 software developers and data experts.

Dynamic box layout question

Hi all,

I have to admit that I'm completely at loss trying to implement the
following layout:
+-----------document---------+
| |
| +--box1---+ +--box2---+ |
| | A | | A | |
| |<-- | | |<-- | | |
| | | | | |
| | | +---------+ |
| | | +--box3-+ |
| | | | A | |
| | | |<-- | | |
| | | | | |
| | | +-------+ |
| | | |
| | | |
| +---------+ |
| |
+----------------------------+

The idea is that box1 clings to the left edge of the document window,
box2 clings to the right edge of the box1 and aligns with its top edge,
and box3 clings to the right edge of box1 and bottom edge of the box2.
The catch is that the size of each box is unknown beforehand, and thus
the layout must be dynamic.

The code needs to work in Mozilla/Firefox, therefore no need to pay
attention to IE's qurks.

My idea was to put box1 into DIV1 and box2 and box3 into DIV2 and give
them DISPLAY:INLINE so they can cling left-to-right -- but obviously I
misunderstand something in the box model. Floating them to the left
didn't help much either.

Any hints and ideas appreciated.

--Wesha.

Sep 20 '05 #1
9 2374
Els
We*************@gmail.com wrote:
Hi all,

I have to admit that I'm completely at loss trying to implement the
following layout:

+-----------document---------+
| |
| +--box1---+ +--box2---+ |
|| A | | A | |
||<-- | | |<-- | | |
|| | | | |
|| | +---------+ |
|| | +--box3-+ |
|| | | A | |
|| | |<-- | | |
|| | | | |
|| | +-------+ |
|| | |
|| | |
| +---------+ |
| |
+----------------------------+

The idea is that box1 clings to the left edge of the document window,
box2 clings to the right edge of the box1 and aligns with its top edge,
and box3 clings to the right edge of box1 and bottom edge of the box2.
The catch is that the size of each box is unknown beforehand, and thus
the layout must be dynamic.

The code needs to work in Mozilla/Firefox, therefore no need to pay
attention to IE's qurks.

My idea was to put box1 into DIV1 and box2 and box3 into DIV2 and give
them DISPLAY:INLINE so they can cling left-to-right -- but obviously I
misunderstand something in the box model. Floating them to the left
didn't help much either.

Any hints and ideas appreciated.


Instead of display:inline, give them float:left.
The result though, is that if there's a line of text in DIV1 that's
longer than the required width, the width will just extend, unless you
set a specific width. The same goes for DIV2.
If the boxes are fixed widths, there is no problem. Otherwise I would
give both DIV1 and DIV2 a width (50%?), or, alternatively, give DIV1 a
width, and give DIV2 margin-left:[width of DIV1]; instead of
float:left.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Yes - Going For The One
Sep 20 '05 #2
We*************@gmail.com wrote:
The idea is that box1 clings to the left edge of the document window,
box2 clings to the right edge of the box1 and aligns with its top edge,
and box3 clings to the right edge of box1 and bottom edge of the box2.
The catch is that the size of each box is unknown beforehand, and thus
the layout must be dynamic.


That ain't going to work. If the content is allowed to expand the width
of the containers then for example text will expand them to occupy the
full width of the viewport.

You'd need to restrict the width in some form to get this to work.

--
Spartanicus
Sep 20 '05 #3
> That ain't going to work. If the content is allowed to expand the width
of the containers then for example text will expand them to occupy
the full width of the viewport.


*sigh* I'm trying real hard to convert to "CSS only", but it seems that
these
things are sooooooo much easier to accomplish with tables.... :(

OK, I managed to make the boxes float as I wanted (thanks god, their
content *is* limited in width, but nevertheless I would be happy to
learn what to do if it wasn't) -- now the question is, how do I
horizontially center the whole assembly on the page?

+-------------document------------+
| |
| +-------container-------+ |
| |+--box1---+ +--box2---+| |
| || A | | A || |
| ||<-- | | |<-- | || |
| || | | || |
| || | +---------+| |
| -->|| | +--box3-+ |<-- |
| || | | A | | |
| || | |<-- | | | |
| || | | | | |
| || | +-------+ | |
| || | | |
| || | | |
| |+---------+ | |
| +-----------------------+ |
| |
| |
| |
+-------------document------------+

Sep 20 '05 #4
We*************@gmail.com wrote:
*sigh* I'm trying real hard to convert to "CSS only", but it seems that
these
things are sooooooo much easier to accomplish with tables.... :(
Not really, IEs poor support for CSS is the problem.
OK, I managed to make the boxes float as I wanted (thanks god, their
content *is* limited in width, but nevertheless I would be happy to
learn what to do if it wasn't)
If the width isn't restricted then it cannot work, table layout or
otherwise.
-- now the question is, how do I
horizontially center the whole assembly on the page?


..container{width:30em;margin-right:auto;margin-left:auto}

--
Spartanicus
Sep 20 '05 #5
> If the width isn't restricted then it cannot work, table layout or
otherwise.

Huh? Tables, with their "rubber" ability, will either cause the text
inside to wrap, or will just stretch, but box1 will *always* be to the
left of box2 and box3, which cannot be guaranteed by 'float'... Can it?
.container{
width:30em;
margin-right:auto;margin-left:auto}


That's cheating -- static values (such as 30em) may not be used as
content width is unknown beforehand. Besides, if you add border, you
will see that container turns out to be empty because floats escape the
flow...

I can set container to position:absolute, and then it properly engulfs
div1 and div2, but in that case I can't center it...

Is there any other way to place DIVs side by side beside float'ing
them?

I'm trying real hard to understand CSS layout model, but it's just way
too counterintuitive... :(((

Sep 20 '05 #6
We*************@gmail.com wrote:
If the width isn't restricted then it cannot work, table layout or
otherwise.
Huh? Tables, with their "rubber" ability, will either cause the text
inside to wrap, or will just stretch, but box1 will *always* be to the
left of box2 and box3


Right you are, although it's not due to their shrink fit model.
, which cannot be guaranteed by 'float'... Can it?
Nope, floats are not really suitable for creating layouts, they are
sometimes used to get around IEs poor CSS support. Floats used for
layout are a major source of frustration for budding CSS'ers because of
the issues that result from what is inappropriate usage.
.container{
width:30em;
margin-right:auto;margin-left:auto}


That's cheating -- static values (such as 30em) may not be used as
content width is unknown beforehand.


You claimed that it wasn't: "thanks god, their content *is* limited in
width".
Besides, if you add border, you
will see that container turns out to be empty because floats escape the
flow...
The container height collapses because floats are not part of the flow,
but this is irrelevant for horizontal centering.
I can set container to position:absolute, and then it properly engulfs
div1 and div2, but in that case I can't center it...

Is there any other way to place DIVs side by side beside float'ing
them?
inline-block (browser support is poor), CSS tables (not supported by
IE), and absolute positioning.
I'm trying real hard to understand CSS layout model, but it's just way
too counterintuitive... :(((


It should be much easier than it is, as it stands using CSS for layouts
takes skill, practice and patience. It would be much easier if IE had
supported CSS 2 properly, but it doesn't. Point your arrows towards
Redmond.

--
Spartanicus
Sep 20 '05 #7
>That's cheating -- static values (such as 30em) may not be used as
content width is unknown beforehand. You claimed that it wasn't: "thanks god, their content *is* limited in width".


I said *limited*, not *known*... Limited means you know it won't be
*greater* than some value -- but they can be *smaller*, and they still
need to center properly when that happens.

Let me re-iterate the givens...

Box2 contains an image 1 to 300px wide (but we don't know the exact
value);
Box3 contains an image 1 to 300px wide. (but we don't know the exact
value);
Box1 contains an image 1 to 300px wide (but we don't know the exact
value) and guaranteed taller than Box2 and Box3's images combined;

Box2 must be top-aligned to Box1 and left-clinging to it.
Box3 must be top-clinging to Box2 and left-clinging to Box1.

Container must engulf all 3 boxes and horizontially center on the page.

AND! *I do not care about IE!* Need it to work in Moz/FF only!!!
In other words, want to recreate the following piece using pure CSS:

<center>
<table>
<tr height="1">
<td valign="top" width="1" rowspan="2"><img src="1.gif"></td>
<td valign="top" width="1"><img src="2.gif"></td>
</tr>
<tr>
<td valign="top" width="1"><img src="3.gif"></td>
</tr>
</table>
</center>

Sep 20 '05 #8
We*************@gmail.com wrote:
AND! *I do not care about IE!* Need it to work in Moz/FF only!!!
Settle down please.
In other words, want to recreate the following piece using pure CSS:

<center>
<table>
<tr height="1">
<td valign="top" width="1" rowspan="2"><img src="1.gif"></td>
<td valign="top" width="1"><img src="2.gif"></td>
</tr>
<tr>
<td valign="top" width="1"><img src="3.gif"></td>
</tr>
</table>
</center>


That doesn't look like the ascii drawing you posted. Based on the ascii
drawing:

HTML table layout: http://homepage.ntlworld.com/spartanicus/temp.htm
DIV layout: http://homepage.ntlworld.com/spartanicus/temp2.htm

--
Spartanicus
Sep 20 '05 #9
> >AND! *I do not care about IE!* Need it to work in Moz/FF only!!!
Settle down please.
Well, I specificly mentioned that in the very first message of my
thread, and nevertheless you kept bashing MSIE, to the point where it
was counterproductive, so I decided to remind you that I don't care
abot IE altogether...
That doesn't look like the ascii drawing you posted.
Hmmm... You scared me for a moment -- I thought I've got a case of HTML
dislexy. But then I pasted my code above in the browser, and indeed it
works exactly as my ASCII drawing describes it... Anyway.
Based on the ascii drawing:


Hmmm, interesting. So basicly those are just tables in CSS disguise.
Very interesting, guess I should stick to that. Thanks for your help!

Sep 20 '05 #10

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

3
by: Juha Rossi | last post by:
Hi, Im designing web site like below: ----------------------------------------------------------- | logo here | welcome text here | | | |...
4
by: Shane Malden | last post by:
Hi, I am trying to create a page which will automaticlly change the size of tables/graphics etc based on the screen resolution. Eg, if someone is using a 800x600 the page layout will utilise this....
2
by: yzarc | last post by:
I'm working with a DB design that seems to me to be rather complex. This is a very slimmed down version of what I'm doing, but I believe it is enough to get my question resolved. Here is my...
6
by: Paul | last post by:
Hi I have 2 data grids and several controls on a web page. The grids will vary in size, just wondering if the lower grid could be covered by part of the upper grid depending on its size or is there...
1
by: LilC | last post by:
I'm creating an application that has a standard layout for all pages. The information that is displayed in the layout will be dynamic based on the user that is logged in. Thus when a page is...
11
by: toton | last post by:
Hi, I have little confusion about static memory allocation & dynamic allocation for a cluss member. I have class like class Bar{ public: explicit Bar(){ cout<<"bar default"<<endl; }
0
by: Eniac | last post by:
Hi, I've been working on a custom user control that needs to be modified and the validation is causing me headaches. The control used to generate a table of 4 rows x 7 columns to display all...
3
by: creative1 | last post by:
Here is how you create a complex data report that involves parent and child commands and you can update information at runtime. Its pretty straight forward to work with simple queries; however,...
2
by: Peted | last post by:
Can anyone suggest a best practice approach to building a dynamic winforms UI. Just as an example somehting like a billing application where you enter a customer billing data and the billing...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.