SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member mixo's Avatar
    Join Date
    Jul 2012
    Location
    United States of Russia
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy problem with sidebar

    85ddf013b5ee.jpg
    Please help me fix sidebar
    here's the css code
    #body #content {
    margin:0px; padding: 0px;
    float: left;
    margin-left: 3%;
    }
    /*---sidebar styles --- */
    #body #sidebar {
    margin:0px; padding: 0px;
    float: right;
    width: 300px;
    margin-right: 2%;

    }
    h3.title {
    margin: 1.6em 0 .5em;
    padding: 4px 5px;
    background-color: #FFD595;
    font-size: 100%;
    color: #333;
    }
    #body #sidebar .meta-container {
    width: 300px;
    margin: 0px; padding: 0px;
    margin-right: 2%;
    height: 100px;

    }
    /*---content post --- */
    h3.post-title {
    text-decoration: none;
    color: #333;
    font-weight: bold;
    }
    .meta-post {
    float: left;
    width: 50%;
    height: auto;
    }

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,622
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    Without the HTML or seeing the live page, it's a bit of a guess, but the problem seems to be that you have no width set on #content, so it is going full width. Float doesn't work unless you set a width on the element.

  3. #3
    SitePoint Member mixo's Avatar
    Join Date
    Jul 2012
    Location
    United States of Russia
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    here is the html
    <div id="body">
    <div id="content">
    <h3 class="post-title">What is lorem ipsum!</h3>
    <div class="meta-post">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
    </div>
    <div class="inner">
    <!--------CONTENT---------->

    <!---------SIDEBAR------------>
    <div id="sidebar">
    <h3 class="title">Site menu</h3>
    <div class="meta-container">
    Good code is maintainable, reusable, and testable. These 10 tips address how you and/or your development team can handle various coding tasks and how to keep everything as neat as possible.
    </div>

    <h3 class="title">About prifantom</h3>
    <div class="meta-container">
    Good code is maintainable, reusable, and testable. These 10 tips address how you and/or your development team can handle various coding tasks and how to keep everything as neat as possible.
    </div>
    </div>

    </div>

    </div><!--body-->

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,622
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    Try my suggestion above. Put a width on the #content div. Otherwise float doesn't work.

  5. #5
    SitePoint Member mixo's Avatar
    Join Date
    Jul 2012
    Location
    United States of Russia
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    man i did 100% still dosent work any else suggestions?

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,622
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    Quote Originally Posted by mixo View Post
    man i did 100% still dosent work any else suggestions?
    If you se it to 100%, nothing will change, because that is what is happening already. You can't expect the sidebar to sit next to content if content has a 100% width. So if your container is set to, say, 900px, and your sidebar is 300px wide, set your content div to something like width: 580px. Two floats can't site beside each other unless there is room for them both.

  7. #7
    SitePoint Member mixo's Avatar
    Join Date
    Jul 2012
    Location
    United States of Russia
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok thanks i found the problam


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
  •