Re: [css-d] New to CSS...Why isn't this horizontal?
You have nothing set on the li elements to tell them to stack horizontally. You set display: inline-block on the ul, but the items inside the ul will stack as normal, which is vertically. Setting the display property on the ul will force it to sit horizontally with other block-level elements which are SIBLINGS (e.g. another ul after this one), but it won't cause the children (the lis) to display horizontally. Instead, take the display off of the ul and set it (or float:left) on the li elements. Then they will line up horizontally. On 9/12/05, Rick Faircloth [EMAIL PROTECTED] wrote: Hi, all... I'm new to trying to do things with CSS...considering using CSS instead of tables and seeing what can be done. I'm trying to line up two DIV boxes horizontally. Instead, they are still vertical... What am I doing wrong? UL Style=display: inline-block; list-style-type: none LIDIV Style=top: 25px; left: 25px; height: 25px; width: 25px; margin: 5px; border: 1px solid black; /DIV/LI LIDIV Style=height: 25px; width: 25px; margin: 5px; border: 1px solid black; /DIV/LI /UL Thanks, Rick __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] New to CSS...Why isn't this horizontal?
Monday, September 12, 2005, 12:58:29 PM, Rick Faircloth wrote: I'm trying to line up two DIV boxes horizontally. Instead, Sounds like you basically want a 2-column layout, minus the header/footer. You don't say what content will go in these boxes, so I'm assuming they should expand as necessary. This means float-based will be the way to go. You could take something like this and adapt it: http://css.maxdesign.com.au/floatutorial/tutorial0816.htm remove the #top and #footer divs... Could you give us an example of what you'd like to see? Steve -- http://mrclay.org/ : http://frenchhorns.mrclay.org/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] New to CSS...Why isn't this horizontal?
Hi, Eric... That worked...I had to using float: left (IE 6)...display: inline-block didn't work...guess that works for other browsers? Thanks for the help! Rick -Original Message- From: Eric Shepherd [mailto:[EMAIL PROTECTED] Sent: Monday, September 12, 2005 1:10 PM To: [EMAIL PROTECTED] Cc: css-discuss Subject: Re: [css-d] New to CSS...Why isn't this horizontal? You have nothing set on the li elements to tell them to stack horizontally. You set display: inline-block on the ul, but the items inside the ul will stack as normal, which is vertically. Setting the display property on the ul will force it to sit horizontally with other block-level elements which are SIBLINGS (e.g. another ul after this one), but it won't cause the children (the lis) to display horizontally. Instead, take the display off of the ul and set it (or float:left) on the li elements. Then they will line up horizontally. On 9/12/05, Rick Faircloth [EMAIL PROTECTED] wrote: Hi, all... I'm new to trying to do things with CSS...considering using CSS instead of tables and seeing what can be done. I'm trying to line up two DIV boxes horizontally. Instead, they are still vertical... What am I doing wrong? UL Style=display: inline-block; list-style-type: none LIDIV Style=top: 25px; left: 25px; height: 25px; width: 25px; margin: 5px; border: 1px solid black; /DIV/LI LIDIV Style=height: 25px; width: 25px; margin: 5px; border: 1px solid black; /DIV/LI /UL Thanks, Rick __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
