Jump to content
JoReL

CSS: 2 columns

Recommended Posts

I have this menu with tabs on it for deferent info on products. The problems is that in this tab i added a list of two columns, but the info i placed on the list wont show. I dont have problems with the other tabs, thinking there might be a problem on the css or bad sintax.Code on css:

#lateral_X{width: 100px;background-color: #CCCCCC;float:left;}#lateral_Y{margin-left:190px;background-color: #FFFFFF;border:#000000 1px solid;}

code HTML

<div id="panel_02">	<div id="lateral_X">	 <li><p>Functions</p></li>	 <li><p>blablabla</p></li>	 <li><p>blablabla</p></li>	 <li><p>*Product</p></li>	 <li><p>*Product</p></li>	 <li><p>*Product</p></li>	 <li><p>*Product</p></li>	</div>	 <div id="lateral_Y">	 <li><p>Functons</p></li>	 <li><p>blablabla</p></li>	 <li><p>blablabla</p></li>	 <li><p>*Product</p></li>	 <li><p>*Product</p></li>	 <li><p>*Product</p></li>	 <li><p>*Product</p></li>								 </div></div>

Share this post


Link to post
Share on other sites

What do you mean, exactly? When I run that code, it shows two columns side by side with a 90px margin in between.What's the css styling for "panel_02"?

Share this post


Link to post
Share on other sites
What do you mean, exactly? When I run that code, it shows two columns side by side with a 90px margin in between.What's the css styling for "panel_02"?
it wont show a thing on that section of the tab menu.te code for tab menu is:
div#panel {    position: relative;    width:400px;    height: 300px;} ul#tabs {    position:absolute;    left: 0px;    top: 0px;    margin:0;    padding:0;    width: 400px;    height: 24px;    z-index: 20;}    ul#tabs li {        float:left;        height: 23px;        padding-left: 8px;        list-style: none;        margin-right: 1px;        background: url(images/tabs.png) left -48px;    }    ul#tabs li.actual {        height: 24px;        background: url(images/tabs.png) left -72px;    }        ul#tabs li a {            display: block;                /* hack para ie6 */                .display: inline-block;                /* fin del hack */            height: 23px;            line-height: 23px;            padding-right: 8px;            outline: 0px none;            font-family: arial;            font-size: 10px;            text-decoration: none;            color: #000;            background: url(images/tabs.png) right 0px;        }                ul#tabs li.actual a {            height: 24px;            line-height: 24px;            background: url(images/tabs.png) right -24px;            cursor: default;            }/* Panel Configuration */div#panel #paneles {    position: absolute;    left: 0px;    top: 26px;    width: 398px;    height: 275px;    border: 1px solid #91a7b4;    background: #fff;    overflow: hidden;    z-index: 10px;}    div#panel #paneles div {        margin:10px;        width: 378px;        height: 255px;        font-family: arial;        font-size: 12px;        text-decoration: none;        color: #000;        overflow: auto;    }

Share this post


Link to post
Share on other sites

Well, for a start you've left out the <ul> opening and closing tags in your html, so none of your <li>s will match up with your css rules. Is there a reason for you to have <p> tags inside <li> tags?

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...