SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Dec 2008
    Location
    Tehran - Iran
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    one liquid div with one fixed size div

    i have a layout like this :

    Code:
    <div id="main" style="width:100%; height:500px; background-color: #ccc;">
        <div id="right" style="float: right; width:100px; height:500px; background-color: red;">
        </div>
        <div id="left" style="margin-right: 100px; height:500px; background-color: orange;">
        </div>
    </div>
    how can i make the left div width flexible when the right div is not present in page, something like sidebar that are not present in all pages

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,602
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    You'd need to set a class on a parent, aka set a class="noleftbar" on the <div id="main"> element.

    Then just remove the right margin on the left column
    Code:
    .noleftbar #left{margin-right:0;}
    There is no automatic way though
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  3. #3
    SitePoint Member
    Join Date
    Dec 2008
    Location
    Tehran - Iran
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thnx for your reply, i have attached two sample pictures that i want to build, i am asking again because i think i couldnt explain it well
    in main page i have a container div with 960px width which has 2 divs inside it, one floated div in right with 100px width and another div which i want to fill the remaining area of container, in other pages the right div with 100px width is not present so i want the left div fill the whole area of container
    is it possible with pure css ? or should i use some js ?
    thnx again
    Attached Images Attached Images
    • File Type: jpg 1.jpg (33.8 KB, 3 views)
    • File Type: jpg 2.jpg (24.1 KB, 3 views)

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,602
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Again, you will need to identify those pages that have no sidebar, and add a class to a parent (I choose the #main element).

    My post explains how to do that way. There is no otehr way with CSS (correctly anyway).

    JS could be used but there really is no need unless you yourself won't know if pages won't have the sidebar.
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Yes you can do this with css if you use overflow and haslayout instead of margins.

    Here are some very very old examples.

    http://pmob.co.uk/temp/2col-into-onecol.htm
    http://www.pmob.co.uk/temp/3col-overflow-toggle.htm
    http://www.pmob.co.uk/temp/overflow-toggle.htm

    The js is just used to hide the element for the demo and is not required. Nothing else is changed.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •