Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > ASP .Net > .NET horizontal layout question

Reply
Thread Tools

.NET horizontal layout question

 
 
Axel
Guest
Posts: n/a
 
      03-25-2009
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
 
Reply With Quote
 
 
 
 
Axel
Guest
Posts: n/a
 
      03-26-2009
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

Axel wrote:
> 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

 
Reply With Quote
 
 
 
 
JM
Guest
Posts: n/a
 
      03-28-2009
> this markup works:

Axel,

Which browsers does this work with?

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

John


 
Reply With Quote
 
imransyed63 imransyed63 is offline
Member
Join Date: May 2006
Posts: 31
 
      03-29-2009
You can use span instead of div
 
Reply With Quote
 
K Viltersten
Guest
Posts: n/a
 
      03-29-2009
> 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...

--
Regards
K Viltersten
 
Reply With Quote
 
Juan T. Llibre
Guest
Posts: n/a
 
      03-30-2009
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/
=========================
"K Viltersten" <(E-Mail Removed)> wrote in message news:(E-Mail Removed)...
>> 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...
>
> --
> Regards
> K Viltersten




 
Reply With Quote
 
K Viltersten
Guest
Posts: n/a
 
      03-30-2009
Thanks! For some reason my VS2008 doesn't know it...

--
Regards
K Viltersten




"Juan T. Llibre" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
> 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/
> =========================
> "K Viltersten" <(E-Mail Removed)> wrote in message
> news:(E-Mail Removed)...
>>> 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...
>>
>> --
>> Regards
>> K Viltersten

>
>
>


 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Choosing Layout: Css-Layout or Table-Layout hpourfard@gmail.com ASP .Net 1 06-19-2006 10:06 AM
CSS Layout question - how to duplicate a table layout with CSS Eric ASP .Net 4 12-24-2004 04:54 PM
Oppinion regarding grid layout vs flow layout NWx ASP .Net 4 02-19-2004 08:56 PM
Converting from grid layout to flow layout. RobertH ASP .Net 1 11-04-2003 12:43 AM
DataList inside a Grid Layout Panel (<DIV>) item layout problem Rick Spiewak ASP .Net 3 08-26-2003 04:22 AM



Advertisments