473,574 Members | 2,900 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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 2385
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
horizontiall y center the whole assembly on the page?


..container{wid th:30em;margin-right:auto;marg in-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;marg in-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:absolu te, 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 counterintuitiv e... :(((

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;marg in-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:absolu te, 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 counterintuitiv e... :(((


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"><im g 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"><im g 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 counterproducti ve, 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
4251
by: Juha Rossi | last post by:
Hi, Im designing web site like below: ----------------------------------------------------------- | logo here | welcome text here | | | | ----------------------------------------------------------- | buttons here | | | main content here
4
1664
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. If the same webpage is diaplayed on a 1024x768 or 1280X1024 the cells are adjusted according. By doing something like this could you make the logo...
2
4589
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 layout. These 4 tables are used to generate a questionaire. Survey OrderID
6
1472
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 a way to dynamically shift the lower grid so it appears just below the upper grid? Thanks. -- Paul G Software engineer.
1
2940
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 browsed to, I need to check to see if the user has logged in or not. Then if they have logged in, I need to pull their information from the database to...
11
3031
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
5277
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 the days in the week with dates and textboxes to fill in some data. row 1: question
3
18697
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, working with complex reports is tricky Assumption: Reader of this article have basic knowledge of creating data reports. Creating a Parent-Child...
2
5955
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 options, the UI and the winform controls you have visible are dynamic and can change as information is entered, so that there is a dependency between...
0
7815
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, well explore What is ONU, What Is Router, ONU & Routers main...
0
8079
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. ...
0
6481
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development projectplanning, coding, testing, and deploymentwithout human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then...
1
5635
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 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 a new presenter, Adolph Dupr who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes...
0
5321
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert...
0
3756
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in...
0
3770
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
1359
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
0
1081
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating...

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.