Css Layout Problem using Divs_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-03-02 12:21 出处：网络

I would like to have a page 开发者_如何转开发using the following page layout, When there is content within rightContent, the two divs should be next to each other.

相关专题：css

I would like to have a page 开发者_如何转开发using the following page layout,

When there is content within rightContent, the two divs should be next to each other. When there is no content within rightContent, the leftContent should be the full width.

Is this possible?

  <div id="container" style="width: 1100px; border:1px solid #000000;">  

        <div id="leftContent" style="float: left; width:100%;" >            
           lkasdjfal sfjalsfj asfj asldfjaslfja sfjdlkdjasdlkf asdfasldfjas fjaslfd jasldfj alsdjfalsdf     
        </div>    
        <div id="rightContent" style="float: right;">           
           lkasdjfal sfjalsfj asfj asldfjaslfja sfjdlkdjasdlkf asdfasldfjas fjaslfd jasldfj            
        </div>

    </div>

Just place the rightContent div inside the leftContent div, should give you the effect your looking for. http://jsfiddle.net/5ubTe/85/

I'd suggest that you dynamically add a class of 'single' to the body tag when you know that the right column will be empty, or when you simply want to assume a single-column layout for that page. This will let you hide the right column with CSS, like so:

#rightColumn{
    width:50%;
    float:right;
}

#leftColumn{
    width:50%;
    float:left;
}

body.single #rightColumn{
    display:none;
}

body.single #leftColumn{
    width:100%;
    float:none;
}

Then, just change your <body> tag to read <body class="single"> on pages that you'd like to use a single-column layout for, and the right column will be hidden on those pages whether or not it contains content, without having to make any other changes to the HTML or fiddle about with JavaScript.