.NET horizontal layout question

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
 
A

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
 
J

JM

this markup works:

Axel,

Which browsers does this work with?

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

John
 
K

K Viltersten

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;
}

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...
 
K

K Viltersten

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/
=========================
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,904
Latest member
HealthyVisionsCBDPrice

Latest Threads

Top