CODEWITHSUNDEEP
jquerycssjsfprimefaces
bvb1909
bvb1909

Reputation: 201

CSS alignment and width with percent

Hi guys I want to aligning two divs ( one right with 30 % width and one left with 70 %). I searching a long time but nothing is working . I hope someone can help me.

I am using primefaces 3.5 and jsf 2.1 and i use e primefaces Theme from jQuery.

Here is my template:

<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core"
    xmlns:p="http://primefaces.org/ui" template="/META-INF/templates/template.xhtml">

    <ui:define name="content">
        <p:panelGrid columns="2" columnClasses="verticalAlignTop,verticalAlignTop">
            <p:panel id="panelTemplContSplitLeft" styleClass="left"
                style="border-radius: 13px 13px 13px 13px;
                       -moz-border-radius: 13px 13px 13px 13px;
                       -webkit-border-radius: 13px 13px 13px 13px;
                       border: 2px solid #080808;
                       background: #fcfcfc; width: 350px; ">
                <ui:insert name="contentLeft">
                    <h:outputLabel value="This is default Content Left" />
                </ui:insert>
            </p:panel>

            <p:panel id="panelTemplContSplitRight" styleClass="right"
                style="border-radius: 13px 13px 13px 13px;
                       -moz-border-radius: 13px 13px 13px 13px;
                       -webkit-border-radius: 13px 13px 13px 13px;
                       border: 2px solid #080808;
                       background: #fcfcfc; width:800px;">
                <ui:insert name="contentRight">
                    <h:outputLabel value="This is default Content Right" />
                </ui:insert>
            </p:panel>
        </p:panelGrid>
    </ui:define>
</ui:composition>

This is a part from my theme.css

.verticalAlignTop { vertical-align: top; }

.right {
    width: 70%;
    margin-left: auto;
    margin-right: 1em;

    right: 0px;
}

.left {
    width: 30%;
    margin-left: 1em;
    margin-right: auto;
}

Upvotes: 0

Views: 608

Answers (1)

NoobEditor
NoobEditor

Reputation: 15891

Problem : Calculate the below marked widths and they will be > 100%, so your divs wont align in one line

.right {
    width: 70%; /*this is a width */
    margin-left: auto;/*this is a width */
    margin-right: 1em;/*this is a width */

    right: 0px;/* why do you have this when you dont have "position" attribute?*/
}

.left {
    width: 30%;/*this is a width */
    margin-left: 1em;/*this is a width */
    margin-right: auto;
}

demo

Solution :

.right {
    width: 60%; /* either reduce this  */
    margin-left: auto;/*or remove these */
    margin-right: 1em;/*or remove these */
    display:inline-block; /*added*/
}

.left {
    width: 25%;/* either reduce this  */
    margin-left: 1em;/*or remove these */
    margin-right: auto;/*or remove these */
    display:inline-block; /*added*/
}

demo

Upvotes: 1

Related Questions