.NET horizontal layout question

  • Thread starter Thread starter Axel
  • Start date Start date
A

Axel

hello I have managed to get 3 areas aligned beside each other, like this

AREA1 AREA2 AREA3

I originally wanted to use Panel control but they always displayed on
top of each other.

The CSS that I am using is this:

div.hpanel
{
display: inline-block;
vertical-align:top;
background-color: Yellow !important;
border: solid 2px White;
padding-right:15px;
margin-right: 5px;
}

(background and border for testing purposes only

AREA1
GroupPanel:Sort By-
| o Priority |
| o Account |
------------------


AREA2
<p>Number of Recs: <label/></p>
<p>Account list: <dropdown/></p>

AREA3
<p>Comment:<BR>
<TextBox multiline>
</p>


So I tried this
<div>
<div class=hpanel>
AREA1
</div>
<div class=hpanel>
AREA2
</div>
<div class=hpanel>
AREA3
</div>
</div>

In Firefox (3.0) they are shown as expected, blocks in a line:
http://tinyurl.com/dyeqkc

In IE7 they all stretch over the container of the outmost div (a TD from
the master page) and are shown underneath each other:
http://tinyurl.com/djzyzh

Any idea how to fix this? Would display: table-row (container) and
table-cell (areas) help at all? Is there maybe something built into IE
that makes all divs stretch to 100% of their container by default?

thanks in advance
Axel
 
this markup works:

div.hbox
{
border: dotted 1px Gray; /* layout test */
-moz-border-radius: 3px; /* layout test */
text-align: left;
Width: 100%;
margin-bottom: 5px;
}
div.hpanel
{
border: dotted 1px #CCC; /* layout test */
-moz-border-radius: 2px; /* layout test */
display: inline-block;
padding-left:5px;
margin-right: 5px;
vertical-align:top;
/* ie7 quirk for toggling hasLayout and inline-block! */
zoom:1.0; *display: inline;
}

html:

<div class="hbox">
<div class="hpanel">
AREA1
<div>
<div class="hpanel">
AREA2
<div>
<div class="hpanel">
AREA3
<div>
</div>


will display as

______ _______ _______
|AREA1| |AREA2| |AREA3|
------ ------- -------

cheers
Axel
 
this markup works:

Axel,

Which browsers does this work with?

And, why wouldn't you just use a horizontal UL instead?

John
 
div.hpanel
{
border: dotted 1px #CCC; /* layout test */
-moz-border-radius: 2px; /* layout test */
display: inline-block;
padding-left:5px;
margin-right: 5px;
vertical-align:top;
/* ie7 quirk for toggling hasLayout and inline-block! */
zoom:1.0; *display: inline;
}
Click to expand...

My VS compains that "inline-block" is not a valid
for "display" according to CSS 2.0... What's up
with that? It gives me "inline" and "block" as
available options but not both at the same time...
 
Thanks! For some reason my VS2008 doesn't know it...

--
Regards
K Viltersten




Juan T. Llibre said:
re:
!> My VS compains that "inline-block" is not
!> a valid for "display" according to CSS 2.0.

"inline-block" was introduced in CSS 2.1.

See :

http://www.w3.org/TR/CSS21/propidx.html

Look for "display" in the leftmost column, and you'll see inline-block as
a valid value.



Juan T. Llibre, asp.net MVP
asp.net faq : http://asp.net.do/faq/
=========================
Click to expand...
 
Back
Top