By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
445,909 Members | 2,016 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 445,909 IT Pros & Developers. It's quick & easy.

Block positioning / layout question

P: n/a
I'm trying to make the transition from tables to CSS, and I need
someone to explain how to achieve the following layout (understanding
the concepts behind this layout will help me considerably in grokking
CSS positioning):

http://unifiedmind.com/images/css-example.gif

In this example, boxes one and two are wrapped in a box that is 100%
wide.

Box 1:
- variable width (varies by line length)
- nowrap

Box 2:
- 100% of remaining width

Box 2a;
- 50% of box 2

Box 2b:
- 50% of box 2

Thanks.
Jul 20 '05 #1
Share this Question
Share on Google+
7 Replies


P: n/a
James Thornton wrote:
I'm trying to make the transition from tables to CSS, and I need
someone to explain how to achieve the following layout (understanding
the concepts behind this layout will help me considerably in grokking
CSS positioning):

http://unifiedmind.com/images/css-example.gif

In this example, boxes one and two are wrapped in a box that is 100%
wide.
e.g., body? then set no width on body (good advice in any case)
Box 1:
- variable width (varies by line length)
- nowrap
The em (and ex) unit is a unit based on font-size. I think this is
what you want. The larger the font, the larger the box will be. But
since your test page has no content, and you provided no other
details, I can't say for sure.

div.box1 {
width: 12em ;
/* you need to find a width that will accomodate your size */
float: left ;
/* float in css is similar to float attribute for images */
/* in html 3.2 */
}
Box 2:
- 100% of remaining width
Width: auto, which is the default. If box 2 will fit, it will sit to
the right of box 1, because box 1 is floated left. So no styles are
needed here.
Box 2a;
- 50% of box 2
div.box2a {
width: 50% ;
float: left ;
}
Box 2b:
- 50% of box 2
Box 2b will take the remaining width, and float to the right of box
2a, assuming it will fit there. If not, it will flow below box 2a.

Floats can be dicey affairs. Floated boxes are taken out of the
normal document flow, and unanticipated effects sometimes show up. I
suggest that you accept that some browsers cannot present the layout
exactly as you want, and let them display it in a manner more
appropriate for them.
(understanding the concepts behind this layout will help me
considerably in grokking CSS positioning):


I cannot explain the css box model in a single post. Have you tried
an online tutorial?

http://css.nu/pointers/index.html#Tutorials

--
Brian
follow the directions in my address to email me

Jul 20 '05 #2

P: n/a
Brian wrote:
James Thornton wrote:
I'm trying to make the transition from tables to CSS, and I need
someone to explain how to achieve the following layout (understanding
the concepts behind this layout will help me considerably in grokking
CSS positioning):

http://unifiedmind.com/images/css-example.gif

Box 2:
- 100% of remaining width


Width: auto, which is the default. If box 2 will fit, it will sit to
the right of box 1, because box 1 is floated left. So no styles are
needed here.


Box two does fit, but when I give 2a and 2b each a width of 50%, it
appears that they are 50% of the screen, not 50% of box 2, so box 2b
flows below box 2a. How do I get box 2a and 2b to have a 50% width of box 2?

Here's my HTML:

<div class="box1">yada yada yada</div>

<div>
<div class="box2a">bla bla bla</div>
<div class="box2b">da de da de da</div>
</div>

Thanks.

Jul 20 '05 #3

P: n/a
James Thornton wrote:

Box two does fit, but when I give 2a and 2b each a width of 50%, it
appears that they are 50% of the screen, not 50% of box 2, so box 2b
flows below box 2a. How do I get box 2a and 2b to have a 50% width of box 2?


Did you set a width on box 1?

--
Brian
follow the directions in my address to email me

Jul 20 '05 #4

P: n/a
Brian wrote:
James Thornton wrote:

Box two does fit, but when I give 2a and 2b each a width of 50%, it
appears that they are 50% of the screen, not 50% of box 2, so box 2b
flows below box 2a. How do I get box 2a and 2b to have a 50% width of
box 2?

Did you set a width on box 1?


Yes -- 150px.

Jul 20 '05 #5

P: n/a
James Thornton wrote:
Brian wrote:
Did you set a width on box 1?


Yes -- 150px.


time to supply a url to a test case.

--
Brian
follow the directions in my address to email me

Jul 20 '05 #6

P: n/a
Brian wrote:
James Thornton wrote:
Brian wrote:

time to supply a url to a test case.


http://unifiedmind.com/try/css.html
http://unifiedmind.com/try/james.css
Jul 20 '05 #7

P: n/a
James Thornton wrote:

http://unifiedmind.com/try/css.html
http://unifiedmind.com/try/james.css


I read the spec on how to compute width, but I can't say I'm
absolutely sure of my understanding. However, on looking at your test
page, it appears that div 2a and div2b have 49% of the width of the
containing block, the body element, not the width of body - 150px.
Perhaps this is as it should be, since floated elements are treated
specially.

http://www.w3.org/TR/REC-CSS2/visure...#propdef-float

The diagrams on that page seem to confirm that.

Ultimately, you might want to look at 3 column layouts.
http://glish.com/css/7.asp

NB: the glish page makes a mistake in setting widths of
text-containing blocks in pixels. (Resize the text to something
larger, and watch it fall apart.) Your test site makes the same
mistake. Don't do that on any live site.

--
Brian
follow the directions in my address to email me

Jul 20 '05 #8

This discussion thread is closed

Replies have been disabled for this discussion.